本文详细介绍了CSS的基础语法、选择器、组合、继承、权重及单位使用，涵盖了元素选择器、ID选择器、类选择器、伪类和伪元素，还有样式的复用和冲突解决。从内联样式到外部样式表的实践，以及关键概念如优先级和单位选择，助你掌握前端CSS核心技术。
前端三剑客_CSS
1、CSS简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
/* 这个样式将会应用到页面中所有的p标签中的内容。 */
p{
color: yellow;
font-size: 50px;
}
</style> -->
</head>
<body>
<!--
网页分成三部分：
结构（HTML）；
表现（CSS）；
行为（JavaScript）；
CSS：
样式层叠表；
网页实际上是一个多层的结构，通过CSS考验分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层。
总之一句话：CSS用来设置网页的最上边一层。
-->
<!--
使用CSS来修改元素的样式。
第一种方式（内联样式也叫行内样式）：
在标签内部通过style属性来设置元素的样式。
缺点：
1）使用内联样式只能对一个标签生效，如果希望影响到多个元素必须在每个元素中中都复制一遍。
2）当样式改变时，我们必须要一个一个的修改，非常的不方便。
注意：在开发的时候绝对不要使用内联样式。
-->
<!-- <p style="color: red; font-size: 20px;">少小离家老大回，乡音无改鬓毛衰</p> -->
<!--
第二种方式（内部样式表）：
将样式编写到head中的style标签里面，然后通过CSS的选择器来选中元素并为其设置各种样式，
可以同时为多个标签设置样式，并且修改时只需要修改移除即可全部应用。
内部样式表更加方便对样式进行复用。
缺点：
我们的内部样式表只能对一个网页器作用，它里边的样式不能跨页面进行复用。
-->
<!--
第三种方式（外部样式表）（开发时推荐使用）：
- 可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。
语法：
<link rel="stylesheet" href="./style.css"> 注意：href是文件路径。
- 外部样式表心意通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用。
使样式可以在不同的页面之间进行复用。
- 将样式编写到外部CSS文件汇总，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
-->
<link rel="stylesheet" href="./style.css">
<p>少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>
2、CSS基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
CSS的基本语法：
选择器{
声明块；
}
选择器：通过选择器可以选中页面中个的指定元素。比如 p 的作用就是选中页面中所有的p元素。
声明块：通过声明块来指定要为元素设置的样式。
声明块由一个一个的声明组成。
声明块是一个名值对结构，一个样式名对应一个样式值，名和值之间以英文冒号“:”连接，以英文分号“;”结尾。
*/
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>
3、常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1）元素选择器
作用：根据标签来选中指定的元素。
语法：标签名{}
如：p{} h1{} div{}
2）id选择器
作用：根据元素的id属性值选中一个元素，注意不同元素之间的id属性应该不能相同。
语法：#id属性值{}
如：#box{} #red{}
3）类选择器
作用：根据元素的class属性值选中一组元素。
语法：.class属性值{}
如：.blue{} .abc{}
注意：元素属性中可以同时指定多个class的值，多个值之间使用空格隔开。
如：
CSS:
.red{
color:red;
}
.abc{
font-size:40px;
}
html:
<p class = "red abc">儿童相见不相识，笑问客从何处来</p>
4）通配选择器
作用：选中页面中的所有元素。
语法：*{}
如：*{color:red;}
-->
</body>
</html>
4、复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1、将class为red元素的字体设置为红色。 */
.red{
color: red;
}
/* 2、将class为red的div字体大小设置为30px */
/*
交集选择器（相当于逻辑“与”）：
作用：选中同时符合多个条件的元素。
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头。
*/
div.red{ /*选择div元素，且元素属性的类名是red的元素。*/
font-size: 30px;
}
.a.b.c{ /*元素的属性类名必须同时是a b c的元素*/
color: blue;
}
/* 下面的这种方式不太推荐使用，但是语法是没有错误的，因为通过id就可以唯一确定一个元素了，没必要在使用元素选择器。 */
/* div#box1{} */
/*
3、选择器分组（并集选择器，相当于逻辑“或”）
作用：同时选择多个选择器对应的元素。
语法：选择器1,选择器2,选择器3,选择器n{}
如：#b1,.p1,h1,span,div.red{}
*/
h1, span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>我是h1元素</h1>
<span>我是span元素</span>
</body>
</html>
5、关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
为div的子元素span设置一个红色字体（为div直接包含的span设置一个字体颜色）。
1、子元素选择器
作用：选中指定父元素的指定子元素。
语法：父元素 > 子元素
*/
div.one > span {
color: orange;
}
/*
2、后代元素选择器
作用：选中指定元素内的指定后代元素。
语法：祖先 后代
*/
/* div span {
color: skyblue;
} */
/*
3、选择下一个兄弟选择器（必须是紧挨着）
语法：兄元素 + 弟元素
注：这种方法是，兄和弟元素必须是紧挨着的且只会选择一个弟元素。
4、选择下边所有的兄弟选择器
语法：兄 ~ 弟
注：这种方法是，选择兄后面所有的弟元素。
这里的3和4两种选择器都是向下选择，出现在它上面的元素不会被选择到。
*/
/* p + span {
color: red;
} */
/* p ~ span {
color: blue;
font-size: 30px;
} */
</style>
</head>
<body>
<!--
父元素：直接包含子元素的元素叫做父元素；
子元素：直接被父元素包含的元素是子元素；
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是他的祖先元素；
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素；
兄弟元素：拥有相同父元素的元素时兄弟元素；
-->
<div class="one">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
</body>
</html>
6、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
[属性名] 选择含有指定属性的元素；
[属性名=属性值] 选择含有指定属性和属性值的元素；
[属性名^=属性值] 选择以指定值开头的元素
[属性名$=属性值] 选择以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有特定值的元素
注意：可以在方括号[]的前面加上元素，表示选择特定的元素。
*/
/* p[title] */ /*选择p标签中含有title属性的p元素。*/
/* p[title=abc] */
/* p[title^=abc] */
/* p[title$=abc] */
p[title*=e]
{
color: red;
}
</style>
</head>
<body>
<!-- 属性title设置的值，在页面中当鼠标移动到对应值上是，会出现title设置的值。 -->
<p title="abc">少小离家老大回，</p>
<p title="abcdef">乡音无改鬓毛衰。</p>
<p title="helloabc">儿童相见不相识，</p>
<p>笑问客从何处来。</p>
</body>
</html>
7、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 将ul李的第一个li设置为红色。 */
/*
伪类（不存在的类，特殊的类）
1）伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素。
2）伪类一般情况下都是:开头。
比如：
:first-child 选择第一个元素
:last-child 选择最后一个元素
:nth-child() 选中第n个子元素。
特殊值：
n 第n个元素， n的范围从0到正无穷。
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数为的元素
以上这些伪类都是根据所有的子元素进行排序，即并不是指某一个类型。
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功和上述的类似，不通点是它们在同类型元素中进行排序。
:not() 否定伪类，将符合条件的元素从选择器中去除。
*/
/* ul > li:nth-child(2) {
color: red;
} */
/* ul > li:last-child{
color: red;
font-size: 30px;
} */
/* ul > li:nth-child(2){
color: blue;
font-size: 50px;
} */
/* ul > li:first-of-type {
color: red;
font-size: 40px;
} */
/*在ul标签中的所有li标签中，除了第二个li标签外，其它的颜色全部为yellogreen*/
/* ul > li:not(:nth-of-type(2)){
color: yellowgreen;
} */
</style>
</head>
<body>
<!-- ul>li*5 按tab键，快速生成下成ul li 标签 -->
<ul>
<span>我是一个span</span>
<li>第〇个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
8、超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* :link 用来表示没访问过的连接（正常的连接） */
a:link{
color: red;
}
/* :visited 用来表示访问过的连接，由于隐私原因，visited这个伪类只能修改连接的颜色。 */
a:visited{
color: orange;
}
/* :hover 用来表示鼠标移入的状态。 */
a:hover{
color: aqua;
font-size: 30px;
}
/* :active 用来表示鼠标的点击。 */
a:active{
color: yellowgreen;
}
/* 注意：上面超链接伪类的设置顺序是不能发生变化的。 */
</style>
</head>
<body>
<!--
1. 没有访问过的连接 - 蓝色。
2. 访问过的连接 - 紫色。
-->
<a href="#">访问过的连接</a>
<br><br>
<a href="javascript:;">没有访问过的连接</a>
</body>
</html>
9、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）。
伪元素使用 :: 开头。
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示在页面中使用鼠标选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用。
通过before 和 after 所添加的内容在页面中是无法被选中的，且这两个属性在开发中使用是最多的。
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
color: yellowgreen;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: '『';
}
div::after{
content: '』';
}
</style>
</head>
<body>
<div>Hello Hello How are you.</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maiores adipisci exercitationem, magnam labore ipsum. Vero expedita fuga minus alias, omnis magnam maxime, dolorum, libero sed laudantium nesciunt explicabo dolorem.</p>
</body>
</html>
10、样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上。
继承是发在在祖先后带之间的。
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需要设置一次即可让所有的元素都具有该样式。
注意：并不是所有的样式都会被继承，比如：背景相关的、布局相关等这些样式都不会被继承。
*/
p{
color: red;
}
div{
color: yellowgreen;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是p元素外面的span</span>
<div>
我是div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
</body>
</html>
11、样式选择器的权重
主要解决样式不生效的问题！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
样式冲突：当我们通过不同的选择器选中了相同的元素，并且为相同的样式设置不同的值时，此时就发生样式的冲突。
发生样式冲突时，应用那个样式由选择器的权重（优先级）决定，且与选择器在页面中出现的顺序无关。
选择器的权重：
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器。
*/
#box1{
background-color: yellow;
}
.red{
background-color: peru;
}
div{
background-color: palegreen;
}
div#box1{
background-color: yellow;
}
.d1{
background-color: purple;
}
.red{
background-color: red;
}
div,p,span{ /*分组选择器*/
background-color: yellowgreen;
}
/*
样式选择器的权重：
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器。 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则月优先显示（分组选择器是单独计算的），
选择器的累加不会超过其大于它的数量级，类选择器在搞也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式。
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。
注意：在开发中一定要慎用！！！
*/
</style>
</head>
<body>
<div id="box1" class="red d1 d2 d3 d4" style="background-color: chartreuse;">我是一个div</div>
</body>
</html>
12、单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
长度单位：
1）像素：
屏幕（显示器）实际上是由一个一个的小点构成的；
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰；
所以同样的200px在不同的设备下显示效果不一样；
2）百分比：
也可以将属性值设置为相对于其父元素属性的百分比；
设置百分比可以是子元素跟随父元素的改变而改变；
3）em：
em是相对于元素本身的字体大小来计算的；
1em = 1 font-size；
em会根据字体的大小改变而改变；
4）rem：
rem是相对于根元素（HTML）的字体大小来计算；
*/
.box1{
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20;
width: 10em;
height: 10em;
background-color: blue;
}
html{
font-size: 20px;
}
.box4{
width: 10rem;
height: 10rem;
background-color: crimson;
}
</style>
</head>
<body>
<!-- .box1快速生成属性为box1的div标签。 -->
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
扫一扫
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
