网页设计_第11章

第11章CSS语法基础 CSS意思就是叠层样式表 CascadingStyleSheets 使用CSS的优点在于将格式从功能中分离出来 它定义了HTML元素的显示 是一种对web文档添加样式的简单机制 主要内容 CSS定义CSS语法CSS类型伪类与为元素 11 1理解CSS 1 基本语法CSS规则由选择器 selector 属性 property 和值 value 三部分组成 基本格式如下 selector property value 2 组合为了提高效率 可以将相同属性和值赋给多个选择器 并用逗号将选择器分开 例如 h1 h2 h3 h4 h5 h6 color blue 11 1理解CSS 3 选择器类选择器类可以将同一类型的HTML元素定义出不同的样式 例如 p right text align right p center text align center 居右显示 居中显示 4 ID选择器可以使用id选择器来定义HTML标签的样式 id选择器可用 来定义 例如 p idone text align center color blue 或 idone text align center color blue 11 1理解CSS 5 关联选择器可以为嵌入的其它标签定义样式 格式为 h3em color blue 指定了嵌套在标签中的标签所包含的内容字体颜色为蓝色 具有这样形式的选择器称为关联选择器 contextualselector 两个标签之间用空格分隔 h3和em之间用空格隔开 类似的还有 h3b color blue h2emb color blue 11 2CSS类型 CSS按其位置不同主要分为以下三种类型 行内样式表 InlineStyleSheet 内部样式表 IntenalStyleSheet 外部样式表 ExtenalStyleSheet 行内样式表 行内样式是定义在HTML标签里 只对所在的标签有效 使用行内样式就失去了样式表的优势 将内容和形式相混淆了 一般这类方法在个别元素需要改变样式时使用 内部样式表 内部样式表是使用标签在head区域内定义样式 内部样式表只对所在的网页有效 缺点是不利于多个网页的维护 例如 p pargh text align center hr line color blue 内部样式表 外部样式表 外部样式表可以集中控制和管理多个网页的格式和布局 省去了对这些网页的每个标签都要分别进行格式化的麻烦 与内部样式表不同 外部样式表作为单独的文件存储 如果对外部样式表进行修改 结果将影响到引用该样式表的所有网页 引用方法 多重样式表 样式表的优先级依次是行内样式表 InlineStyleSheet 内部样式表 IntenalStyleSheet 外部样式表 ExtenalStyleSheet 浏览器缺省 BrowserDefault 如果一些属性被相同的选择器设置成不同的样式 值就会被更为具体的样式所继承 也就是按照样式表的优先级进行继承 11 3伪类与伪元素 伪类是一种特殊的类选择器 用来指定一个或者与其相关的选择符的状态 伪类由四部分组成 选择器 selector 伪类 pseudo class 属性 property 值 value 其语法结构如下 选择器 伪类 属性 值 selector pseudo class property value 此外 CSS类还可以和伪类混合使用 格式如下 选择器 类 伪类 属性 值 例如 a two link color ff0000 selector class pseudo class property value 11 3伪类与伪元素 伪元素的语法规则与伪类语法规则类似 伪元素用于为一个选择器添加特殊效果 其语法结构如下 选择器 伪元素 属性 值 selector pseudo element property va