CSS基础.ppt

4.2.2 常用的选择符 4．span选择符 span标签也可以用来定义区域，但一般用于网页中某一个小问题段落。其格式为： span id=样式名…/span 或 span class=样式名…/span 5．div选择符 div（division，部分的简写）在功能上与span相似，最主要的差别在于，div是一个块级标签。其格式为： div id=样式名…/div 或 div class=样式名…/div 4.2 样式表语法 4.2.2 常用的选择符 6．通配符选择符 是一种特殊的选择符，其作用是定义页面所有元素的样式，用“*”表示通配符选择符。其格式为： *｛CSS代码｝ 例：将页面中所有元素的外边距和内边距设置为0，代码如下： 4.2 样式表语法 7．包含选择符（见实例） 包含选择符能够简化代码，大范围的样式控制。其格式为： E1 E2 ｛ /*对子层控制规则*/ ｝ 8．分组选择符（见实例） 分组选择符指的是对多个标签设置同一样的样式。格式为： E1,E2,E3 { /*CSS代码*/} 4.2 样式表语法 9．伪类选择符 所指定的对象文档中并不存在，它指定的是一个或与其相关选择符的状态。 伪类可以让用户在使用页面的过程中增加更多的互交效果，例如应用最为广泛锚点标签a的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态以及被激活的链接状态）。 4.2 样式表语法 【演练4-1】伪类的应用。当鼠标悬停在超链接的时候背景色变为其他颜色，并且添加了边框线，待鼠标离开超链接时又恢复到默认状态，这种效果就可以通过伪类实现。本例文件4-1.html在浏览器中的显示效果如图4-11所示。 4.2 样式表语法 CSS引用方法 1. 内嵌样式 2. 内部样式表 3. 外部样式表 1. 内嵌样式 CSS引用方法 p style=“font-size:20pt; color:red ”xxxxxxxxxx/p 只对当前tag里的内容有效 例：内嵌样式 CSS引用方法 例：内嵌样式DEMO运行结果 CSS引用方法 ？ 2. 内部样式表 CSS引用方法 在HTML的head/head里面。只对当前页面有效 例：内部样式表 CSS引用方法 例：内部样式表DEMO运行结果 CSS引用方法 *** 3. 外部样式表 （实际工作使用最广泛的一种形式） CSS引用方法 解决当很多页面需要用到同样的样式！ CSS核心基础 在HTML中引入CSS的方法 将CSS样式代码保存在一个样式文件中，在页面中使用link标签链接到这个样式文件，实现多个页面同调用一个样式文件。（同一页面可根据需要链接多个样式文件） link href=mystyle.css rel=stylesheet type=text/css / 例：外部样式表 CSS引用方法 rel是Relations的缩写 指关联到一个stylesheet（样式表单） 例：外部样式表DEMO运行结果 CSS引用方法 4.5.1 样式表的层叠 样式表的优先级别从高到低为： 内嵌样式--内部样式表—外部样式表 高优先级样式将继承低优先级样式未重叠定义，但覆盖重叠定义。（见实例4-7） 样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义的为准。（见实例4-8） 4.5 样式表的层叠、特殊性与重要性 4.5.2 特殊性 特殊性描述了不同规则的相对权重，当多个规则应用到同一个元素时权重越大的样式会被优先采用。 例如： 4.5 样式表的层叠、特殊性与重要性 根据规范： 通配符选择符特殊性值是0； 简单选择符（例如P）特殊性值是1； 类选择符特殊性值是10； id选择符特殊性值是100； 选择符值越大，权重就越大，样式就会被 优先采用 4.5.3 重要性 不同的选择符定义相同的元素时，要考虑不同选择符之间的优先级（id选择符、类选择符和HTML标签选择符），id选择符的优先级最高，其次是类选择符，HTML标签选择符最低。如果想超越这三者之间的关系，可以用!important来提升样式表的优先权，例如： p { color: #f00!important } .blue { color: #00f} #id1 { color: #ff0} 1．块级元素（display:block） 块级元素是从一个新行开始显示的，其后面的元素也需