CSS基础
1-CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 通过样式定义如何显示 html 元素
- 通过选择器封装样式表,可使样式和标签分离,提高工作效率
2-CSS选择器
- id选择器
以#开头,匹配 id 值 相同的标签,标签的 id 不是唯一,运行两个不同的标签使用相同的 id
<!DOCTYPE html>
<html>
<head>
<style>
#a{
width:50px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id = "a">样式</div>
</body>
</html>
- 类(class)选择器
以 . 开头,匹配class 值相同的标签,一个标签 可以有多个class 值,使用空格分离,如果样式冲突,后写的覆盖先写的
<!DOCTYPE html>
<html>
<head>
<style>
.a{
width:50px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class = "a">样式</div>
</body>
</html>
- 元素选择器
直接以标签名来进行命名的,匹配标签名相同的标签
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:50px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div >样式</div>
</body>
</html>
- 通配选择器
以 * 开头,通常用来清除 margin 和 padding 的默认值
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
background:#000000;
}
</style>
</head>
<body>
<div >样式</div>
</body>
</html>
-
样式优先级
原则:范围越大,优先级越低
内联样式 > id选择器 > 类选择器 > 元素选择器 >通配选择器
3-样式的属性
- 标签的样式必须成对出现:
样式名:样式值;样式名:样式值...
样式属性 | 描述 | 用法 |
---|---|---|
width | 定义标签的宽度 | width:10px; |
heigth | 定义标签的高度 | heigth:10px; |
background | 定义标签的背景色 | background:red; |
display | 设置标签的元素类型 | display:block; |
display:block; | 将标签转换为块元素 | |
display:inline; | 将标签转换为行元素 | |
display:inline-block | 将标签转换为行内块 | |
display:none | 隐藏元素并脱离文档流 | |
visibility | 隐藏元素但不脱离文档流 | visibility:hidden; |
margin | 外边距 | margin:10px; |
margin:10px; | 设置元素上下左右的外边距都为10px | |
margin:10px 20px; | 设置元素上下外边距10px,左右外边距20px | 如果左右外边距为auto,则元素水平居中 |
margin:10px 20px 30px 40px; | 设置元素的上右下左边距,从上开始顺时针设置 | |
margin-left | 左外边距 | margin-left:20px; |
margin-rigth | 右外边距 | margin-rigth:20px; |
margin-top | 上外边距 | margin-top:20px; |
margin-bottom | 下外边距 | margin-bottom:2px; |
padding | 内边距 | padding:20px; |
padding:10px; | 设置元素上下左右的内边距都为10px | |
padding:10px 20px; | 设置元素上下内边距10px,左右外边距20px | 如果左右外边距为auto,则元素水平居中 |
padding:10px 20px 30px 40px; | 设置元素的上右下左边距,从上开始顺时针设置 | |
padding-left | 左内边距 | padding-left:20px; |
padding-rigth | 右内边距 | padding-rigth:20px; |
padding-top | 上内边距 | padding-top:20px; |
padding-bottom | 下内边距 | padding-bottom:2px; |
border | 边框线,包括: 大小、颜色、样式 3个值 | border: solid; |
border: solid; | 设置边框为实线 | |
border:dashed; | 设置边框为虚线 | |
border:dotted; | 设置边框为圆点 | |
border:outset; | 设置边框为凸起感 | |
border:inset; | 设置边框为凹陷感 | |
border-left | 设置左边框 | border-left:solid; |
border-rigth | 设置右边框 | border-rigth:solid; |
border-top | 设置上边框 | border-top:solid; |
border-bottom | 设置下边框 | border-bottom:solid; |
box-sizing | 设置边框线和内边距是否在元素内部 | box-sizing:conten-box; |
box-sizing:conten-box; | 设置内边距和边框线都在元素本身以内绘制 | |
float | 将元素浮动起来,一旦浮动起来,元素会自动变成行内块,并脱离文档流 | float:left; |
float:left; | 将元素靠左浮动 | |
float:rigth | 将元素靠右浮动 | |
clear | 清除浮动必须设置在和浮动同级的元素中,不是不浮动,只是让浮动的元素回到文档流中 | clear:left; |
clear:left; | 清除左浮动 | |
clear:rigth; | 清除右浮动 | |
clear:both; | 左右浮动都清除 | |
position | 对元素进行定位,如果为非static定位,position还需要搭配 left/rigth/top/bottom使用,用了left不用rigth,用例top不用bottom | position:relative; |
position:relative; | 相对定位,不会脱离文档流,其实位置在该元素的static位置,即该元素原本位置 | |
position:absolute; | 绝对定位,脱离文档流,起始位置先找父元素,如果父元素非static定位,则参照父元素的左上角定位,否则一直往上找 | |
position:static; | 静态定位,可以看做没有定位,默认就是静态定位,static 定位中,left/rigth/top/bottom设置无效 | |
position:fixed; | 屏幕定位,脱离文档流,只参照屏幕位置 | |
定位元素覆盖的规则,非static覆盖static定位,后写的覆盖先写的,z-index 值大的覆盖值小的 | ||
z-index | 设置定位z-index值,可以对元素覆盖的顺序起作用,大的覆盖小的 | z-index:3; |
px | 像素 (长度单位) | |
% | 参照父元素的百分比 | |
em | 参照父元素的 font-size,1em为父元素的1倍 | |
rem | 参照html元素的font-size | |
vh | 参照屏幕的高度 | |
vw | 参照屏幕的宽度 | |
calc(数值 - 数值) | 属性计算,往往用于百分比和固定像素混搭的时候,注意:运算符左右两边必须有空格,否则会报错 |