上书房之CSS解读.docx

上书房之CSS 互联网产品研发前端技术  目录 第一章 CSS简介 2 第二章 CSS语法 3 第三章 CSS选择器 3 3.1. 元素选择器 3 3.2. 分组选择器 4 3.3. 类选择器 4 3.4. id选择器 6 3.5. 属性选择器 7 3.6. 后代选择器 10 3.7. 子元素选择器 12 3.8. 相邻元素选择器 12 3.9. 伪类 13 3.10. 伪元素 15 第四章 CSS样式 17 4.1. 背景 17 4.2. 文本 20 4.3. 字体 22 4.4. 列表 25 4.5. 表格 27 第五章 CSS盒子模型 30 5.1. 盒子模型概述 30 5.2. 内边距 30 5.3. 边框 31 5.4. 外边距 34 第六章 CSS定位 36 6.1. 相对定位 36 6.2. 绝对定位 38 6.3. 浮动 39  第一章 CSS简介 CSS (Cascading Style Sheets)是层叠样式表的缩写，样式定义了如何显示HTML元素。向HTML文档添加样式通常有三种方式：外部样式表、内部样式表、内联样式。 （1） 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。外部样式表将样式定义在.css文件中，在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在（文档的）头部，浏览器会从文件.css 中读到样式声明，并根据它来格式文档。 head meta charset=UTF-8 titlehtml示例/title link rel=stylesheet href=css/bootstrap.min.css / /head （2） 内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表。 head meta charset=UTF-8 titlehtml示例/title link rel=stylesheet href=css/bootstrap.min.css / style body { background-image:url(images/back40.gif); } hr { color:sienna; } p { margin-left:20px; } /style /head （3） 内联样式（慎用） 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 p style=color:sienna;margin-left:20pxThis is a paragraph./p 第二章 CSS语法 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（由键值对组成）。 选择器通常是您需要改变样式的 HTML元素。每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 h1 { font-family: 微软雅黑; color: blue; font-size: 12px; } 第三章 CSS选择器 3.1. 元素选择器 元素选择器是CSS最常见的选择器。换句话说，文档的元素就是最基本的选择器。 body { color: blue; font-size:35px; display: block; } 3.2. 分组选择器 如果多个元素拥有相同的样式，可使用分组选择器，多个元素用逗号分隔。 h2, p { color:gray; } 说明：如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。 3.3. 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。 只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 （1） 普通类选择器 语法：类选择器前面后一个点（.），后面跟选择器的名称。 !DOCTYPE html html head meta charset=UTF-8 titleCSS样式/title style .content{ color: black; } /style /head body div class=content