CSS
在HTML基础中写了一个表单
可以看到非常丑,除了文字就是条条框框,用户看到这样的网页无疑是不愿意多看一眼的,因此为了优化用户体验,引入了页面的美化CSS
CSS基础
CSS: Cascading Style Sheets ,层叠样式表
样式:元素的美化
层叠:一个元素可以有多种样式值叠放
表:元素的样式的集合
1 引入CSS的三种方式
- 行内样式:通过style属性编写,每个样式用分号间隔
<div style="width:200px;height:200px;background-color: red;">块级元素box</div>
- 内部样式:在head标签内添加style标签
<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的注释*/
/*
div:选中的元素,样式用花括号包含
*/
div {
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div>块级元素box</div>
</body>
- 外部样式
在同级目录下新建css文件夹,在该文件夹下创建box.css
div {
width:200px;
height:200px;
background-color: red;
}
html文件在head标签中引入css
<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>
<!--用link标签引入 ref:代表样式表, href:样式文件的路径-->
<link rel="stylesheet" href="./css/box.css">
</head>
<body>
<div>块级元素box</div>
</body>
上面三种方式都会实现这样的效果
2 CSS选择器
在1.1 中,给div元素添加了样式,但是这样每个div元素都会有同样的属性,这是不合适的,CSS选择器可以帮助开发人员选择特定的元素并给其赋予特定的属性。
2.1 标签选择器
上面的div就是标签选择器
div {
width:200px;
height:200px;
background-color: red;
}
2.2 类选择器
<style>
/*css中的样式定义:用小数点开头接类名*/
.box {
width:200px;
height:200px;
background-color: red;
}
</style>
<!--语法:class="类名"-->
<div class="box">块级元素box</div>
2.3 id选择器
一般用于特殊元素上
<style>
/*css中的样式定义:用#开头接id名*/
#box {
width:200px;
height:200px;
background-color: red;
}
</style>
<!--语法:id="id名"-->
<div id="box">块级元素box</div>
2.4 复合选择器
拥有相同样式的元素可以用复合选择器
<style>
/*css中的样式定义:用逗号隔开选择器名*/
#box1,#box2,.box3,h1 {
width:200px;
height:200px;
background-color: red;
}
</style>
2.5 子代选择器
如图,红色盒子就是就是父元素,绿色就是子元素
语法:两种写法
-
selector1>selector2
-
selector1 selector2
<style>
#box {
width:200px;
height:200px;
background-color: red;
}
#box>div {
width:100px;
height:100px;
background-color: green ;
}
</style>
<div id="box">
box1
<div class="box2">box2</div>
</div>
2.6 下一个兄弟选择器
同级别元素下该元素的下一个元素
语法:selector1+selector2
<style>
#box {
width:200px;
height:200px;
background-color: red;
}
#box+div {
width:100px;
height:100px;
background-color: green ;
}
</style>
<div id="box">box1</div>
<div>box2</div>
2.7 所有子代选择器
语法:selector1~selector2:selecctor下所有的selector2
2.8 伪类选择器
语法:selector:selector2
#box div {
width:100px;
height:100px;
}
/* 表示#box下的子元素div*/
#box div:nth-child(n){
background-color: green ;
}
子代伪类选择器:
- :first-child:第一个子元素
- :last-child:最后一个子元素
- :nth-child(x):第x个子元素
- x=n:全部子元素
- x=2n :所有偶数个子元素
- x=3n:3的倍数个子元素
- x=2n+1:所有奇数个子元素
- x=n+x:从第x个开始的子元素
- x=(-n+x):前X个子元素
a标签伪类选择器:
- a:visited{}:访问过的链接
- a:active{}:点击
- a:hover{}:鼠标经过
2.9 伪元素选择器
语法:selector::伪元素
- ::before
- ::after,注意:必须结合content结合使用
2.10 选择器优先级
内联(行内)样式:1000
id: 100
类(伪类):10
标签:1
通配符*:0
3 单位
尺寸:
- px:像素
- 百分数:相对父元素而言
- em:字的大小,1em就是一个字
颜色:
- rgb:rgb(0-255, 0-255, 0-255)
- rgba:rgb(0-255, 0-255, 0-255,0-1):最后一项表示透明度
- hex:十六进制:#000000-----#ffffff
结合使用
1.2.10 选择器优先级
内联(行内)样式:1000
id: 100
类(伪类):10
标签:1
通配符*:0
1.3 单位
尺寸:
- px:像素
- 百分数:相对父元素而言
- em:字的大小,1em就是一个字
颜色:
- rgb:rgb(0-255, 0-255, 0-255)
- rgba:rgb(0-255, 0-255, 0-255,0-1):最后一项表示透明度
- hex:十六进制:#000000-----#ffffff