当前位置：首页 > news >正文

css部分

news 来源：原创 2025/6/7 6:31:33

前面我们学习了HTML，但是HTML仅仅只是做数据的显示，页面的样式比较简陋，用户体验度不高，所以需要通过CSS来完成对页面的修饰，CSS就是页面的装饰者，给页面化妆，让它更好看。

1 层叠样式表（CSS）

Cascading Style Sheet，简称为css，中文名称层叠样式表或者级联样式表，主要指的是用来装饰HTML页面的一种技术。

css是页面的装饰器，能够将一个简陋难看的页面，装扮的符合大众的审美观。

1.1 css样式的几种写法

在页面开发的时候，一般css有如下几种种写法。

在标签的属性style中编写
在页面中的style标签中编写
在页面外的XX.css文件中编写，使用link标签引入
使用@import导入需要的css文件

1.1.1 行内样式

行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏处是只能渲染一个标签。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>第一个CSS文件</title></head><body><!--通过style属性来设置样式，这个样式是嵌套在标签中,可以称为内嵌样式，内嵌样式仅仅只是对当前标签有效，内嵌标签中的元素会把在style中的样式替换掉--><h2 style="color:#212267;text-decoration:underline;font-size:12px">这是我的第一个CSS文件</h2></body>
</html>

1.1.2 内嵌样式

内嵌样式，又叫做页面样式，是将 CSS 写在网页源文件的头部，即在 head 间，通过使用 HTML 标签中的 style标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>第一个CSS文件</title><style type="text/css">/*h2表示对页面中的所有的h2的标签都有效*/h2 {background: #aa1222;color: #fff;}</style></head><body><h2>这是另一个h2</h2></body>
</html>

1.1.3 外链接式

链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

首先在页面外部创建一个css文档（xxx.css），后缀名必须是css，在使用link标签引入到需要渲染的页面。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>第一个CSS文件</title><!--此时如果在css02中有相应的h2的设置，并且和style中的有冲突会被覆盖--><link rel="stylesheet" href="css02.css" ></head><body><h2>这是另一个h2</h2></body>
</html>

注意：对于样式表而言，后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中，也可以放在body中，一般建议放在head中，以便于浏览器渲染样式，因为样式在加载完成前需要渲染。

1.1.4 @import

css也提供了一种在css文件中到导入其他css文件的功能 -- @import，这样就可以也可以导入css文件。

<style>/* @import 是在css中使用url函数导入其他的css文件，是css本身的能力*/@import url("index.css");
</style>

1.1.5 常见面试题

link和@import的区别

首先，从本质上说，这两种方式都是为了加载css文件，但它们还是存在细微的差别。

1、link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

2、加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。

3、兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

4、使用dom控制样式时的差别：当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

1.2 css的选择器

CSS在渲染HTML页面是，为了得到HTML中的标签进行样式渲染，为我们提供了大量好用的各种选择器，以便于我们在CSS中拿到HTML的标签进行样式设置。

一般我们会根据使用的频繁率和定义的标准，将css的选择器分为如下几种，方便于我们理解和掌握。

1.2.1 基本选择器

基本选择器是使用概率最高，也是最常被使用的选择器，必须要掌握它。基本选择器包括如下选择器：

标签选择器（根据标签名称获取）
ID选择器（获取id为xx的标签）
类选择器（获取标签中class=xxx的标签）

通用选择器（通配符）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/* 不建议使用通配符选择器，建议使用reset.css* {color: red;}*//* 标签选择器 */div {color: aqua;}/* id选择器 */#myprogram {background: yellow;}/* 类选择器题 */.mylove2 {color: red;}</style></head><body><div id="first" class="mylove" >这个是一个div</div><p id="myprogram">这个是段落标签</p><div class="mylove mylove2">这个是一个div</div><h1>这个是标题</h1><hr /><div class="list"><ul><li>这是是一个列表1</li><li>这是是一个列表2</li><li>这是是一个列表3</li><li>这是是一个列表4</li><li>这是是一个列表5</li><li>这是是一个列表6</li><li>这是是一个列表7</li><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></ul><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></div></body>
</html>

运行代码结果如下图

注意：标签选择器就是以标签名称为标准选择对应的标签，id则是#id属性来选中标签，注意：一个页面上id必须是唯一的，所以id选择器只能选择一个标签，类选择器是.class属性选择，class属性的值一个页面上允许出现多次，所以class选择器更加灵活，在开发中一般使用最多，通配符选择器不建议使用（*匹配所有标签）。 id相当于身份证号 class相当于姓名

1.2.2 包含选择器

子代选择器(获取某个标签的第一级子标签)
后代选择器（获取某个标签中的所有的子标签）

分组选择符，也叫做逗号选择器（可以同时设定多个标签，使用逗号进行分割）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/* 子代选择器 */div.list>ul {border: 1px solid red;}/* 后代选择器 */.list li {border: 1px solid red;}/* 逗号选择器 */.mylove, #myprogram, h1 {color: #eee;width: 200px;height: 30px;background: skyblue;}</style></head><body><div id="first" class="mylove" >这个是一个div</div><p id="myprogram">这个是段落标签</p><div class="mylove mylove2">这个是一个div</div><h1>这个是标题</h1><hr /><div class="list"><ul><li>这是是一个列表1</li><li>这是是一个列表2</li><li>这是是一个列表3</li><li>这是是一个列表4</li><li>这是是一个列表5</li><li>这是是一个列表6</li><li>这是是一个列表7</li><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></ul><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></div></body>
</html>

运行结果如图

1.2.3 属性选择器

属性是HTML页面标签重要的部分，所以css也提供专业使用属性来访问标签的选择器。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>属性选择器</title><style>/* 表示选中的标签中存在某个属性 */.container[class] {color: red;}div[title] {color: #00FFFF;}/* 确切的等于*/input[type='text'] {background: red;}/* 属性的值中包含某个值 */input[type*='e'] {background: red;}/* 以什么开始 */input[type^='e'] {background: red;}/* 以什么结尾 */input[type$='rl'] {background: red;}/* +表示下一个标签 */.msg + p{border: 1px solid red;}/* 属性名称等于属性值 */[title="这个是标题"] {color: red;}</style></head><body><div class="container">这个是div容器</div><div title="这个是标题">这是第二个div</div><input type="text" name="" id="" value="刘建宏" /><input type="email" name="" id="" value="liushuaige" /><input type="url" name="" id="" value="刘欧巴" /><hr /><div class="msg">刘建宏是个大帅哥</div><p id="msg2">这个是段落</p></body>
</html>

运行结果如图：

可以看出，属性选择器还是比较好用的。

1.2.3 伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

所以早期主要用来渲染a标签的不同状态，现在随着页面的需求，各种标签都开始支持伪类选择器了。

常见的状态主要用如下五种：

:link 超链接点击之前
:visited 链接被访问过之后

:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

如a标签可以表示不同的状态下的字体颜色

 /*让超链接点击之前是红色*/
a:link{color:red;
}
/*让超链接点击之后是橙色*/
a:visited{color:orange;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{color:green;
}
/*鼠标点击链接，但是不松手的时候*/
a:active{color:black;
}

注意：，在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

css陆续提供了大量的伪类选择器供大家使用，如表所示，需要大家掌握其中常用的几个。

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2\|2n-1\|odd\|even)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
::first-letter	p::first-letter	选择每个p 元素的第一个字母
::first-line	p::first-line	选择每个p元素的第一行
::first-child	p::first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
::before	p::before	在每个p元素之前插入内容
:after	p::after	在每个p元素之后插入内容
::section	p::section	被鼠标选中后的样式
:lang(language)	p:lang(it)	为p元素的lang属性选择一个开始值

1.2.4 伪元素选择器

表是css2和css3提供的伪类选择器，在css3中，css还提供了伪元素选择器，也就是这个选择器可以构建一个伪元素，也就是无法提供js等技术访问的的元素，但是确实在页面中存在的，只能使用css渲染的，这样的元素是的css的功能进一步的加强了，这两个元素就是before和after，但是css2已经定义过了这两个选择器，表示之前和之后的选择器，所以就存在这样的写法：

// CSS3将first-line、first-letter、before、after、section专门归类为伪元素
::before    表示css3的伪元素选择器
::after     标签css3的伪元素选择器
::first-letter
::first-line
::section

注意，before和after选择器必须书写content属性。

p::before {display: inline-block;content: "s";width: 10px;height: 10px;background: red;border: 1px solid red;border-radius: 50%;
}
p::after
{content:" -- liu";
}

代码运行结果如图：