HTML、CSS和JavaScript入门（2）——CSS基础

前一篇笔记介绍了HTML的基础，这一篇主要记录下CSS的基础知识。

1. CSS的引入方式

1.1 内联样式

直接用style写进HTML元素，仅对当前的HTML元素有效：

<body>
    <h1>未引入CSS的h1标签</h1>
    <h1 style="color:brown">内联样式引入CSS的h1标签</h1>
</body>

可以看到在用内联样式引入的css只在当前html元素生效，并不会影响其他的元素。

1.2 内部样式表

在<head>区域中用<style>标签写入css规则，对所有标签都生效：

<head>
    <style>
        h1 {
            color: darkslateblue;
        }
    </style>
    
</head>
<body>
    <h1>这是第一个h1标签</h1>
    <h1>这是第二个h1标签</h1>
</body>

1.3 外部样式表

顾名思义时从外部css文件引入，需要在<head>区域中引入link:css。首先我们创建一个style.css文件，并写入以下内容：

1
2
3

h1 {
    color: darkkhaki;
}

回到html文件，在<head>区域内输入link，在提示的第三行出现link:css，选中回车就自动引入了我们创建的css文件：

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>这是第一个h1标签</h1>
    <h1>这是第二个h1标签</h1>
</body>

还有种外部样式表引用方式，是在<head>标签的<style>区域内用@import的方式引入：

<head>
    <style>
        <!-- 注意有分号，css提供的方式 -->
        @import url("style.css");
    </style>
</head>

<body>
    <h1>这是第一个h1标签</h1>
    <h1>这是第二个h1标签</h1>
</body>

最终的效果和上面是一样的，就不放图片了。需要注意，使用@import方式引入有一些限制，它会在HTML解析完毕以后再加载CSS文件，就可能导致页面渲染的延迟，并且引入的CSS文件不能并行加载，可能会影响网页的性能。

所以一般都是用<link>标签的方式引入CSS文件，提高性能的同时也有更好的兼容性。

2. CSS引入的优先级

上面说了三种引入CSS的方式，如果一个标签被不同方法/顺序引入的CSS文件修饰，最终会表现出哪种样式呢？这就要说到样式的优先级。

浏览器会为HTML元素提供默认的样式，如果没有其他的样式覆盖，默认样式将会应用于这些元素（可以在网页按F12，元素，body中看到用户代理样式表，也就是浏览器自身定义的样式）。

样式的优先级有如下基本规则：

1. !important优先级最高，会覆盖CSS中任何其他声明，不推荐使用，因为它改变了你样式表的级联规则，难以调试。
1. 内联样式优先级高于内部样式表和外部样式表中的样式定义。
1. 相同的规则按照加载顺序，写在后面的声明会覆盖前面的。
1. 继承的样式优先级低于直接指定的样式。

什么是继承的样式？继承样式是指某个元素会继承其父元素的某些样式属性，即子元素会继承父元素的样式。

<head>
	<style>
        body {
            font-family: Arial;
            color: burlywood;
        }
    
        h1 {
            font-size: 24px;
            color: blue;
        }
    </style>
</head>

<body>
	<h1>这是标题</h1>
	<p>这是一个段落。</p>
</body>

上面的例子中，我们定义了<body>标签的font-family和color属性，子元素<h1>和<p>都继承了父元素的这两个属性，但同时我们又指定了<h1>标签的font-size和color属性。所以直接指定的<h1>除了继承了父标签的属性外，color属性的优先级高于继承的，为蓝色。

继承样式并不是所有样式属性都会继承的，只有一部分样式属性具有继承性。常见的继承样式属性包括 font-family、color、font-size、font-weight、text-align 等。但是像 width、height、margin、padding、background-color 等属性就不具有继承性。

3. 类和选择器

为了保持代码的可维护性和可读性，尽量避免用!important声明样式，也尽量避免滥用内联样式，一般情况下是将样式定义在外部样式表中，使用类和选择器来管理样式。这样可以更好地组织和维护样式，并提高代码的重用性。

为了方便演示，以下都用内部样式表的方式引入CSS样式。

3.1 类（class）

类是一种CSS的标记，用于标识一组具有相同样式的元素。通过为HTML元素添加class属性，并在CSS中定义对应的样式规则，可以将样式应用于多个元素。类名以.开头。

<head>
    <style>
        .highlight {
        	background-color: yellow;
        	font-weight: bold;
        }
    </style>
</head>

<body>
    <p class="highlight">这是一个带有highlight类的段落。</p>
    <p>这是一个普通的段落。</p>
</body>

3.2 选择器（Selector）

选择器用于选择HTML中要应用样式的元素。可以根据元素的标签名、类、ID、属性等进行选择。

元素选择器（Element Selector）：根据元素的标签名选择元素。例如，p选择器选择所有的<p>段落元素。
类选择器（Class Selector）：根据类名选择元素。例如，.highlight选择器选择所有具有highlight类的元素。
ID选择器（ID Selector）：根据元素的唯一ID选择元素。例如，#header选择器选择具有header ID的元素。
属性选择器（Attribute Selector）：根据元素的属性选择元素。例如，[type="text"]选择器选择所有type属性为”text”的元素。
通用选择器（Universal Selector）：所有元素都会被选中。

不同选择器之间也是有优先级的，ID选择器 > 类选择器 > 元素选择器。

<head>
    <style>
        /* 元素选择器 */
        p {
            color: blue;
        }
        
      	/* 类选择器 */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        
      	/* ID选择器 */
        #header {
            font-size: 20px;
        }
        
      	/* 属性选择器 */
        input[type="text"] {
            border: 1px solid gray;
        }
        
        /* 通用选择器 */
        * {
            font-family: 'Times New Roman', Times, serif;
        }
      </style>
</head>

<body>
    <p>这是一个普通的段落。</p>
    <p class="highlight">这是一个带有highlight类的段落。</p>
    <p id="header">这是一个带有header ID的段落。</p>
    <input type="text" placeholder="文本输入框">
</body>

还有些比较特殊的选择器，简单介绍两个：

<head>
    <style>
        /* 两个元素之间是空格，表示前面的父类，后面的是所有该标签的子类 */
        div p {
            color: brown;
        }
        
        /* 两个元素之间是逗号，表示同时选中 */
        h1,h2 {
            color: aqua;
        }   
      </style>
</head>

<body>
    <p>这是一个普通的段落</p>
    <div>
        <p>这是在div父元素下的段落</p>
    </div>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
</body>

空格是取所有的后代元素，如果只想要一级的子元素，可以用符号>。

4. 伪类和伪元素

4.1 伪类（Pseudo-class）

伪类用于选择处于特定状态的元素，例如鼠标悬停、被点击、是第一个子元素等。伪类以冒号:开头，紧跟在选择器后面。

<head>
    <style>
        /* 选择所有的链接元素 */
        a {
        color: blue;
        }

        /* 选择鼠标悬停在链接上的元素 */
        a:hover {
        color: red;
        }

        /* 选择div的第一个p子元素 */
        div > p:first-child {
        font-weight: bold;
        }
 
      </style>
</head>

<body>
    <p>
        <a href="https://www.shelven.com">这是一个普通的链接</a>
    </p>
    <div>
        <p>这是在div父元素下的第一个段落</p>
        <p>这是在div父元素下的第二个段落</p>
    </div>
</body>

在上面的例子中，:hover是一个伪类选择器，用于选择鼠标悬停在链接上的元素，并应用红色字体颜色。:first-child也是一个伪类选择器，用于选择第一个子元素，并应用粗体字体样式（不指定的话就是任意一个元素的子元素）。

上边是正常显示的页面，下边是鼠标悬停在链接上的效果：

4.2 伪元素（Pseudo-element）

伪元素用于在元素的特定位置插入内容或样式，例如在元素的前后插入额外的内容、选择元素的第一个字母等。伪元素以双冒号::开头，紧跟在选择器后面。

<head>
    <style>
        /* 在段落前插入内容 */
        p::before {
        	content: "前置内容";
        	font-weight: bold;
        }

        /* 选择第一个字母 */
        p::first-letter {
        	font-size: 2em;
        	color: red;
        }

        /* 在段落后插入内容 */
        p::after {
            content: "后置内容";
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p>
        这是一段普通的段落内容
    </p>
</body>

在上面例子里，::before是一个伪元素选择器，用于在每个段落前插入额外的内容，并应用粗体字体样式。::first-letter也是一个伪元素选择器，用于选择每个段落的第一个字母，并应用2倍字体大小和红色字体颜色。

5. 盒子模型

CSS中的盒子模型（Box Model）是用于描述元素在页面中占用空间的一种模型。它将每个元素看作是一个矩形的盒子，由四个部分组成：内容区域（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。

1.内容区域（Content）：
内容区域指的是元素内部实际显示内容的区域，包括文本、图片或其他子元素。它的大小由元素的宽度（width）和高度（height）属性决定。
2.内边距（Padding）：
内边距是元素内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。可以使用padding属性设置内边距的大小。
3.边框（Border）：
边框是围绕元素内容和内边距的线条或样式，用于分隔元素与其他元素的区域。可以使用border属性设置边框的样式、宽度和颜色。
4.外边距（Margin）：
外边距是元素与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。可以使用margin属性设置外边距的大小。

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 3px solid black;
            padding: 10px 9px 8px 7px;
            margin: 5px 5px 5px 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        这是一个普通的box模型
    </div>
</body>