CSS
Cascading Style Sheets
层叠样式表
用于控制
HTML
中标签样式的语言。可以精确到像素，美化修饰
HTML
标签。
CSS语法
样式名：样式值；
color:red;
font-size:20px;
选择器
用于选择页面中元素
(
标签
)
的工具。
id选择器
1.
给标签添加
id
属性，对其命名
2.
在
style
标签中通过
#id
名获取
通常用于选择某
一个元素
<html>
<head>
<style>
#test{
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>class选择器
1.
给标签添加
class
属性，对其命名
2.
在
style
标签中通过
.class
名获取
通常用于选择
一组元素
<html>
<head>
<style>
.test{
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>元素/html/标签选择器
直接通过标签名获取。
通常用于选择一组元素。
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div ></div>
</body>
</html>层次选择器
通过空格或
>
获取某个元素的子元素。
"
元素
A
元素
B"
表示获取元素
A
下的所有元素
B
""
元素
A >
元素
B"
表示获取元素
A
下的第一层元素
B
<html>
<head>
<style>
#father div{
//获取其中的所有子元素
}
#father > div{
//获取其中的第一层子元素
}
</style>
</head>
<body>
<div id="father">
<div>
<div>使用>无法获取该div</div>
</div>
<div></div>
</div>
</body>
</html>群组选择器
通过，同时选择多个元素
创建一个独立的.css文件，通过link标签引入
1.
创建一个
.css
文件，将原本写在
style
标签中的内容保存在该文件中
2.
在页面的
head
标签中，使用以下代码引入
CSS优先级
style
属性
==>style
标签
==>
引入
css
文件。
如果某个元素同时拥有
id
、
class
以及
style
属性时。
优先级从高到低
style
属性
==>id
选择器
==>
类选择器
==>
元素选择器
常用样式
尺寸
只能对块级元素设置尺寸。
如果要对行内元素设置尺寸，需要先将其改为块级元素。
设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。
设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。
如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。
背景background
边框border
边框会
"
套
"
在元素外层，元素原本大小不变，但所占区域会变为原本大小
+
边框宽度
字体font
文本text
列表list
伪类
表示某个元素的某种状态。
用于对某些元素在不同的情况下呈现不同的效果。
如
a
标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
以上的
:hover
可以适用于很多标签，如
div:hover
。
但其余伪类只适用于
a
标签。
鼠标样式cursor
显示方式display
浮动float
让某个元素脱离原本的位置，朝某个方向对齐。
float:left
和
display:inline-block
的区别
相同点：都能让多个独占一行的块级元素位于同一行
display:inline-block
多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的
一行。
float:left
多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，
后续元素会顶替之前元素的位置
盒子模型
页面中的所有块级元素，都是一个
“
盒子
”
，每个
“
盒子
”
由元素自身、内边距
padding
、边框
border
、外边距margin
组成
- 内边距padding：边框与元素自身之间的距离
- 外边距margin：元素A的边框与元素B的边框之间的距离
一个元素的所占位置是外边距+边框+内边距+元素自身的大小。
溢出overflow
当子元素超出父元素的范围时，称为溢出。通过
overflow
控制溢出部分的表现。
默认显示溢出部分，溢出部分不会影响后续元素。
盒子模型阴影box-shadow
类似于
text-shadow
，通常设置
4
个值 颜色 左右位置 上下位置 模糊程度
box-shadow:gray 4px 5px 6px
灰色阴影 向右
4px
向下
5px
模糊
6px
定位position
将元素以像素为单位调整位置
配合定位使用样式
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。
可以通过
浮动
float
、
固定定位
fixed
和
绝对定位
absolute
让元素脱离文档流。
脱离文档流后，通过改变元素的
left
、
top
、
bottom
、
right
移动其位置
相对定义relative
让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。
元素不会脱离文档流
(
后续元素不会顶替其位置
)
。
固定定位fixed
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
通常用于放置一些工具、广告、返回首页等。
绝对定位absolute
让某个元素脱离文档流，根据
已定位的父元素
进行定位。如果没有已定位的父元素，会根据页面定位。
层叠z-index
某个已定位的元素，可以通过
z-index
控制其层叠顺序。
z-index
是一个数字，数字越大，距离视线越近。
不透明度
取值范围
[0,1]
，值越大，越不透明
扫一扫
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
