css基础
一、基础认知
1、中文名：层叠样式表
2、作用：给HTML设置样式
3、语法：
选择器{
属性名：属性值
}
p{
color:red
}
①
2、引入方式
（1）内嵌式：css 写在style标签中
<style>
/* 内部样式：通过style标签实现
style标签要写在head标签中
练习使用，项目中不允许*/
/* 语法：选择器：{样式设计} */
h1{
color: yellow;
}
</style>
（2）外联式：css写在一个单独的.css文件中,用link标签引入
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户中心</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/commont.css">
<link rel="stylesheet" href="css/user.css">
<link rel="stylesheet" href="font_icon/iconfont.css">
</head>
（3）行内式:CSS 写在标签的style属性中
<p style="color: red;">
任何标签都有style属性，<br>
可以通过style属性来实现样式的修改<br>
属性：值<br>
不推荐使用，
</p>
二、基础选择器
1、标签选择器（同①）
2、类选择器
【所有标签上都有class属性，class属性的属性值称为类名（类似于名字）ps：class用.代替】
<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>类选择器</title>
<style>
/* class使用.代表 */
.p1{color: rgb(8, 63, 145);}
.p2{color:red;}
.p{/* 背景颜色 */
background: #000;}
</style>
</head>
<body>
<p class="p1 p"> 1 </p>
<p class="p2">2</p>
<h2 class="p1">assa</h2>
</body>
</html>
3、id选择器
【
1、所有标签上都有id属性
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3、一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
ps：id用#代替
】
<!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>id选择器</title>
<style>
#a{color: aqua;}
.s1{color: #000;}
</style>
</head>
<body>
<p id="a">aa<span class="s1">bb</span> aa</p>
<p id="b">bbbb</p>
</body>
</html>
4、通配符选择器
【
用来找到页面中所有的标签，设置样式
ps：用*表示
】
<!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>通配符</title>
<style>
*{color: aqua;}
</style>
</head>
<body>
<h1>肝胆涂地</h1>
<h2>1434</h2>
<p>是人工人工</p>
<b>胡蛋黄酥</b>
<i>东方红</i>
</body>
</html>
5、基础选择器优先级：
通配符-标签-类-id（后面覆盖前面）
三、基础字体和文本样式
1、基础字体样式
(1)字体大小：font-size
(2)字体粗细：font-weight
(3)字体样式：font-style
(4)字体类型：font-family
(5)字体类型：font属性连写
<!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>字体</title>
<style>
p{
/* 字体大小 */
font-size: 30px;
/* 粗细100~900
400正常 normal
700加粗 bold*/
font-weight:bold ;
/* 字体样式（是否倾斜） */
font-style: italic;
/* 字体系列 */
font-family: "华文彩云","黑体"，"宋体";}
.p1{/* 复合.属性（简写，连写）
font :style weight size family;*/
font: italic bold 30px 黑体;}
</style>
</head>
<body>
对比字
<p>
字体：
大小，粗细，字体样式（是否倾斜）
</p>
<p class="p1">复合属性（简写，连写）</p>
</body>
</html>
2、基础文本样式
（1） 首行缩进
（ 1em = 当前标签的font-size的大小）
text-indent: 2em;
（2）文本水平对齐方式
text-align: center;
（3） 行高
line-height: 40px;
<!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>文本</title>
<style>
p {
/* 首行缩进
1em = 当前标签的font-size的大小*/
text-indent: 2em;
/* 文本水平对齐方式 */
text-align: center;
/* 行高 */
line-height: 40px;
}
a {
/* 文本装饰：去除下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<p> <a href="#">红鲤鱼与绿鲤鱼与驴</a>
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>
四、进阶选择器
1、复合选择器
（1）后代选择器（选择器中间用空格隔开）
<!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>后代选择器</title>
<style>
li{background-color: aqua;}
/* 后代选择器 */
ul span{color: beige;}
ol li{font-size: 30px;}
</style>
</head>
<body>
<ul>
<li>sssss</li>
<li>fcfkkkk</li>
<li>ssss<span>sss</span></li>
<li>aaaa<span>aa</span></li>
</ul>
<span>2222</span>
<ol>
<li>字体大小改成30px</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
（2）子代选择器（选择器中间用>隔开）
<!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>子代选择器</title>
<style>
/* 把p标签的span中的文字改成30px */
p span{font-size: 30px;}
/* 把sa改成红色*/
/* 子选择器 */
p>span{color: red;}
</style>
</head>
<body>
<p>
<span>sa</span>sacasdasdaa
<b>asdadas<span>zczdfzfds</span>qetetwe</b>
</p>
</body>
</html>
2、并集选择器(同时选择多组标签，设置相同的样式。用,隔开)
<!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>并集</title>
<style>
.p1,
.a1{
color: red;
}
</style>
</head>
<body>
<p class="p1">这是p1</p>
<a href="#" class="a1">这是a1</a>
<p class="p3">这是p3</p>
</body>
</html>
3、交集选择器（选中页面中 同时满足 多个选择器的标签，选择器紧挨着）
<!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>交集选择器</title>
<style>
/* 交集选择器 */
p.a{
/* p标签，class是a */
color: green;
}
</style>
</head>
<body>
<p class="a">
p标签，class a
</p>
<p class="b">
p class="b"
</p>
<span class="a">
p class="a"
</span>
</body>
</html>
4、hover伪类选择器
（1）:hover 选中鼠标悬停在元素上的状态，设置样式
（2）:link 未访问的链接
（3）:active 激活之后（点击之后,按着不松）
（4）:visited 已访问的链接
<!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>hover伪类选择器</title>
<style>
/* 鼠标悬停 */
h1:hover{
color: red;
background-color: aqua;
text-decoration: underline;
}
/* 未访问的链接 */
.a2:link{
color: royalblue;
}
/* 激活之后（点击之后,按着不松） */
.a1:active{
text-decoration: none;
}
/* */
.a3:visited{
color: gray;
}
</style>
</head>
<body>
<h1>这是h1,移入变色</h1>
<a href="and.html" class="a1">百度</a>
<a href="jiaoji.html" class="a2">交集</a>
<a href="son.html" class="a3">子代</a>
<a href="childen.html" class="a4">后代</a>
</body>
</html>
（5）伪元素
::after 在后面添加东西
::before 在前面添加东西
ps：
必须设置content属性才能生效
伪元素默认是行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
h1::after {
content: "这是添加的文字";
}
h2::before {
content: url(img/bg1.png);
vertical-align: middle;
}
</style>
</head>
<body>
<h1></h1>
<h2>在前面加一个图片</h2>
</body>
</html>
6、属性选择器（设置具有某种属性的标签的样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 有name属性 */
p[name]{
color: red;
}
p[class=zhangsan]{
color: aqua;
}
/* 包含指定单词 */
p[class~=red]{
background-color: blue;
}
p[class|=wangwu]{
font-size: 30px;
}
p[class^=p]{
font-family: 'Courier New', Courier, monospace;
}
p[class$=n]{
font-style: italic;
}
p[class*=a]{
font-weight: bold;
}
</style>
</head>
<body>
<p class="p1" name="aaa">aaaaaaa</p>
<p class="p2">想回家开门了空间</p>
<p class="zhangsan">发的vvvv需v发生v选择</p>
<p class="lisi red">这边发给谁知道该S个V</p>
<p class="wangwu-aaa11">小窗发你会让他就能放下电话给巴萨</p>
<p class="zhaoliu">但每个克里斯洛克面临困境</p>
</body>
</html>
7、兄弟选择器
（1）相邻兄弟选择器（选择器之间用+隔开）
（2）通用兄弟选择器（选择器之间用~隔开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<style>
/* 相邻兄弟选择器，只选择紧跟的元素，只选择下边的第一个 */
.li1+li{
color: red;
}
/* 通用兄弟选择器
会选择所有后面的对应兄弟元素
*/
li2~li{
font-weight: bold;
}
</style>
</head>
<body>
<li class="li1">1</li>
<li class="li2">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</body>
</html>
8、结构伪类选择器
| 选择器 | 说明 |
|---|---|
| E:first-child{ } | 匹配父元素中第一个子元素，并且是E元素 |
| E:last-child{ } | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){ } | 匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){ } | 匹配父元素中倒数第n个子元素，并且是E元素 |
ps：n的注意点
1、n为0、1、2、3、4、5、6、…
2、通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n或even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5 |
| 找到从第5个往后 | n+5 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style>
.a>p:first-of-type {
color: red;
}
.a>div:last-of-type {
color: rebeccapurple;
}
.a div:nth-child(2) {
background-color: aquamarine;
}
.a div:nth-last-child(2) {
background-color: rgb(79, 114, 102);
}
/* odd奇数行 */
table tr:nth-child(odd) {
background-color: blue;
}
/* even偶数行 */
table tr:nth-child(even) {
background-color: rgb(172, 172, 223);
}
/* 前两个 */
.a2 p:nth-child(-n+2) {
font-size: 50px;
}
/* 第二个和第二个以后的 */
.a2 p:nth-child(n+2) {
color: yellow;
}
/* 3的倍数 */
table tr:nth-child(3n) {
background-color: red;
}
.a2 p:nth-last-child(-n+2) {
color: green;
}
</style>
</head>
<body>
<div class="a">
<p>sss</p>
<p>aaa</p>
<div class="a1">
<p>aaaaa</p>
<p>大户和i和i</p>
</div>
<div class="a2">
<p>啊外号</p>
<p>挖矿</p>
<p>韩会计</p>
<p>即哦豁；偶海鸥</p>
<p>互利互惠</p>
</div>
<p>kkkkkkk</p>
</div>
<table border="1" width="500px" height="300px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
五、背景相关属性
1、背景颜色：background-color（bgc）
2、背景图片：background-image（bgi）
3、背景平铺：background-repeat（bgr
4、背景位置：background-position（bgp）
5、背景相关属性连写：background：color image repeat position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.p1{
/* 背景颜色 */
background-color: aqua;
}
body{height: 732px;
/* 背景图片 */
background-image: url(img/pic.jpeg);
/* 背景平铺
repeat:默认值，水平垂直都重复
no-repeat:不重复
repeat-x:水平重复
repeat-y:垂直平铺*/
background-repeat: no-repeat;
/* 背景的尺寸
contain：把图像扩展至最大尺寸，高度最大
cover：把背景图像扩展至足够大，宽度最大化
px：宽 高
*/
background-size: 800px;
/* 背景的定位 、位置：左 上*/
background-position: 300px 150px;
/* 背景简写
推荐顺序：background:color image repeat position
注意：单独的属性必须放在简写的下面才能生效
*/
background:yellowgreen url(img/pic.jpeg) no-repeat 300px 150px;
background-size: 800px;
}
</style>
</head>
<body>
<p class="p1">背景颜色</p>
</body>
</html>
六、元素显示模式
1、块级元素：div,p,h,table,form,ul,li,ol,dd…
（1）独占一行（一行当中不能同时存在两个元素，p和h1不能在同一行）
（2）可以设置高和宽
2、行内元素：a,b,s,u,i,ins,del,span…
（1）同一行可以设置多个不会独占一行
（2）没法设置高和宽，高和宽默认是内容的高度
3、行内块元素：img、input、textarea、button、select…
可以设置高和宽，一行可以有多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的分类</title>
<style>
.d1{
height: 300px;
background-color: red;
}
a{
height: 800px;
width: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="d1">
div就是一个最典型的块，
div就是一个盒子，用来装其他盒子/其他元素<br>
div，块，高和宽可以设置，宽默认100% 高，默认是内容元素的高度
</div>
<div class="d2">
<a href="#">aaa</a>
<a href="#">bbb</a>
</div>
</body>
</html>
4、元素显示模式
转换成块级元素 display：block
转换成行内块元素 display：inline-block
转换成行内元素 display：inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display</title>
<style>
.p1{
/* 把块变行内:p标签不会换行了*/
display: inline;
}
a{
/* 行内块 */
display: inline-block;
height: 70px;
width: 70px;
background-color: blue;
}
b{
/* 行内变块 */
display: block;
height: 200px;
width: 600px;
background-color: rebeccapurple;
}
.d1{
height: 300px;
width: 600px;
background-color: yellowgreen;
/* 隐藏元素 */
display: none;
}
.d1{
/* 把隐藏元素显示出来 */
display: inline;
}
</style>
</head>
<body>
<p class="p1">
display:
1.block 块 2.inline 行内元素
3.inline-block 行内块 4.none 隐藏
</p>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<b>asd</b>
<div class="d1">
这是一个需要隐藏的块
</div>
</body>
</html>
扫一扫
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
