第三章css层叠样式表基础知识要点.pptVIP

第三章 CSS层叠样式表基础知识 授课老师:赵岚稹 本章内容 1、CSS语言基础 2、CSS网页布局与定位 3、CSS网页元素设计 4、CSS内容排版 1、CSS语言基础 利用XHTML语言中的标记，实现了对网页结构的控制，用div布局，用h1到h6,p等标记定义文本结构，用img定义图片等等。 浏览器根据标记的默认样式显示网页的内容和结构，但是，默认的样式不能满足我们对网页的需求，所以，我们需要运用样式语言来对网页的结构和内容进行重定义。 这就需要CSS（层叠样式表）语言。 1.2、CSS语法结构 要将CSS应用到XHTML中，重定义网页的样式，首先要做的就是选用合适的选择符。简单地说，选择符用于告诉浏览器，这段样式将应用到哪个对象上。 CSS属性与选择符 使用方法： selector(选择符){ property（属性）:value（属性值）; } 比如： body{ background-color:#00F; } 它表示选择符为body,即选择了页面中的body标记，属性为background-color,这个属性用于控制对象的背景颜色，其值为#00F。所以，通过这段代码，页面中的body对象的背景颜色，被重定义为了蓝色。 可以同时定义一个或多个属性，每个属性之间用分号隔开。 选择符很多种，可分为标签选择符、群组选择符、包含选择符、id与class选择符、组合选择符、伪类及伪对象等。 1、标签选择符 2、群组选择符 除了可以对单个XHTML对象进行样式指定外，还可以对一组对象进行相同的样式指派。 比如： h1,h2,h3,p{ font-size:12px; color:#ccc; } 使用逗号进行分隔，使得页面中所有h1,h2,h3,p都将具有相同的样式定义。这样的好处是，可以减少代码量，改善css代码结构。 3、包含选择符 当我们只打算对某个对象的子对象进行样式指定时，包含选择符派上大用场，包含选择符指前一个对象包含了后一个对象，使用空格分隔。 h1 span{ color:red; } 这样是只对h1下的span标记有用，而对单独的h1和span都不起作用。 这样的结构可以帮组我们避免过多的样式设置，精简了代码。除了二级包含，还可以多级包含，但为了代码的可读性，不提倡太多级包含。 4、id与class选择符 id与class都是CSS提供给用户自定义标记名称的选择符，从而达到扩展XHTML标记的目的。 比如：div id=“left”和div id=“right”，因为为每个div定义了名称，那么它们就是两个不同的对象了。 XHTML的每个标记都可以为其加上id属性，从而为每个标记加上独一无二的身份。相当于产品的编号一样。 id选择符 在网页中，每个id名称只能使用一次，具有唯一性。 div id=“content”/div 这个div被指定了id名为content，那么就不允许别的div再取名为content. class选择符 class可称为类选择符，与id不同，class可以重复使用。比如要对多个对象使用相同的样式，可以为它们定义同一个class名称。 div class=“center”/div h1 class=“center”/h1 p class=“center”/p 无论什么xhtml标记，页面中所有使用了class=“center”的标记都可以使用此样式。Class选择符也是对css代码重用性的良好体现。 每个标记都可以使用id和class