第二章CSS的基本语法..ppt

第二章CSS的基本语法 2.1 CSS选择器 选择器的概念 选择器是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。 三种基本选择器 标记选择器 类别选择器 ID选择器 2.1.1 标记选择器 标记选择器 用于声明哪些标记采用哪种CSS样式。 例如： 2.1.1 标记选择器 标记选择器 用于声明哪些标记采用哪种CSS样式。 声明格式： 2.1.1 标记选择器 注意 CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句有效。 例如： foot-width:48px; /*非法属性*/ color:ultraviolet; /*非法值*/ 2.1.2 类别选择器 类别选择器 类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。 声明格式： 2.1.2 类别选择器 类别选择器 参考实例：第二章/2-1.htm 参考实例：第二章/2-2.htm 2.1.2 类别选择器 标记.类别选择器 （复合选择器） 声明格式： 2.1.2 类别选择器 标记.类别选择器 参考实例：第二章/2-3.htm 参考实例：第二章/2-4.htm 在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将多个类别的样式风格同时运用到一个标记中。 如：h1 class=“a b”css学习/h1 2.1.3 ID选择器 ID选择器 ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。 声明格式： 2.1.3 ID选择器 ID选择器 参考实例：第二章/2-5.html 2.1.3 ID选择器 标记.ID选择器 （复合选择器） 声明格式： 2.2 选择器声明 集体声明 所谓集体声明就是将具有同样属性的CSS标记同时进行声明，各标记之间用逗号隔开。 参考实例：第二章/2-6.html 全局声明 如果希望页面中所有的标记都使用同一种CSS样式，但又不希望逐个来加入集体声明列表，这时可以利用全局声明符号”*“。 参考实例：第二章/2-7.html 2.2.2 选择器的嵌套 在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，之间用空格隔开。 参考实例：第二章/2-8.html 2.2.2 选择器的嵌套 嵌套选择器的使用范围非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。 例如： 2.3 CSS的继承 CSS继承 指子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。 CSS的继承简单的说就是将各个HTML标记看作是一个大容器，其中被包含的小容器会继承所包含它的大容器的风格样式。 参考实例：第二章/2-10.html 2.4 CSS的层叠特性 “层叠”是什么意思？ 层叠可以简单地理解为“冲突”的解决方案。 参考实例：2-11.html 优先级规则可以表述为： 行内样式ID样式类别样式标记样式 * 网络工程系 张红芳 qq：162038565 tel主要内容： CSS选择器 选择器声明 CSS的继承 CSS的层叠特性 重点：CSS中三种选择器的声明及使用　 style h1{ color:red; font-size:25px; } /style h3 标记 p 注意：一个id最多只能赋给一个html标记；另外ID选择器不支持像class选择器那样的多风格同时使用，类似“id=one two”是完全错误的。 h3 标记 p #id style p b{ color:red; text-decoration:underline; } /style .special i{color:red;} /*使用了属性special的标记里面包含的i*/ #one li{padding-left:5px;} /*ID为one的标记里面包含的li*/ td.top .top1 strong{font-size:16px;} /*多层嵌套，同样实用*/ *