第一章：CSS样式及基本选择器-CSDN博客

CSS即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

简单说，HTML给了网页框架，而CSS就给了网页皮肤，而JavaScript让网页动了起来。

二、CSS的位置

CSS可以写在三个位置，分别是行内样式，内部样式和外部样式。

1.行内样式

行内样式是通过HTML标签的style属性来写的。

例如：

<h1 style="color: red;font-size: 100px;">CSDN@卿言卿语</h1>

这样就可以显示字体颜色为红色，字体大小为100像素的文字了，效果：

2.内部样式

内部样式通过style标签来实现，要写在head标签内部，例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        h1 {
            color: green;
            font-size: 20px;
        }

        h2 {
            color: red;
            font-size: 60px;
        }

        img {
            width: 800px;
        }
    </style>
</head>

<body>
    <h1>CSDN@卿言卿语</h1>
    <h2>全栈工程师的学习履历</h2>
    <img src="../../HTML/C语言专栏标签.jpg" alt="C语言标签页">
</body>

</html>

在style标签里，通过选择器来选出要添加样式的部分。

3.外部样式

外部样式在独立于此HTML文件的另外一个CSS文件，要通过link引入才会生效。

例如： <link rel="stylesheet" href="./external.css">，href的值写CSS文件的地址。

<link rel="stylesheet" href="./external.css">

4.CSS语法

（1）行内样式写在style属性内部，内部样式写在style标签内部，外部样式不需要style，直接写即可。

（2）必须先写选择器，在选择器内部写样式。

（3）样式由键值对组成，先指出样式的名字，然后写样式的值，样式之间用分号间隔，例如：color：red；

三、样式表的优先级

上面三种样式表要是在内容上产生了冲突的样式，会怎么抉择呢？这就取决于样式表的优先级了，优先级顺序：行内样式>内部样式=外部样式。

行内样式的优先级最高，但是实际应用中很少使用行内样式，因为这样结构没有与样式进行分离，代码混乱，而且样式不能复用，每个标签都要写一遍。

内部样式和外部样式优先级是一样的，两个发生冲突时，后面的样式会覆盖前面的样式，但内部样式并没有真正意义上的实现结构与样式的分离，并且样式只作用于该页面，不能复用。使用频率最高的是外部样式，哪个页面要使用，直接引入即可。

综上，样式表的优先级可以总结为就近原则，从上往下，后面覆盖前面，毕竟行内样式离标签最近，所以优先级最高，但是使用频率最高的还是外部样式。

四、基本选择器

1.什么是选择器

我们要给元素（标签）添加样式，肯定要先把这个元素选出来才能添加，这个就叫选择器，用来选出特定的元素（标签）。

2.通配选择器

通配选择器可以选出页面中所有的元素，使用 * 表示，使用方法：

<style>
        *{
            color: green;
        }
    </style>

3.元素选择器

元素选择器可以选出指定的元素（标签），直接使用标签名即可，使用方法：

    <style>
        p{
            color: chocolate;
        }
    </style>

4. 类选择器

类选择器可选出带有特定的类名元素，即通过class属性添加的类名，使用时语法为“.类名”，示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /* 女生说的话为红色 */
        .female{
            color: red;
        }
        /* 男生说的话为绿色 */
        .male{
            color: green;
        }
        /* 男生第一句话大小为100像素 */
        .big{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h2 class="male big">I love you</h1>
    <br>
    <h2 class="male">Do you love  me?</h2>
    <p class="female">Stupid Joke!</p>
    <p class="male">wuwuwu</p>   
</body>
</html>

5.id选择器

id选择器是通过标签（元素）的id来确定的，使用时在id前面加上#即可，使用方法：

    <style>
        #glass{
            color: green;
        }
        #blood{
            color: red;
        }
    </style>

五、总结

本章节介绍了CSS的样式种类，优先级以及四个基本选择器，但仅凭四个基本选择器还不够用，下一章将介绍CSS的复合选择器以及选择器的优先级。