## 一、概述 ### 1.1 什么是 CSS？ Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。 在 HTML 中，使用标记语言来描述文档的内容而不是它的样式。使用 CSS 来指定它的样式而不是它的内容。 ### 1.2 为什么使用 CSS？ CSS 帮助您将文档信息的内容和如何展现它的细节相分离。众所周知，如何展现文档的细节即为样式（style）。将样式从它的内容分离出来，以便能够： * 避免重复 * 更容易维护 * 为不同的目的，使用不同的样式而内容相同 ## 二、CSS 基本使用 ### 2.1 内联样式 内联 CSS 也可称为行内 CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。 ``` <p style="color: red;">这是我学习 CSS 的第一天</p> ``` ### 2.2 选择器 我们可以通过 CSS 选择器选择你想要的元素，从而向这些元素添加相应的样式。 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明构成。同一个声明中的属性和值组成一个名值对（property-value pairs），名值对用分号分隔。 ``` selector { property: value; property: value; ... } ``` * 标签选择器：我们可以将标签名作为选择器，为所有该标签表示的元素添加样式。示例如下： ``` <style> p { color: red; } </style> <p>这是我学 CSS 的第一天</p> <p>这是我学 CSS 的第二天</p> ``` * 类选择器：通过设置元素的`class`属性，可以为元素指定类名。文档中的多个元素可以拥有同一个类名。可以使用类名作为选择器，为拥有同一类名的元素添加样式。类名选择器使用`.类名`表示。示例如下： ``` <style> .color-red { color: red; } .color-blue { color: blue; } </style> <p class="color-red">这是我学 CSS 的第一天</p> <ul> <li class="color-red">苹果</li> <li class="color-red">香蕉</li> <li class="color-blue">橙子</li> <li class="color-blue">菠萝</li> </ul> ``` * ID 选择器：通过设置元素的`id`属性为该元素指定ID。每个ID在文档中必须是唯一的。可以通过 ID 选择器为某一个元素添加样式。ID 选择器使用`#ID名`表示。示例如下： ``` <style> #hello { color: green; } </style> <p id="hello">这是我学 CSS 的第一天</p> <p>这是我学 CSS 的第二天</p> ``` ### 2.3 层叠和继承 一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。 对于层叠来说，主要的样式来源如下： * 浏览器对HTML定义的默认样式。 * 开发者定义的样式，可以有三种形式： * 定义在外部文件（外链样式）：在实际开发中主要是通过这种形式定义样式。 * 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。 * 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。 嵌套的标签构建了网页元素的层级关系。此时父级元素的样式也会被子类元素继承。如下： ``` <style> p { color: red; text-decoration: underline; } </style> <p>这是我学<strong>CSS</strong>的第一天</p> ``` ## 三、CSS 常用样式 ### 3.1 文本样式 * `color`颜色 ***** * `font-size`文字大小 * `font-weight`文字粗细 * `font-family`字体集 * `font-variant`字体变体 * `font-style`字体样式 ***** * `text-align`文字对齐 * `text-decoration`文字装饰 * `text-indent`文字缩进 * `text-shadow`文字阴影 ***** * `line-height`行高 * `word-spacing`单词间距 * `letter-spacing`字母间距 ### 3.2 颜色 * `关键字`：red、blue、black等 * `rgb坐标值`：rgb(255, 0, 0)、rgb(0, 0, 255)、rgb(0, 0, 0)等 * `十六进制值`：#ff0000、#0000ff、#000000等 ### 3.3 列表 * `list-style-type`列表样式类型 * `list-style-image`列表样式图片 ### 3.4 内容 * 内容文字：CSS可以在元素的前后插入文本：在选择器的后面加上`::before`或者`::after`。在声明中，指定`content`属性，并设置文本内容。 * 内容图片：可以通过将`content`属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。 * 背景图片：将`background`的值设为图片的URL可以将图片设置成元素的背景图。 ## 四、伪类 CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。 伪类不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (`:visited`)， 内容状态(如`:checked`), 鼠标位置 (如`:hover`)。 ``` selector:pseudo-class { property: value; } ``` * `:link`是用来选中元素当中的链接 * `:visited`表示用户已访问过的链接 * `:hover`适用于用户使用指示设备虚指一个元素的情况 * `:active`匹配被用户激活的元素 * `:focus`表示获得焦点的元素 * `:checked`表示任何处于选中状态的元素