CSS样式应用与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/tianmaxingkong_/article/details/70184535

CSS样式的引用方式主要有三种：

｜－内联方式

｜－嵌入式

｜－外部方式

1.内联方式

内联方式是最基础的CSS代码引用方式，直接将CSS样式代码嵌入到HTML代码中，是最不好维护的一种方式。类似于：

<body>
<div style="color:green;font-size: 20px;">这是通过内联方式引用CSS代码</div>
</body>
</html>

2.嵌入式

一般的我们会将CSS代码写在HTML文件的<head>标签里面，至少是写在<body>标签的最开头，这是因为在浏览器请求网页数据的时候可能会一部分一部分的发送/获取，首先得到CSS样式代码不至于在网速太慢的情况下使网页显示出现错乱的情况，而Javascript的代码一般放置在<body>标签的最后面。

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style type="text/css">
    div{color:red;font-size: 20px}
</style>
</head>
<body>
<div>这是通过嵌入方式引用CSS代码</div>
</body>

从上面的代码中可以看到，我们不是把CSS代码直接嵌入到HTML中，而是将CSS代码写在<head>标签中，通过属性选择器来引用对应的样式代码。

3.外部引用CSS样式代码

为了维护方便，有时会将CSS代码写在一个.css的文件中，在HTML文件的<head>中引入。

index.css文件如下:

#id_div{color:red;font-size: 20px}

在index.html文件的<head>中进行CSS样式文件引入：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="id_div">这是通过外部引用方式引用CSS代码</div>
</body>

［注意］

三种CSS代码引用方式中，若CSS样式有重复，那么CSS样式绘制的优先级为：

内联方式 > 嵌入方式 > 外部引用方式

CSS样式选择器

对于CSS嵌入引用方式和外部引用方式，一般都要用样式选择器来引入到对应的HTML代码中，CSS的样式选择器主要有以下几种：

标签选择器、类选择器、ID选择器、通用选择器、子选择器、包含选择器、伪类选择器、组合选择符号。

（1）标签选择器：使用HTML标签标注选择器的名称

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    div{color: red; font-size: 20px}
</style>
</head>
<body>
<div>标签选择器 一</div>
<div>标签选择器 二</div>
</body>

上面的代码中，我们在<head>标签中使用div声明了一组CSS样式，系统就会将<body>中所有<div>标签的CSS样式都改为这一组样式，而无需我们引入：

（2）类选择器

HTML的标签可以通过class来设置类名称，多个HTML可以有相同的class，类选择器的命名方式类似于：

.类选择器名次{CSS样式代码}

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    .div_class{color: red; font-size: 20px}
</style>
</head>
<body>
<div class="div_class">标签选择器 一</div>
<div>标签选择器 二</div>
</body>

<body>中有两个<div>，其中一个设置了class，效果：

（3）ID选择器

HTML的每一个标签可以设置唯一的ID，与类不一样，标签的ID相互之间不能相同，ID选择器命名方式为：

#ID选择其名称{CSS样式代码}

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    #div_ID{color: green; font-size: 20px}
</style>
</head>
<body>
<div id="div_ID">标签选择器 一</div>
<div>标签选择器 二</div>
</body>

ID选择器只会改变设置了该ID的HTML标签的CSS样式：

（4）子选择器

子选择器是用来定位父元素的某些子元素，由两部分组成，前半部分是表明父元素，后半部分表明子元素，两个元素之间使用>进行连接，父元素和子元素表明可以使用标签选择器、类选择器或者ID选择器。

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    #div_ID>p{color: red;font-size: 30px}

    div>.class_span{color:green;font-size: 20px}
</style>
</head>
<body>
<div id="div_ID">
    <p>子选择器 一</p>
</div>
<div>
    <span class="class_span">子选择器 二</span>
</div>
<div>子选择器使用 > 进行连接</div>
</body>

上面的代码中有两个CSS样式引入的地方，#div_ID>p将会定位到id="div_ID"的标签下的<p>标签；div>.class_span会定位到所有一代子标签有class="class_span"的标签：

（5）包含选择器

包含选择器和子选择器很像，包含选择器是为了定位父元素下的某些元素，但是是使用空格连接两个定位标签：

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    #div_ID p{color: blue;font-size: 30px}
    .div_class>p{color: greenyellow; font-size: 20px}
</style>
</head>
<body>
<div id="div_ID">
    <div>
        <p>包含选择器 一</p>
    </div>

    <p>包含选择器 二</p>
</div>
<div>包含选择器使用 空格 进行连接</div>

<div class="div_class">
    <div>
        <p>子选择器 一</p>
    </div>

    <p>子选择器 二</p>
</div>
<div>子选择器使用 > 进行连接</div>
</body>

上面的代码中同时使用了包含选择器和子选择器，id="div_ID"为<dic>使用了包含选择器，class="div_class"的<div>标签使用了子选择器：

［注意］

从上面的效果可以看出，子选择器和包含选择器都是通过组合的模式来定位元素，不同的是，子选择器只能定位到第一代子元素，而包含选择器可以定位到父元素下面所有满足条件的元素。

（6）通用选择器

通用选择器使用＊号来声明，通用选择器作用的范围是当前HTML文件中所有的标签元素。

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    * {color: olivedrab; font-size: 20px}
    #id_p{color: red; font-size: 30px}
    .class_div{color: green}
    span{color: blue}
</style>
</head>
<body>
<p id="id_p">通用选择器 一</p>
<span>通用选择器 二</span>
<div class="class_div">通用选择器 三</div>
<span>通用选择器 四</span>
<div>通用选择器使用 * 声明</div>
</body>

效果如下：

可以看到，<body>中没有单独设置选择其的元素都会被通用选择器作用，改变样式，这是因为通用选择器的优先级是最低的。
［注意］
相同的元素上若有多个选择器定位，那么就取决于各个选择器的权值，一般的：
｜－通用选择器的权值： 0.1
｜－标签选择器的权值： 1
｜－类选择器的权值： 10
｜－ID选择器的权值： 100
系统会选择权值最高的选择器进行CSS渲染，对于子选择器和包含选择器的权值等于连接符两边的两种选择器的权值值和。

（7）伪类选择器
伪类选择器的兼容性不是很好，最常用的场景就是鼠标在元素上滑过的效果。

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    a:hover{color:red; font-size: 30px}
</style>
</head>
<body>
<a href="#">鼠标滑过的效果</a>
</body>

（8）分组选择符
有时候几个不同的选择器可能会有相同的CSS代码的部分，那么就可以使用分组选择符的方式同时完成CSS代码添加：

<head lang="en">
    <meta charset="UTF-8">
<style type="text/css">
    div,.class_span,#id_p{color: red;font-size: 20px}
</style>
</head>
<body>
<div>组合选择符号 一</div>
<span class="class_span">组合选择符号 二</span>
<p id="id_p">组合选择符号 三</p>
</body>

效果：

文字排版

font-family

font-size 字号

color 字体颜色

font-weight：bold 粗体

italic 斜体

text-decoration:underline 下划线

text-decoration:line-through 删除线

text-indent:2em 中文段落缩进

line-height 行间距

letter-spacing 字间距/字母间距

【说明】

1.em单位，em为本元素font-size的数值，当font-size=14px，那么1em=14px;

2.字体的百分比：

div{
font-size:20px;
line-height:200%;
}

上面代码表示行间距为font-size的200%。

3.行间距

line-height减去font-size之后，将差值平分就是字体距当前元素顶部/底部的距离。

CSS基础知识一