目录
01.CSS简介
CSS是层叠样式表 类似ps中的图层
1.1 网页三部分
结构（HTML）
表现（CSS）
行为（JavaScript）
1.2 使用css修改元素样式方法
方式一(内联/行内样式）：不实用
在标签内部通过style属性来设置元素的样式
问题：
样式只能对一个标签生效，易产生代码冗余，当样式变化时修改代码工程量大
注意：
开发时绝对不要使用内联样式
<p style="color:red;font-size : 30px;">少小离家老大回，乡音无改鬓毛衰</p>方式二（内部样式表）: 也不太实用
将样式编写到head中的style标签里
通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式并且修改时只需要修改一处即可
问题：
内部样式表只能对一个网页起作用
它里面的样式不能跨平台进行复用
<style>
p{color:purple;font-size : 30px;}
</style>方式三（外部样式表）：最佳实践
可以将CSS样式编写到一个外部的CSS文件中
然后通过link标签引入外部文件
外部样式表需要通过link标签进行引用
意味着可以跨网页、重复使用
将样式编写到外部CSS文件中，可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验
①建立style.css文件
p{
color:rgb(0, 17, 255);
font-size : 30px;
}②直接在head内部通过link标签进行引用
<link rel="stylesheet" href="./style.css">
02.CSS语法
CSS中的基本语法：
选择器 声明块
选择器：通过选择器可以选中页面中指定元素,比如p
声明块，通过声明块来制定要为元素设置的样式，声明块里面是名值对结构
{ 样式名：样式值; }
<head>
<style>
p{
color: rgb(0, 0, 0);
font-size: 40px;
}
h1{
color: red;
}
</style>
</head>03.常用选择器
方式一：元素选择器
p{
color: red;
}
h1{
color: green;
}方式二：id选择器 #id
#red{
color: black;
}方式三：类选择器 .class
.blue{
color: blue;
}
.abc{
font-size: 30px;
}方式四：通配选择器
*{
color: red;
}优先级：id -> class -> 元素选择器 -> 通配选择器
<body>
<h1>标题</h1>
<p id="red">少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<!--
class是一个标签的属性，和id类似，不同的是class可以重复使用
可以通过class属性来分组
-->
<p class="blue abc">儿童相见不相识</p>
<p class="blue">笑问客从何处来</p>
</body>04.复合选择器
4.1 交集选择器
语法：选择器1.选择器2.选择器3{ }
div.red{
font-size: 30px;
}
.a.b.c{
color: green;
}4.2 并集选择器
语法：选择器1,选择器2,选择器3{ }
h1,span{
color: aqua;
}<body>
<div class="red">我是div</div>
<div class="red a b c">我是div2</div>
<p class="red">我是p元素</p>
<h1>标题</h1>
<span>哈哈</span>
</body>05.父子兄弟选择器
父元素：
-直接包含子元素的元素叫父元素
子元素：
-直接被父元素包含的元素
祖先元素：
-直接或间接包含后代元素的元素叫祖先元素
后代元素：
-直接或间接被祖先元素包含的元素叫后代元素
兄弟元素：
拥有相同父元素
5.1 子元素选择器：
语法：父元素 > 子元素
div.box > span{
color: red;
} 5.2 后代元素选择器：
语法：祖先 后代
div span{
color: blue;
} 5.3 兄弟元素选择器
选择下一个兄弟
语法：前一个+下一个
选择下面所有兄弟
语法：兄~弟
p + span{
color: brown;
}
p ~ span{
font-size: 30px;
}<body>
<div class="box">
div
<p>
div:p
<br>
<span>p:span</span>
</p>
<div>div</div>
<span>div:span</span>
<span>div:span</span>
<span>div:span</span>
<span>div:span</span>
</div>
<span>span</span>
</body>06.属性选择器
元素选择+属性选择
[属性名] 选择含有指定属性的元素
[属性名 = 属性值] 选择含有指定属性和属性值的元素
[属性名^= 属性值] 选择属性值以指定值开头的元素 -->找头符合
[属性名$= 属性值] 选择属性值以指定值结尾的元素 -->找尾符合
[属性名*= 属性值] 属性值中含有某值的元素 -->找任意位置符合
p[title]{
font-size: 30px;
}
p[title = ABC]{
color: blue;
}
P[title^=DEF]{
font-size: 40px;
}
P[title$=ABC]{
color: pink;
}<body>
<h1>标题</h1>
<!-- title：提示文字 -->
<p title="ABC">少小离家老大回</p>
<p title="DEF">乡音无改鬓毛衰</p>
<p title="DEFGHI">儿童相见不相识</p>
<p title="hhABC">笑问客从何处来</p>
</body>07.伪类选择器
7.1 伪类
伪类 ：不存在的类、特殊的类
伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素
伪类一般情况下用 " ：" 开头
7.2 对所有子元素排序选择
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 选中全部
2n / even 选中偶数位
2n+1 / odd 奇数
*以上伪类都是根据所有子元素进行排序
ul>li:first-child{
font-size: 30px;
}注：此代码无效
无效是因为在所有类型中排序中first-child是span
但是这里要选择的是ul里的li，所以交集为空找不到
7.3 对同类元素排序选择
:first-of-type
:last-of-type
:nth-of-type()
*以上伪类的功能和上述类似，不同点是他们在同类元素中进行排序
ul>li:first-of-type{
color: red;
}:not(),否定伪类
将符合条件的元素从选择器中去除
ul>:not(:nth-child(3)){
color: blue;
}<body>
<ul>
<span>span</span>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
</body>08.a元素的伪类
常用伪类
:link表示没访问过的链接(正常的链接)
:visited表示访问过的链接
由于隐私原因，visited这个伪类只能修改链接的颜色
--------上面两个伪类只适用于a元素---------
:hover 表示鼠标移入的状态
:active 表示鼠标点击状态
<style>
/* :link表示没访问过的链接(正常的链接) */
a:link{
color: red;
}
/*
:visited表示访问过的链接
由于隐私原因，visited这个伪类只能修改链接的颜色
*/
a:visited{
font-size: 50px;
/* 由于隐私原因，此行代码无效 总不能将访问过的链接搞得很大
让全世界都知道你在看h网 */
color: orange;
}
/* :hover 表示鼠标移入的状态 */
a:hover{
color: rgb(1, 255, 115);
}
/* :active 表示鼠标点击状态 */
a:active{
color: yellow;
}
</style>09.伪元素选择器
伪元素
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中内容
::before 元素的开始位置
::after 元素的结束位置
before和after 必须结合content属性来使用,且内容无法选中
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color:yellow;
}
p::selection{
background-color: green;
}
div::before{
content: '『';
color: red;
}
div::after{
content: '』';
color: red;
}10.样式的继承
注意：
并不是所有的样式都会被继承
比如背景相关的，布局相关的 等 这些样式不会被继承
<style>
p{
color: red;
background-color: orange;
}
body{
font-size: 20px;
}
</style>
<body>
<p>
p
<br>
<span>p中span</span>
</p>
</body>11.选择器的权重
11.1 样式的冲突
当我们通过不同的选择器选中相同的元素，并为相同的样式设置不同的值时，就发生了冲突
11.2选择器权重
比较优先级时，需要将所有选择器优先级进行相加再比较（分组选择器单独计算）
注意1：
选择器的累加不会超过其最大数量级
eg：类选择器再多再搞不会超过id选择器
不能跨数量级
如果优先级相同，优先使用靠下的样式
注意2：
可以在某个样式后面加 ！important
此时该样式会获取到最高优先级，甚至超越内联样式，但是在开发中慎用
内联样式 1,0,0,0 (内联样式：直接写一个style属性在标签内)
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
div{
background-color: yellow;
}
.red{
background-color: red;
}
#box1{
background-color: blue;
}
div#box1{/*并集，优先级相加*/
background-color: blueviolet;
}
div,p,span{/*并集，单独计算*/
background-color: aqua;
}
*{
font-size: 30px;
}12.单位
12.1 像素：
屏幕（显示器）实际上是由一个个小点点构成
不同屏幕的像素大小是不用的，像素越小现实的效果越清晰
所以同样的200px在不同的设备下显示的效果不一样
12.2 百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素随父元素的改变而改变
12.3 em
em是相对于元素的字体大小来计算的
1em = 1 font-size
em会根据字体大小的改变而改变
12.4 rem
rem是相对于根元素的字体大小来计算
html{
font-size: 30px;
}
.box1{
width: 300px;
height: 100px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 30px;
/* width: 10em;
height: 10em; */
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
13. 颜色
13.1 RGB值：
通过三种颜色的不同浓度来调配出不同的颜色
red green blue
每一种颜色的范围在0-255之（0%-100%）间
语法：RGB（红色，绿色，蓝色）
13.2 RGBA
就是在rgb的基础上增加了一个a表示不透明度
1：完全不透明
0：完全透明
0.5 半透明
十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过 00-ff
如果颜色两位两位重复 可以进行简写
#aabbcc --> #abc
13.3 HSL值 HSLA值
H 色相（0-360)
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0% - 100%
扫一扫
3120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
