CSS(Cascading Style Sheets)即“层叠样式表”，它是一种用于设计网站样式并增强网站呈现效果的样式表语言。

CSS 与 HTML 和 JavaScript 并列为网页的三大主要组成部分。HTML 为网页添加了结构，CSS 用作描述文档的呈现方式，而 Javascript 定义了网页的展示逻辑。

三种使用 CSS 的方法

在 HTML 文档中，有三种方法使用 CSS：

  1. 内联(Inline) CSS

    内联 CSS 使用style属性直接应用于 HTML 元素，它具有最高的优先级，适用于小型文档。

     <p style="color: blue; font-size: 16px;">
   This line is an inline-styled paragraph.
 </p>

  2. 内部(Internal) CSS

    内部 CSS 定义在<head>头中的<style>标签中。

     <head>
   <style>
     p { color: blue; font-size: 16px; }
   </style>
 </head>
 <body>
   <p>This line is styled using internal CSS.</p>
 </body>

  3. 外部 CSS

    外部 CSS 编写在单独的.css文件中，并使用<link>标记链接到 HTML 文档。这是大型项目的推荐方法，因为它提高了可维护性。

     <!-- HTML file -->
 <head>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <p>This line is styled using external CSS.</p>
 </body>
     /* styles.css */
 p { color: blue; font-size: 16px; }

CSS 语法

CSS 样式由一系列规则集(rule-set)组成，这些规则由 Web 浏览器解析，然后应用于 HTML 文档相应的元素上。CSS 样式规则由三个部分组成，分别是选择器、属性和值：

  • 选择器(Selector)：由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式；
  • 属性(Property)：希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color、border、font等，CSS 中提供了众多属性；
  • 值(Value)：由数值、单位或者关键字组成，用来控制某个属性的显示效果。

例如：

selector

“属性”和“值”之间需要使用:进行分隔，每个“属性”和“值”的组合可以看作一个“声明”，每个“声明”的末尾都需要使用;作为结尾，属于同一个选择器的“声明”需要使用{ }包裹起来。

选择器

选择器由 HTML 元素的id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将 Selecter 看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。

基本选择器

  1. 通用选择器

    通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距。例如：

     * {
   margin: 0 auto;
   padding: 0;
 }

注意！虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素，但并不建议在生产环境中过于频繁地使用通用选择器，频繁的使用会给浏览器带来太多不必要的压力。

  1. 标签选择器

    一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签。例如：

     p {
   color: blue;
 }

    p选择器能够匹配文档中所有的<p>标签。

  2. 类选择器

    类选择器可以根据标签的class属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到.，后面紧跟class属性的值。例如：

     .black {
     color: black;
 }

    .black选择器能够匹配文档中所有具有class="black"属性的标签。但是由于class属性不是唯一的，可以应用于不同的标签，因此还可以在定义类选择器时指定具体的标签：

     p.black {
     color: black;
 }

    p.black选择器仅会将其中的样式应用到所有具有class="black"属性的<p>标签中，对于其它的具有class="black"属性的标签则没有影响。

    另外，一个 HTML 标签中class属性可能不止一个，例如：

     <p class="info selected"></p>
 <p class="info"></p>

    假如我们要为所有class属性包含info的元素设置粗体，为所有class属性包含selected的元素设置红色字体，为class属性中既包含info又包含selected的元素设置蓝色背景，则可以写成下面这样：

     .info {
   font-weight:bold;
 }
 .selected {
   color: red;
 }
 .info.selected {
   background: blue;
 }

    这种由多个class属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个class属性值定义的类选择器可以称为“单类选择器”。

多类选择器中，多个class属性之间是紧挨着的(例如.info.selected)，不需要使用空格分开。

  1. ID 选择器

    ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要#，后面紧跟 ID 属性的值。例如：

     #nav {
   color: red;
 }

    #nav选择器能够匹配文档中具有id="nav"属性的标签。

属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息。例如：

input[type="text"] {
color: blue;
}

input[type="text"]选择器会匹配所有具有type="text"属性的<input>标签。属性选择器中[ ]内的属性信息还支持以下几种写法：

  • [target]：选择所有带有target属性元素；
  • [target="_blank"]：选择所有具有target="_blank"属性的元素；
  • [title~="flower"]：选择title属性包含有 flower(以空格分割单词) 的所有元素；
  • [title*="flower"]：选择title属性包含 flower 的所有元素；
  • [lang|="en"]：选择lang属性是 en 或以 en- 为开头的所有元素；
  • [href^="https"]：选择href属性以 https 开头的元素；
  • [src$=".pdf"]：选择src属性以 .pdf 结尾的元素。

组合选择器

  1. 后代选择器 当一个<p>标签嵌套在一个<div>标签内部的时候，就可以将这个<p>标签看作是<div>标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将tag名、class属性或id属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开。例如：

     ul li a {
   text-decoration: none;
 }

    ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签。

  2. 子选择器

    子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代(元素与其子元素之间只有一层嵌套关系)，子选择器由两个或多个选择器组成，选择器之间用大>分隔开。

     p > strong {
   color: red;
 }

    p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色，但对第二个<p>标签中的<strong>标签则没有影响。

  3. 相邻兄弟选择器

    相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到+，+两边为相邻的两个元素，选择器会匹配+后面的元素。例如：

     h1 + p {
   color: blue;
   font-size: 18px;
 }

 ul.task + p {
   color: #f0f;
   text-indent: 30px;
 }

    h1 + p选择器会匹配同一父级元素下紧邻<h1>标签并在其后的<p>标签。ul.task + p选择器则会匹配同一父级元素下紧邻<ul>标签并在其后的<p>标签，但<ul>要具有class="task"属性。

  4. 通用兄弟选择器

    通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到~，~两边为同一父级元素下的两个元素，选择器会匹配~后面的元素。例如：

     h1 ∼ p {
   color: blue;
   font-size: 18px;
 }

    h1 ∼ p选择器会匹配同一父级元素下<h1>标签之后的所有<p>标签。

伪类选择器

伪类选择器用于选择元素的特定状态或位置，以:开头。例如：

  • :hover：表示选择鼠标悬停位置的元素；
  • :active：表示选择某些元素被激活(如点击时)的元素；
  • :focus：表示选择某些元素获得焦点(如输入框被选中)的元素；
  • :first-child：表示选择父元素的第一个子元素；
  • :last-child：表示选择父元素的最后一个子元素；
  • :nth-child(n)：表示选择同类型元素中的第 n 个子元素；
  • :not(selector)：表示排除某选择器；
  • :empty：表示选择没有子元素的元素。

伪标签选择器

伪元素选择器用于选择元素的特定部分，以::开头。例如：

  • ::before：在元素内容前插入内容；
  • ::after：在元素内容后插入内容；
  • ::first-line：表示选择元素的第一行文本；
  • ::first-letter：表示选择元素的首字母。
  • ::selection：表示选择用户高亮的文本部分；
  • ::marker：表示选择列表项的标记(如项目符号或编号)。

分组选择器

用逗号分隔，匹配多个的选择器。例如：

h1, h2, h3 {
  font-family: Arial;
}