3.1 什么是 CSS

CSS：全称 Cascading Style Sheets，层叠样式表。它是一种用于描述 HTML 或 XML 文档的表现形式的语言，常用于设置网页的布局、颜色、字体以及其他视觉和排版效果，能够做到页面的样式和结构分离

我们上面使用到的字体大小设计其实就是 CSS 的功劳，除此之外，CSS 还能改变文字的颜色

    <h1 style="color: red;">一级标题</h1>

---

3.2 基本语法

选择器 + { 属性: 属性值 }

• 选择器：指定要样式化的 html 元素
• 属性：定义要改变的样式特性，可以控制元素的外观和布局
• 属性值：指定属性的具体设置
• 属性和属性值是键值对，用冒号:分开，键值对之间用分号;

    <style>
        p {
            /* 设置颜色 */
            color: red;
        }
    </style>

    <p>hello</p>

CSS 样式通常写 style 标签中，而 style 标签可以放在页面的任何位置，我们习惯放在 head 标签里面

---

3.3 引入方式

CSS 有三种引入方式（当出现多种样式时，遵行就近原则）

引入方式	说明	示例
行内样式	直接在本标签中使用 style 属性，属性值是 css 的键值对	<h1 style=“color: red;”>一级标题</h1>
内部样式	使用 style 标签，在标签内部定义 css 样式	<style> h1 {……} <style>
外部样式	使用 link 标签，通过 href 属性引入外部 css 文件	<link rel=“stylesheet” href=“haha.css”>

三种引入方式的优缺点：

行内样式：

• 优点是简单直接，方便解决样式冲突问题
• 缺点是会出现大量的代码冗余，无法复用，也不适合后期维护

内部样式：

• 优点是可以在整个文档中复用样式规则
• 缺点是仅限于当前文档使用，不适合多个页面共享样式

外部样式：

• 优点是实现了 html 和 CSS 的完全分离，多个 html 文档可以共享同一个 CSS 文件，更新样式十分方便，适合企业的大型网站和应用
• 缺点有加载时间长，缓存问题等

---

3.4 CSS 选择器

选择器是用来选择页面上的元素，选中了元素后才可以精准地设置元素的属性

一些常用的 CSS 选择器：（我们这里使用内部样式做演示）

1. 标签选择器：

       <style>
           /* 将所有的 a 标签全部设置成红色 */
           a {
               color: red;
           }
   
           /* 将所有的 div 标签全部设置成绿色 */
           div {
               color: green;
           }
       </style>
   

2. 类选择器：使用点号.

       <!-- 类名为 red，前面要加 “.” -->
   	<style>
           .red {
               color: red;
           }
       </style>
   
   	<p class="red">一个段落</p>
   

   • 类相当于一个标记，每一个标签都可以设置类属性
   • 一个类可以给多个标签使用，一个标签也可以设置多个类（类之间要用空格分割）

3. id 选择器：使用井号#

       <!-- id 为 green，前面要加 “#” -->
       <style>
           #green {
               color: green;
           }
       </style>
   
       <p id="green">一个段落</p>
   

   • id 是唯一的，不能被多个标签使用（和类选择器的不同点）

4. 通配符选择器：使用星号*

       <!-- 该页面所有的元素都会生效 -->    
   	<style>
           * {
               color: red;
           }
       </style>
   

5. 伪类选择器：伪类由冒号:后跟着伪类名称组成，根据不同状态显示不同的样式，常用于标签

   有四种状态：

   • link：未访问的链接
   • visited：已访问的链接
   • hover：当鼠标悬停在元素上时应用样式
   • active：当元素被激活（比如被点击）时应用样式

   使用这些伪类选择器时，通常需要按照特定的顺序来声明，这里的使用顺序为 :link，:visited，:hover，:active

       <style>    
           /* 未访问的链接 */
           a:link {
               color: blue;
           }
   
           /* 已访问的链接 */
           a:visited {
               color: purple;
           }
   
           /* 鼠标悬停时的链接 */
           a:hover {
               color: red;
           }
   
           /* 鼠标点击时的链接 */
           a:active {
               color: green;
           }
       </style>
   

6. 复合选择器：上面几种选择器都可以任意组合，数量不限，组合方式也不限

   • 选择器用空格间隔，表示选择某元素后代的所有元素

       <style>
           tr td {
               color: red;
           }
       </style>
   

   • 选择器用小于号>分隔，表示只选择某元素的相邻后代的元素

       <!-- 不是相邻后代，因此不生效 -->    
   	<style>
           table>td {
               color: red;
           }
       </style>
   

   • 选择器用逗号,分隔，表示取选择器的并集，即所有选择器都生效

       <!-- a 标签和类为 red 的标签都生效 -->
       <style>
           a,.red {
               color: red;
           }
       </style>
   

   • 选择器之间没有间隔，表示取选择器的交集，即满足所有选择器才会生效

   	<!-- 既是 a 标签，类又为 red 的标签才生效 -->
   	<style>
           a.red {
               color: red;
           }
       </style>
   

---

3.5 CSS 常见样式

设置一个标签，接下来的所有样式都为 id 选择器（此处的演示省略了 style 标签）

    <div id="demo">我是 div 盒子</div>

---

1）color

设置字体颜色

        #demo {
            color: red;
        }

• 可以使用英文字母，可以使用 rgb 的颜色（255,0,0），还是可以使用十六进制表示（#ff00ff）

---

2）font-size

设置字体大小

        #demo {
            font-size: 30px;
        }

• 字体大小有很多单位，有 px，cm，mm，em，rem 等等，有需要的可以自行查阅

---

3）border

设置边框，border 又是一个复合属性，可以设置很多边框样式

       /* 边框样式，边框粗细，边框颜色 */ 
        #demo {
            border: solid 1px red;
        }

我们也可以拆开来一个一个设置

border-width：设置边框粗细

border-style：设置边框样式。点状 dotted，实线 solid，双实线 double，虚线 dashed

border-color：设置边框颜色

       /* 等同于上面的例子 */ 
       #demo {
           border-style: solid;
           border-width: 1px;
           border-color: red;
       }

---

4）width / height

width：设置宽度 height：设置高度

只有块级元素才能设置宽度和高度

块级元素独占一行，与之对应的行内元素不独占一行

常见的块级元素：h1-h6，div等

常见的行内元素：a，span等

我们也可以使用 display: block 改为块级元素（常用）；display: inline 改为行内元素（不常用）

        #demo {
            width: 10px;
            height: 10px;
        }

---

5）padding / margin

padding：内边距，设置内容和边框之间的距离

margin：外边距，设置元素和元素之间的距离

都是一整圈生效的，单位为 px

它们都是可以单独设置四个边的边框

方向	padding	margin
顶部	padding-top	margin-top
底部	padding-bottom	margin-bottom
左边	padding-left	margin-left
右边	padding-right	margin-right

---