CSS(上)
什么是CSS？
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
CSS的优点
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
CSS的引入方式
行内样式
<p style="color: red">您好</p>
内部样式
<style>
div{
color:red;
}
</style>
<!--我们的<style>标签要写在<body>的外面-->
<div>我就是这么强大</div>
eg:这是个在pycharm中的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
<style>
div{
color:red;
}
</style>
<!--我们的<style>标签要写在<body>的外面-->
</head>
<body>
<div>我就是这么强大</div>
</body>
</html>
外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式
<link rel="stylesheet" href="01.css">
eg:
01.css
div {
color: aqua;
}
css的引入方式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
</head>
<body>
<link rel="stylesheet" href="01.css">
<div>我就是这么强大</div>
</body>
</html
CSS的两大特性
继承性
给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
层叠性
权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性
CSS选择器
基本选择器
元素选择器
你要给那个标签上面加上样式，你就在 <style>中写哪个标签就好了，不过只要在这也页面一样的标签都会被改掉，适用于批量的，统一的样式。
<style>
div{
color: blue;
}
</style>
<div>基本选择器</div>
ID选择器
适用于特定标签设置特定样式
<style>
#d2{
color: red;
}
/* # 代表的就是一个标签的ID*/
</style>
<div id="d2">ID选择器</div>
类选择器
标签中的class属性如果有多个，要用空格分隔,适用于给某些标签设置样式
<style>
/*这个 . 就代表类*/
.c2{
color: red;
}
.c3{
color: blue;
}
.c4{
color: yellow;
}
/*我们可以对不同的类的属性的标签设置不同的颜色*/
</style>
<div class="c2">ID选择器2</div>
<div class="c3">ID选择器3</div>
<div class="c4">ID选择器4</div>
组合选择器
组合选择器
多个选择器之间使用 逗号 隔开。表示选中的页面中的多个标签。一些共性的元素
<style>
.d2,p{
/* class="d2"的div标签和p标签都会变为红色*/
color: red;
}
</style>
<div class="d2">哈哈哈</div>
<p>p标签</p>
<div class="c">9098</div>
后代选择器
使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<style>
div div{
color: red;
}
/*div标签里面的所有div后代都会变为红色*/
</style>
<div>我是你爸爸我真伟大
<div>我是儿子1</div>
<div>我是儿子2
<div>我是孙子</div>
</div>
</div>
儿子选择器
使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代元素p。
<style>
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p{
color: red;
}
</style>
<div>我是你爸爸我真伟大
<div>我是儿子
<p>我是孙子</p>
</div>
</div>
毗邻选择器
多个选择器之间使用 + 隔开。
<style>
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p{
color: blueviolet;
}
</style>
<p>我是个p</p>
<div>我是你爸爸我真伟大</div>
<p>我也是个p</p>
兄弟选择器
多个选择器之间使用 ~ 隔开。
<style>
/*span后面所有的兄弟class="a"的标签*/
/*我也是个p这个标签不是span的兄弟，他就不会显示*/
span~.a{
color: blueviolet;
}
</style>
<div>
<span>哈哈哈</span>
<h1 class="a">标题1</h1>
<h2 class="a">标题2</h2>
<p>我是个p</p>
<h4 class="a">标题4</h4>
</div>
<p class="a">我也是个p</p>
更多选择器
属性选择器
用标签[属性]表示用于选取带有指定属性的元素。
<style>
/*选取带有name属性的元素。*/
div[name]{
color: pink;
}
</style>
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
<style>
/*选取带有name="456"属性的元素。*/
div[name="456"]{
color: pink;
}
</style>
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
通用选择器
使用 ***** 表示通用选择器。
<style>
/*所有标签的颜色都会变为红色*/
*{
color:red;
}
</style>
<div>标签1</div>
<span>标签2</span>
<p>标签3</p>
伪类选择器
<style>
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
</style>
<a href="form表单.html">点我</a>
伪类元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"哈哈哈";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"哈哈哈";
color:blue;
}
before和after多用于清除浮动。
选择器的优先级
有些时候我们可能会给同一个标签设置多个样式，遇到了重叠项的设置又该听谁的呢？这里就要用到选择器的优先级。
行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0