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
CSS属性相关(了解)
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定
字体
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
字体大小
p {
font-size: 14px;
}
如果设置成inherit表示继承父元素的字体大小值。
字重（粗细）
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
首行缩进
text-indent: 32px;
将段落的第一行缩进 32像素：
p {
text-indent: 32px;