文章目录

一、CSS基础语法
二、CSS样式的引入方式
- （1）内联（行内、行间）样式：
- （2）内部样式：
- （3）外部样式：
三、CSS中的颜色表示法
- （1）单词表示法：
- （2）十六进制表示法：
- （3）rgb三原色表示法：
四、CSS背景样式
五、CSS边框样式
六、CSS文字样式
七、CSS段落样式
八、CSS复合样式
九、CSS选择器
- （1）ID选择器
- （2）CLASS选择器
- （3）标签选择器（TAG选择器）
- （4）群组选择器
- （5）通配选择器
- （6）层次选择器
- （7）属性选择器
- （8）伪类选择器
十、CSS样式继承
十一、CSS优先级

一、CSS基础语法

格式：
选择器{属性1：值1；属性2：值2}
单位：
px->像素(pixel)
%->百分比：例：外容器->600px，当前容器50%->300px
基本样式：
width、height、background-color

<!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>div{width: 50%; height: 100px;background-color: red;}span{ background-color: aqua;}</style>
</head>
<body><div>这是一个块</div><div>又是一个块</div><span>这是一个内联</span>
</body>
</html>

CSS注释：快捷键->shift+alt+a
/* CSS注释的内容 */

二、CSS样式的引入方式

（1）内联（行内、行间）样式：

在html标签上添加style属性来实现

（2）内部样式：

在< style>标签内添加样式，内部样式的优点是可以复用代码

<!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>div{width: 100px;height: 100px;background:red}</style>
</head>
<body><!--  <div style="width: 100px;height: 100px;background:red" >内联样式</div> --><div>内部样式</div>
</body>
</html>

（3）外部样式：

引入一个单独的CSS文件，name.css

方式一< link>标签：
rel属性->指定引入的外部资源跟页面的关系

href属性->引入外部资源的地址
方式二@import：有很多问题，不建议使用

<!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"><!-- <link rel="stylesheet" href="./外部样式.css"> --><title>Document</title><style>@import url('./外部样式.css');</style>
</head>
<body><div>外部样式</div>
</body>
</html>

三、CSS中的颜色表示法

（1）单词表示法：

red、blue、green、yellow…

（2）十六进制表示法：

#0000->黑色、#ffff->白色、#ff0000->红色…
（0 1 2 3 4 5 6 7 8 9 a b c d e f）

（3）rgb三原色表示法：

rgb(0,0,0)->黑色、rgb(255,255,255)->白色…
（取值范围：0~255）

提取颜色的下载地址：https://www.baidufe.com/fehelper
提取颜色的工具：
photoshop工具

四、CSS背景样式

（1）backgrouond-color：背景颜色

（2）backgrouond-image：背景图片

url（背景地址）
默认：会水平垂直都铺满背景图

（3）backgrouond-repeat：背景图片的平铺方式

repeat-x：x轴平铺
repeat-y：y轴平铺
repeat：x、y都进行平铺，默认值
no-repeat：都不平铺

（4）backgrouond-position：背景图片的位置

x、y：number（px、%）
单词
x：left、center、right
y：top、center、bottom

（5）backgrouond-attachment：背景图随滚动条的移动方式

scroll：默认值，背景图随滚动条一起移动（背景位置是按照当前元素进行偏移）
fixed：背景图不随滚动条一起移动（背景位置是按照浏览器进行偏移）

<!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>body{height: 2000px;}div{width: 600px;height: 600px;background-color: blue;background-image:url(./背景样式.jpg) ;background-repeat: repeat-x;background-position: right bottom;background-attachment: scroll;}</style>
</head>
<body><div></div>
</body>
</html>

视觉差网站练习

<!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>#div1{width: 1400px;height: 800px;background-image: url(./背景样式1.jpg);background-attachment: fixed;}#div2{width: 1400px;height: 800px;background-image: url(./背景样式2.jpg);background-attachment: fixed}#div3{width: 1400px;height: 800px;background-image: url(./背景样式3.jpg);background-attachment: fixed}</style>
</head>
<body><div id="div1"></div><div id="div2"></div><div id="div3"></div>
</body>
</html>

五、CSS边框样式

（1）border-style：边框的样式

solid：实线
dashed：虚线
dotted：点线

（2）border-width：边框的大小

px…

（3）border-color：边框的颜色

red、#f00…

<!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>/* div{width: 300px;height: 300px;border-style: solid;border-color: aqua;} */div{width: 300px;height: 300px;border-style: dashed;border-color: aqua;}/* div{width: 300px;height: 300px;border-right-style: dotted;border-right-width: 10px; border-right-color: aqua;} */</style>
</head>
<body><div></div>
</body>
</html>

注：针对某一条进行单独设置
border-left-style：中间是方向 left、right、top、bottom

div{width: 300px;height: 300px;
border-right-style: dotted;
border-right-width: 10px;
border-right-color: aqua;}

练习：利用边框实现三角形
透明颜色：transparent

<!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>body{background-color: aqua;}div{width: 0px;height: 0px;border-top-color: transparent;border-top-style: solid;border-top-width: 30px;border-right-color:yellow;border-right-style: solid;border-right-width: 30px;border-bottom-color: transparent;border-bottom-style: solid;border-bottom-width: 30px;border-left-color: transparent;border-left-style: solid;border-left-width: 30px;}</style>
</head>
<body><div></div>
</body>
</html>

六、CSS文字样式

（1）font-family：字体类型

英文字体：Arial，‘Times New Roman’…（只支持英文）
中文字体：微软雅黑（默认），宋体…（中英文都支持）
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’、宋体：SimSun…

注：

字体中出现空格的情况必须用引号，例：‘Times New Roman’
多个字体类型的设置目的：防止计算机有的字体识别不出来，多加备选字体

（2）font-size：字体大小

字体默认大小：16px
写法：number（px）、单词（不推荐使用）

注：字体大小一般设为偶数

（3）font-weight：字体粗细

模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）、number（100 200 … 900，其中100-500都是正常的，600-900是加粗）

（4）font-style：字体样式

模式：正常（normal）、斜体（italid）
写法：单词（normal、italid）
注：oblique也是表示斜体
区别：
1、italid 所有带有倾斜字体的可以设置
2、oblique 没有带有倾斜字体的也可以设置

<!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>div{font-family:'Times New Roman';}</style>
</head>
<body><div>这是一段文字</div><p>这是一段文字</p><div>this is next</div><p>this is next</p>
</body>
</html>

七、CSS段落样式

（1）text-decoration：文本装饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
添加多个文本修饰：通过空格隔开

（2）text-transform：文本大小写（针对英文段落）

大写：lowercase
小写：uppercase
仅针对首字母大写：capitalize

（3）text-indent：文本缩进

首行缩进：默认情况下，一个字符16px
em单位：相对单位，1em永远都是跟字体的大小相同，首行缩进两个字符就是2em，不用管字体是否为默认字体

（4）text-align：文本对齐方式

左对齐：left
右对齐：right
居中对齐：center
两端对齐：justify

（5）line-height：自定义行高

什么是行高：一行文字的高度，上边距和下边距是等价关系。行高由上边距、字体大小和下边距组成

默认行高：不是固定值，根据当前字体的大小在不断变化
取值：number（px）、scale（比例值，跟文字大小成比例）

（6）letter-spacing：定义字间距

（7）word-spacing：定义词间距（针对英文）

（8）强制折行：（针对英文和数字）

word-break：break-all；（非常强烈的折行）
word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域）

<!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>/*  p{width: 300px;text-decoration: underline;} *//*  p{text-transform: lowercase;} *//*  p{text-indent: 2em;font-size: 18px;} */   /*首行缩进20px,默认情况下一个字是16px，首行缩进2个字符即32px*//* p{text-align: left;} *//* 左对齐 *//* p{line-height: 20px;} *//* 自定义行高 *//* p{letter-spacing: 5px;}p{word-spacing: 10px;} */div{width: 300px;height: 300px;border: 1px solid red; word-break: break-all;}</style>
</head>
<body><p>CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区</p><p>asAFdhSDFjkhfkjljdSFShfshgafhgDFSFshgfhdfafGAFhdjkfhak</p><div>asAFdhS DFjkhfkjljdSFsffdfsShfshgafhgDFS Fshgfh dfafGA Fhdjk fhak</div>
</body>
</html>

练习

<!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>div{width: 800px;}h1{text-align: center;color: #ff6600;}h2{color: #00a0ff;text-indent: 2em;}#p1{font-style: italic;font-weight: 800;text-indent: 2em;}#p2{color: #66ff00;line-height: 30px;text-indent: 2em;}#p3{color: #00ffff;line-height: 30px;text-indent: 2em; text-decoration: underline;font-style: italic;}#p4{font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}#p5{color: #cc00cc;line-height: 30px;text-indent: 2em;}</style>
</head>
<body><div><h1>Angelababy简介</h1><h2>基本信息</h2><p id="p1">杨顾(Angelababy ) , 1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p><p id="p2">2009年主演电影《全城热恋》，2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”﹔同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖;4月，Angelababy主演电视剧《大汉情缘之云中歌》，2014年加盟综艺节目《奔跑吧兄弟》并主演电影版﹔同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》;7月，主演电影《摆渡人》.</p><h2>早年经历</h2><p id="p3">1989年2月28日，Angelababy出生在上海，中文名标额、标颍自小随家人到上海定居，在上海的演艺学校学演戏及跳腥，13岁时，标颖回吉满加入了Talent Bang.还担任Viva Club Disney主持。</p><h2>个人生活</h2><p id="p4">2 0 1 5年5月27日，黄晓明和A n g e l a b a b y （杨颖）在青岛民政局领证完婚。</p><p id="p5">2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照。照片中,两人以巴黎地标建筑为背景，浪漫亲吻。</p></div></body>
</html>

八、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。一个CSS属性控制多种样式，叫做复合样式。
复合的写法是通过空格的方式实现的
复合写法有的是不需要关心顺序的，例如background、border，有的是需要的，例如font
（1） background：
red url() repeat center
（2）border:
1px red solid
（3）font：
注：
最少要有两个值size family，且两个词的顺序不能改变，还要放在最后的位置
weight style size family √
style weight size family √
weight style size/line-height family √

<!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>div{width: 800px;height: 800px;background: red url(./背景样式1.jpg) no-repeat center;/* border: 2px black solid; */border-right: 2px blue dashed;font:30px 宋体 ;}</style>
</head>
<body><div>这是一段文字</div>
</body>
</html>

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，否则会出现错误

九、CSS选择器

（1）ID选择器

css：#elem{}
html：id=“elem”

注:
1.在一个页面中，ID值是唯一的。

2.命名规范：由字母、下划线、中划线组成(命名的第一位不能是数字)。

3.命名方式：

驼峰式：
searchButton（小驼峰，第一个单词首字母小写，第二个单词首字母大写）
SearchButton（大驼峰，第一个单词首字母大写，第二个单词首字母也大写）
下划线式：search_small_button
短线式：search-small-button

4.快捷方式：div+#+name+回车

<!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>#div1{background: red;}#div2{background: blue;}</style>
</head>
<body><div id="div1">这是一个块</div><div id="div2">这又是一个块</div>
</body>
</html>

（2）CLASS选择器

css：elem{}
html：class=“elem”

注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS中顺序决定，而不是class属性中的顺序
4.标签+类的写法

p.box{background: red;}/* 只想让p标签生效，不想让div生效，可以用标签+类的写法 */

5.快捷方式：div.name+回车

<!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>/* .box{background: red;}.content{font-size: 30px;} */p.box{background: red;}/* 只想让p标签生效，不想让div生效，可以用标签+类的写法 */</style>
</head>
<body><!-- <div class="box">这是一个块</div><div class="box">这又是一个块</div><p class="box"></p>--><div class="box content">这是一个块</div><div class="box">这又是一个块</div><p class="box">这是一个段落</p>
</body>
</html>

（3）标签选择器（TAG选择器）

css：div{}
html：< div>< /div>
使用场景：
1：去掉某些标签的默认样式时
2：复杂的选择器中，如层次选择器

（4）群组选择器

css：div，p，span{}
可以通过逗号的方式，给多个不同的选择器添加统一的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>/* div{background: red;} #text{background: red;}.title{background: red;} */div,#text,.title{background: red;}/* 等价于上面三行，群组选择器 */</style>
</head>
<body><div>这是一个块</div><p id="text">这是一个段落</p><h2 class="title">这是一个标题</p>
</body>
</html>

（5）通配选择器

*{ }->div，ul，li，p，h1，h2，…{ }
包含了所有的标签
注：尽量避免使用通配选择器，因为会给所有的标签添加样式
使用场景：去掉所有标签的默认样式时

<!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>*{border: 1px red solid;}</style>
</head>
<body><div>这是一个块</div><p id="text">这是一个段落</p><h2 class="title">这是一个标题</p>
</body>
</html>

（6）层次选择器

后代：M N{ }
父子：M>N{ }
兄弟：M~N{ }：当前M下面的所有兄弟N标签
相邻：M+N{ }：当前M相邻的N标签

<!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>/*  ul li{border:1px red solid;} *//*  ul>li{border:1px red solid;} *//* div~h2{border: 1px red solid;} */div+h2{background: red;}</style></head>
<body><!--  <ul><li><ul><li></li><li></li><li></li></ul></li><li></li><li></li></ul><ol><li></li><li></li><li></li></ol> --><div>这是一个块</div><h2>这是一个标题</h2><h2>这是一个标题</h2><h2>这是一个标题</h2><p>这是一个段落</p><h2>这是一个标题</h2><h2>这是一个标题</h2><h2>这是一个标题</h2>
</body>
</html>

（7）属性选择器

=：完全匹配
*=：部分匹配
^=：起使匹配
$=：结束匹配
[ ][ ]:组合匹配

<!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>/* div[class]{background: red;} *//* 选择带有class的添加样式 *//* div[class=box]{background: red;} *//* div[class=search]{background: red;} *//* 选择class=search的添加样式 *//* div[class*=search]{background: red;} *//* 只要有search的都会添加样式 *//* div[class^=search]{background: red;} */div[class][id]{background: red;}/* 既有class属性又有id属性的才会被添加样式*/</style>
</head>
<body><div>aaaaaaa</div><div class="box" id="elem">aaaaaaa</div><div class="search">aaaaaaa</div><div class="search-button">aaaaaaa</div><div class="button-search">aaaaaaa</div>
</body>
</html>

（8）伪类选择器

css伪类选择器用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加

:link：
访问前的样式（只能添加给a标签）
:visited：
访问后的样式（只能添加给a标签）
:hover：
鼠标移入时的样式（可以添加给所有的标签）
:active：
鼠标按下时的样式（可以添加给所有的标签）

注：
1.如果四个伪类都生效，一定要注意顺序:LVHA。
2.一般网站只这样去设置:a{}（link visited active）、 a:hover{}

<!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>/* div{width: 200;height: 200px;background: red;} *//* div:hover{background: blue;} *//* 鼠标移入时背景颜色会变成蓝色 *//*  a:link{color: red;}a:visited{color: blue;}a:hover{color: green;}a:active{color: yellow;} */a{color: gray;}a:hover{color: red;}</style>
</head>
<body><!-- <div></div> --><a href="#">这是一个链接</a>
</body>
</html>

:after、 :before
通过伪类的方式给元素添加一个文本内容
使用content属性
:checked 、:disabled、:focus
都是针对表单元素的
：nth-of-type()、:nth-child()
1、角标是从1开始的，1表示第一项，2表示第二项
2、还可以表示n值，n值表示0到无穷大
:first-of-type、:first-child
第一个
:last-of-type、:last-child
最后一个
:only-of-type、:only-child
仅在有一个的时候有效果
注：
nth-of-type()、:nth-child()之间的区别
1、type:类型，child：孩子

<!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>/* div{width: 200;height: 200px;background: red;} *//* div:hover{background: blue;} *//* 鼠标移入时背景颜色会变成蓝色 *//* a:link{color: red;}a:visited{color: blue;}a:hover{color: green;}a:active{color: yellow;} *//* a{color: gray;}a:hover{color: red;} *//* div:after{content: "word";color: red;} *//* 可以仅对word这一个单词添加样式 *//* :checked{width: 100px;height: 100px;}:focus{background: red;}*//* li:nth-of-type(3){background: red;} *//* 不通过id、class,选择li中第三个加背景色 *//*  li:nth-of-type(2n){background: red;} *//* 2的倍数会加上背景色 *//*  li:nth-of-type(2n+1){background: red;} *//* 奇数会加上背景色，通过n可以实现隔行添加样式 */li:nth-child(2){background: red;}/* li的第二个孩子是div不是li，所以就不会有效果 ，这就是与nth-of-type()的区别*/</style>
</head>
<body><!-- <div></div> --><!--  <a href="#">这是一个链接</a> --><!-- <div>hello</div> --><!-- <input type="checkbox"><input type="checkbox" checked><input type="checkbox" disabled><input type="text"> --><ul><li></li><div>aaaaaaa</div><li></li><li></li><li></li><li></li></ul>
</body>
</html>

十、CSS样式继承

文字相关的样式可以被继承

布局相关的样式不能被继承

默认是不能被继承的，但是可以设置继承属性（inherit值）

<!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>div{width: 300px;height: 300px;border: 1px red solid;color: red;}p{border: inherit;}/* 让p标签能够继承边框的样式 */</style>
</head>
<body><div><p>这是一个段落</p></div>
</body>
</html>

十一、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>div{color: red;}/* div{color: blue;} *//* 相同样式后写的优先级高 */</style><link rel="stylesheet" href="./外部样式.css"><!-- 后引入的方式优先级高
</head> -->
<body><div>这是一个块</div>
</body>
</html>

单一样式优先级
style行间（内联）>id>class>tag（标签）>*（通配）>继承

<!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>/* #elem{color: red;} *//* .box{color: blue;} *//* div{color: green;} *//* 标签的优先级低于class的优先级 */*{color: blueviolet;}/* 标签的优先级高于通配 */body{color: bisque;}/* 通配的优先级高于继承 */</style>
</head>
<body><!-- <div id="elem" style="color:blue;"></div> --><!-- id的颜色是红色，style的是蓝色，结果会显示蓝色，说明style的优先级高于id --><div id="elem" class="box">这是一个块</div><!-- id的颜色是红色，class的是蓝色，结果会显示红色，说明id的优先级高于class -->
</body>
</html>

注：
style行间（内联）权重->1000
id ->100
class ->10
tag（标签）->1（权重就代表等级）

!important
1、提升样式优先级，非规范方式，不建议使用
2、不能针对继承的属性进行优先级的提升

 #elem{color: aqua !important;} /* 会提升优先级 */

标签+类与单类

div.box{color: aquamarine;}.box{color: red;}/* 标签+类的优先级高于单类的优先级 */

群组优先级与单一选择器的优先级相同，靠后写的优先级高（同一等级的前提下）

  div{color: aqua;div,p{color: chocolate;}

层次优先级

1、权重比较（等级的比较，不是数值相加的比较）
ul li .box p input{} -> 权重：1+1+10+1+1
.hello span #elem{} ->权重： 10+1+100

2、约分比较(相同等级的约掉）
ul li .box p input{}–> li p input{}
.hello span #elem{}–>#elem{}

前端基础（二）：CSS相关推荐

前端基础：CSS 3
前端基础:CSS 3 文章目录前言一.什么是CSS 0. CSS的简单介绍 1. 什么是CSS 2. CSS发展史 3. CSS的快速入门及优势 4. 四种CSS导入方式二.选择器 1. 三种基 ...
前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天今天我们围绕一个导航栏案例进行 ...
外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
【前端基础二】CSS
文章目录二.CSS 基础语法选择器注释尺寸背景文本字体鼠标样式表格样式边框内边距外边距垂直外边距合并问题超链接状态隐藏元素优先级布局绝对定位相对定位浮动 di ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
☀️前端基础—【CSS✨✨✨】
文章目录(PS:觉得不错请点赞收藏支持一下) 一.CSS 初识 1.1 概念 1.2 引入 CSS 样式表 1.2.1 行内式(内联样式) 1.2.2 内部样式表(内嵌样式表) 1.2.3 外部样式表 ...
前端基础(HTML,CSS,JavaScript,jQuery)
文章目录 `HTML` 基础 `HTML`文件的基本结构标签属性转义字符元素之间的关系常用标签基本列表图片表格嵌套页面表单 `form`提交表单的属性: `GET`请求的特点 ` ...
前端基础之CSS属性
一.背景属性 <style>p {/*背景颜色*/background-color: red;/*字体颜色*/color: blue;/*宽度和高度*/width: 600px;heigh ...

前端基础（二）：CSS