《网页设计制作》课件-项目5

《网页设计制作》项目55.1CSS列表属性5.2CSS精灵技术5.3CSS复合选择器5.4CSS超级链接属性5.5CSS特性目

录5.1CSS控制列表样式建议定义无序或有序列表时，可以通过标签的属性控制列表的项目符号，但是这种方式实现的效果并不理想，因此需要使用CSS中的列表样式属性。list-style-type属性list-style-image属性list-style-position属性list-style-type属性用于控制无序和有序列表的项目符号。list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。list-style-position属性用于控制列表项目符号的位置。5.1CSS控制列表样式5.1CSS控制列表样式list-style-type属性list-style-image属性list-style-position属性列表类型属性值显示效果无序列表（ul）disc●circle○square■有序列表（ol）decimal阿拉伯数字1、2、3......upper-alpha大写英文字母A、B、C......lower-alpha小写英文字母a、b、c......upper-roman大写罗马数字I、II、III......lower-roman小写罗马数字i、ii、iii......<ul>、<ol>公共属性none不显示任何符号list-style-type的属性值及显示效果5.1CSS控制列表样式因为各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用

list-style-type属性。list-style-type属性list-style-image属性list-style-position属性5.1CSS控制列表样式基本格式ul{list-style-image:url(图片路径);}list-style-type属性list-style-image属性list-style-position属性例如：<styletype="text/css">ul{list-style-image:url(images/1.png);}</style>5.1CSS控制列表样式list-style-type属性list-style-image属性list-style-position属性例如：list-style-position属性取值inside：列表项目符号位于列表文本以内。outside：列表项目符号位于列表文本以外。<styletype="text/css">.in{list-style-position:inside;}.out{list-style-psition:outside;}li{border:1pxsolid#CCC;}</style>5.1CSS控制列表样式list-style-image属性2list-style-position属性3list-style-type属性1列表样式复合属性list-style复合属性list-style:列表项目符号

列表项目符号的位置

列表项目图像;使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。5.1CSS列表属性5.2CSS精灵技术5.3CSS复合选择器5.4CSS超级链接属性5.5CSS特性目

录5.2CSS精灵技术什么是CSS精灵技术？CSS精灵（也称CSSSprites），是一种处理网页背景图像的方式。在网页设计中，CSS精灵会将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。5.2CSS精灵技术CSS精灵技术需求是什么？网页中的小图片大家随处可见上网导航信息查询网上预订5.2CSS精灵技术5.2CSS精灵技术当用户访问一个网站时，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰,服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。CSS精灵技术的需求5.2CSS精灵技术CSS精灵技术的工作原理只需发送一次请求将页面内所有零星图像制作成一张精灵图使用CSS定位属性5.2CSS精灵技术如何制作一个简单的精灵图然后，通过使用CSS的background-position属性进行背景的精确定位注意控制图片的坐标位置5.2CSS精灵技术精灵图5.1CSS列表属性5.2CSS精灵技术5.3CSS复合选择器5.4CSS超级链接属性5.5CSS特性目

录5.3CSS复合选择器CSS层叠性和继承性所谓层叠性是指多种CSS样式的叠加。层叠性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。继承性5.3CSS复合选择器CSS层叠性和继承性并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：

边框属性

内/外边距属性背景属性定位属性布局属性元素宽高属性5.3CSS复合选择器CSS优先级网页制作时，对统一元素，应用不同的背景，会出现什么情况？思考background-color:pink;background-color:blue;background-color:red;【结论】定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。5.3CSS复合选择器CSS优先级来看一个例子：<pclass="father"id="header"> <strongclass="blue">文本的颜色</strong></p>pstrong{color:black}/*权重为:1+1*/strong.blue{color:green;}/*权重为:1+10*/.fatherstrong{color:yellow}/*权重为:10+1*/p.fatherstrong{color:orange;}/*权重为:1+10+1*/p.father.blue{color:gold;}/*权重为:1+10+10*/#headerstrong{color:pink;}/*权重为:100+1*/#headerstrong.blue{color:red;}/*权重为:100+1+10*/对应的权重值：5.3CSS复合选择器CSS优先级继承样式的权重为0。行内样式优先。权重相同时，CSS遵循就近原则。CSS定义了一个!important命令，该命令被赋予最大的优先级。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：CSS3是CSS的最新版本，在CSS3中增加了许多新的选择器。运用这些选择器可以简化网页代码的书写，让稳当的结构更加简单。CSS3新增的选择器主要分类属性选择器、关系选择器、结构化伪类选择器、伪元素选择器4类CSS3有哪些新增选择器？5.3CSS复合选择器5.3CSS复合选择器属性选择器属性选择器可以根据网页标签的属性及属性值来选择标签。属性选择器一般是一个标签后紧跟中括号“[]”，中括号内部是属性或者属性表达式，知识点讲解5.3CSS复合选择器属性选择器属性选择器举例说明E[att^=value]div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div标签。E[att$=value]div[id$=section]表示匹配包含id属性，且id属性值是以“section”字符串结尾的div标签。E[att*=value]div[id*=section]表示匹配包含id属性，且id属性值包含“section”字符串的div标签。5.3CSS复合选择器关系选择器CSS3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接知识点讲解关系选择器举例说明子代选择器h1>strong表示选择嵌套在h1标签的子标签strong。临近兄弟选择器h2+p表示选择h2标签后紧邻的第一个兄弟标签p。普通兄弟选择器p~h2表示选择p标签所有的h2兄弟标签。5.3CSS复合选择器结构化伪类选择器结构化伪类选择器可以减少文档内class属性和id属性的定义，使文档变得更加简洁。知识点讲解结构化伪类选择器举例说明:root

用于匹配文档根标签，使用“:root选择器”定义的样式，对所有页面标签都生效。:notbody*:not(h2)用于排除body结构中的子结构标签h2。:only-childli:only-child用于匹配属于某父标签的唯一子标签（li），也就是说某个父标签仅有一个子标签（li）。:first-child

用于选择父元素第一个子标签。:last-child

用于选择父元素最后一个子标签。:nth-child(n)p:nth-child(2)用于选择父元素第二个子标签。:nth-last-child(n)p:nth-last-child(2)用于选择父元素倒数第二个子标签。:nth-of-type(n)h2:nth-of-type(odd)用于选择所有h2标签中位于奇数行的标签。:nth-last-of-type(n)p:nth-last-of-type(2)用于选择倒数第2个p标签:empty

用来选择没有子标签或文本内容为空的所有标签。5.3CSS复合选择器伪元素选择器伪元素选择器一般是一个标签后面紧跟英文冒号“:”，英文冒号后是伪元素名。知识点讲解5.3CSS复合选择器伪元素选择器伪元素选择器举例说明:beforep:before表示在p标签的内容前面插入内容。:afterp:after表示在p标签的内容后面插入内容。5.1CSS列表属性5.2CSS精灵技术5.3CSS复合选择器5.4CSS超级链接属性5.5CSS特性目

录5.4链接伪类控制超链接在CSS中通过链接伪类可以实现不同的链接状态定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。5.4链接伪类控制超链接什么是伪类？5.4链接伪类控制超链接伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标签名、类名或id名加“：”构成。5.4链接伪类控制超链接超链接标签<a>的伪类含义a:link{CSS样式规则;}未访问时超链接的状态a:visited{CSS样式规则;}访问后超链接的状态a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态a:active{CSS样式规则;}鼠标点击不动时超链接的状态超链接标签<a>的伪类5.4链接伪类控制超链接<styletype="text/css">a:link,a:visited{ color:#FC0;

text-decoration:none;/*清除超链接默认的下划线*/ margin-right:20px;}a:hover{ color:#0F0;

text-decoration:underline;/*鼠标悬停时出现下划线*/}a:active{color:#F00;}

</style>未访问和访问后鼠标悬停鼠标点击不动例如：5.4链接伪类控制超链接1、使用超链接的4种伪类时，对排列顺序是有要求的。通常按照