# CSS真的超级有意思
我搜的百度百科是这样解释的
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
其实吧,CSS就是一个专门搞花里胡哨的工具,能对各个各种元素进行修饰
本文的撰写是基于对B站’ 表严肃 '的教学视频学习
链接CSS文件的方式
- 在html文件中链接CSS文件,在head标签中添加语句
<link rel="stylesheet" href="文件路径">
即可 - 在CSS文件中链接CSS文件,可能有其他做法,但这只说明一种简单的
@import "文件路径";
即可
CSS有很多种选择器
选择器也是有优先级之分的,!important > style内联属性 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器
类选择器
这个嘛就是在标签里面加上class = ' '
,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div class="red">老桃子是个靓仔</div>
<div class="yellow">老桃子天下第一帅</div>
<div class="blue">老桃子全宇宙第一帅</div>
<div class="green blod">老桃子李白贼强</div><!--指定多个类的时候用空格分开-->
</body>
</html>
.red {
color: red;
font-size: 100%;
}
.yellow {
color: yellow;
font-size: 200%;
}
.blue {
color: blue;
font-size: 300%;
}
.green.blod {/*当同时满足两个类的时候才会触发*/
color: green;
font-size: 400%;
text-decoration: underline;
}
ID选择器
这个呀就是在标签里面加上id = ' '
,这个的话一般用于非常非常特殊的,就是一对一的关系的时候,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div id="red">老桃子是个靓仔</div>
<div class="yellow">老桃子天下第一帅</div>
<div class="blue">老桃子全宇宙第一帅</div>
<div class="green blod">老桃子李白贼强</div><!-- 指定多个类的时候用空格分开 -->
</body>
</html>
#red {
color: red;
font-size: 100%;
}
属性选择器
这个的话是在标签面加上属性名 = ' 属性值'
来定义的,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div test = "first">云想衣裳花想容</div>
<div test = "second">春风拂槛露华浓</div>
<div test = "third">若非群玉山头见</div>
<a test = "forth">会向瑶台月下逢</a>
</body>
</html>
[test] {
color: red;
}
[test = "second"] {/*当属性值为second才会生效*/
font-size: 200%;
/*如果在等号面前有一*表示匹配包含该字符的所有属性
如果在等号面前有一^表示匹配以该字符开头的所有属性
如果在等号面前有一$表示匹配以该字符结尾的所有属性*/
}
a[test] {/*选定的是在a标签下的test属性*/
background: green;
}
后代选择器
这个适用于嵌套的场景,就是一层套一层的时候,会把比自己小包括自己所影响,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div class = "first">云想衣裳花想容
<div class = "second">春风拂槛露华浓
<div class = "third">若非群玉山头见
<div class = "forth">会向瑶台月下逢</div>
</div>
</div>
</div>
</body>
</html>
*.first .second{
color: red;/*嵌套定位,以空格分开,选择所有用星号*/
}
相邻选择器
这个的话用于同级的时候,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div class = "first">云想衣裳花想容
<div class = "second">春风拂槛露华浓
<div class = "third">若非群玉山头见
<div class = "forth">会向瑶台月下逢</div>
</div>
<div>大唐</div>
<div>盛世</div>
</div>
<div>诗仙</div>
<div>李白</div>
</div>
</body>
</html>
.second + div{
color: red;/*如果是+则选中同级的下一个*/
}
.third ~ div{
color: yellow;/*如果为~则把所有同级的都选中*/
}
伪类选择器
这个的话是基于标签的,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
<button title = "嘿嘿嘿">Turn to baidu.com</button>
<a href = "http://baidu.com" title = "呜啦啦啦啦">Turn to baidu.com</a>
<input>
</head>
<body>
</body>
</html>
a:link {/*伪类选择器,访问前*/
background: black;
}
a:visited {/*伪类选择器,访问后*/
background: yellow;
}
button:hover {/*伪类选择器,悬停*/
background: red;
}
button:active {/*伪类选择器,摁下时*/
background: black;
}
input:focus {/*伪类选择器,摁下后*/
outline-color: yellow;
background: green;
}
伪元素选择器
这个也是基于标签的,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div>
<p>云想衣裳花想容</p>
<p>春风拂槛露华浓</p>
<p>若非群玉山头见</p>
<p>会向瑶台月下逢</p>
</div>
<q>abcdefghijklmnopqrstuvwxyz</q>
</body>
</html>
div p:first-child {/*伪元素选择器,定义第一个*/
color: red;
}
div p:last-child {/*伪元素选择器,定义最后一个*/
color: yellow;
}
div p:nth-child(2) {/*伪元素选择器,定义参数中的*/
color: blue;
}
q:after {/*伪元素选择器,在末尾添加*/
content: "-----END-----";
}
q:before {/*伪元素选择器,在首部添加*/
content: "-----BEGIN-----";
}
block和inline
这个像是个容器的样式,示例:
</!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>老桃子的测试</title>
<link rel="stylesheet" href="taozi.css">
</head>
<body>
<div>
<div class="block">云想衣裳花想容</div>
<div class="inline">春风拂槛露华浓</div>
<div class="inline-block">若非群玉山头见</div>
<div class="inline-block">会向瑶台月下逢</div>
</div>
</body>
</html>
/*若将display赋值为none则隐藏*/
.block {/*块级元素*/
display: block;/*就是要占一行*/
background: grey;
}
.inline {/*只对左右造成影响*/
display: inline;
background: grey;
}
.inline-block {/*对左右上下都能造成影响*/
display: inline-block;
background: grey;
padding: 50px;
}