无涯教程网-CSS教程完整离线版.pdf

CSS - 简介介绍 层叠样式表(英语:Cascading Style Sheets，缩写:CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表)是⼀ 种⽤来为结构化⽂档(如HTML⽂档或XML应⽤)添加样式(字体、间距和颜⾊等)的计算机语⾔，由W3C定义和维护。⽬前 最新版本是CSS2.1 ， W3C的推荐标准。CSS3现在已被⼤部分现代浏览器⽀持，⽽下⼀版的CSS4仍在开发中。 CSS很容易学习和理解，但是它提供了对HTML⽂档表⽰的强⼤控制。 CSS通常与标签语⾔HTML或XHTML结合使⽤。 CSS的优点 节省时间 - 您可以编写⼀次CSS ，然后在多个HTML页⾯中重复使⽤同⼀样式。 加载速度更快 - 如果使⽤CSS ，则⽆需每次都编写HTML标签属性。 易于维护 - 要进⾏全局更改，只需更改样式，所有⽹页中的所有元素都会⾃动更新。 HTML的⾼级样式 - CSS具有⽐HTML更⼴泛的属性数组，因此与HTML属性相⽐，您可以使HTML页⾯的外观更好。 多种设备兼容性 - 样式表允许针对⼀种以上类型的设备优化内容。 全球⽹络标准 - 现在不推荐使⽤HTML属性，建议使⽤CSS。 下⼀篇:CSS - 语法 吾⽣也有涯,⽽知⽆涯 - ⽆涯教程 CSS - 语法介绍 CSS包含样式规则，这些样式规则由浏览器解析，然后应⽤于HTML的相应元素。 Selector - 选择器是将应⽤样式的HTML标签。 这可以是任何标签，例如h1或table等。 Property - 属性 HTML标签的⼀种属性，简⽽⾔之，所有HTML属性都将转换为CSS属性，它可能是颜⾊(color) ，边框(border)等。 Value - 将值分配给属性。例如， color 属性可以具有 red 或#F1F1F1 等值。 您可以按如下所⽰放置CSS样式规则语法- selector { property: value } ⽰例-您可以如下定义表格边框- table{ border :1px solid #C00; } 这⾥的table是⼀个选项器，border是⼀个属性，给定值 1px solid#C00 是该属性的值。 您可以根据⾃⼰的喜好以各种简单的⽅式定义选择器。 类型选择器 这是我们上⾯看到的相同选择器。同样，还有⼀个⽰例为所有h1赋予颜⾊- h1 { color: #36CFFF; } 通⽤选择器 通⽤​选择器不选择特定类型的元素，⽽是简单地匹配任何元素类型的名称- * { color: #000000; } 该规则将⽂档中每个元素的内容显⽰为⿊⾊。 特定选择器 假设仅当样式规则位于特定元素内时，才希望将其应⽤于特定元素。 如以下⽰例所⽰，样式规则仅在em元素位于ul标签内时才适⽤。 ul em { color: #000000; } Cla 选择器 您可以基于元素的 cla 属性定义样式规则。具有该类的所有元素将根据定义的规则进⾏格式化。 .black { color: #000000; } 对于我们⽂档中 cla 属性设置为 black 的每个元素，此规则均将其内容呈现为⿊⾊。例如- h1.black { 吾⽣也有涯,⽽知⽆涯 - ⽆涯教程 h1.black { color: #000000; } 此规则仅将 cla 属性设置为black的h1元素呈现为⿊⾊。 您可以将多个类选项器应⽤于给定元素。考虑以下⽰例- p class=center bold This para will be styled by the classes center and bold /p ID选择器 您可以基于元素的 id 属性定义样式规则。 #black { color: #000000; } 对于我们⽂档中 id 属性设置为 black 的每个元素，此规则均将其内容呈现为⿊⾊。例如- h1#black { color: #000000; } 该