CSS简介
CSS简介
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
CSS的语法规范
使用HTML时，要遵从一定的语法规范，CSS也是一样。
CSS规则由两个主要的部分构成：选择器以及一条或多条声明，声明又包括属性和属性值。每个声明之后用分号结束。
CSS的几种引入方式
行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的语法规范</title> <style> /* 选择器 {样式} */ /* 也可以理解成：给谁修改样式 { 修改什么样式} */ p { /* 修改颜色为蓝色 */ color: blue; /* 修改字体大小为15px */ font-size: 15px; } </style> </head> <body> <p>我要修改p标签里文字的颜色为蓝色</p> </body> </html>
外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link rel="stylesheet" href="mycss.css">
选择器就是根据不同的需求把不同的标签选出来。简单来说，就是选择标签来使用的。
选择器的分类
选择器分为基础选择器和组合选择器两个大类
基础选择器是由单个选择器组成的。
基础选择器包括：标签选择器、类选择器、id选择器和通用选择器
基础选择器
1. 标签选择器(直接按照标签名查找标签)
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
① 作用
标签选择器可以把某一类的标签全部选择出来
② 优点
能够快速为页面中同类型的标签统一设置样式
③ 缺点
不能设计差异化样式，只能选择全部的当前标签
<head> <style> /* 选择器 {样式} */ /* 也可以理解成：给谁修改样式 { 修改什么样式} */ p { /* 修改颜色为蓝色 */ color: blue; /* 修改字体大小为15px */ font-size: 15px; } </style> </head> <body> <p>我要修改p标签里文字的颜色为蓝色</p> <p>我要修改p标签里文字的大小为15px</p> </body>
2. 类选择器(按照标签的class值查找标签)
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
<head> <style> .green { color: aqua; font-size: 15px; } .se { color: blue; font-size: 15px; } </style> </head> <body> <ol> <li class="green">我可以调用类选择器</li> <li class="se">我可以调用类选择器</li> </ol> </body>
注意：
① 类选择器使用"."(英文点号)进行标识，后面紧跟类名（自定义，我们自己命名的）
② 长名称或词组可以使用中横线为选择器命名
③ 不要使用纯数字、中文等命名，尽量使用英文字母来表示
④ 命名要有意义，尽量让别人一眼就知道这个类名的目的
3.id选择器(根据标签的id之精准查找标签)
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中的id选择器以"#"来定义
id选择器只允许一个被调用一次
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d3 {
color: yellow;
}
</style>
</head>
<body>
<span class="c1" id="d3">span</span>
</body>
4. 通用选择器(直接选择页面所有的标签)
在CSS中，通用选择器使用"*"来定义，它表示选取页面中所有元素的标签
通用选择器不需要调用，自动给所有的元素使用样式
<style> * { color: blue; } </style>
CSS组合选择器
预知知识点——我们对标签的嵌套有另外一套说辞
1. 后代选择器(空格)
div span { # 查找div里的所有后代span
color: red;
}
2. 儿子选择器(大于)
div>span { # 查找div里的所有第一级span
color: yellow;
}
3. 毗邻选择器(加号)
div+span { # 查找与div同级别的毗邻的span标签
color: yellow;
}
4.弟弟选择器(小波浪号)
div~span { # 查找div的所有弟弟标签
color: yellow;
}
分组与嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,p,span {
color: yellow;
}
# 将div,p,span多个标签字体统一设置为黄色
选择器可以混合使用
#d1,.c1,span {
color: green;
}
嵌套
div.c1 {
color: red;
}
# 查找class含有c1的div
div#d1 {
color: red;
}
# 查找id是d1的div
.c1 p.c2 {
color: antiquewhite;
}
# 查找含有c1样式值里面的含有c2样式值的p标签
属性选择器
<head> <meta charset="UTF-8"> <title>Title</title> <style> [username] { color: red; } # 将含有usernamer属性的标签都设置为红色 </style> </head> <body> <div username="jason">div</div> <span username="kevin" age=18>span</span> <p username="jason">p</p> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*[username='jason'] {*/ /* color: yellow;*/ /*}*/ # 将username为jason的标签设置为黄色 div[username='jason'] { color: darkcyan; } # 将div标签中username为jason的标签设置为darkcyan </style> </head> <body> <div username="jason">div</div> <span username="kevin" age=18>span</span> <p username="jason">p</p> </body>
伪类选择器
a标签补充说明：针对没有点击过的网址，默认是蓝色，点击过的则为紫色
<style> a:link { /* 把未访问过的链接选出来，链接没有点开之前的颜色*/ color: #333; text-decoration: none; } /* 把已经访问过的链接选出来，链接点开后会变色*/ a:visited { color: chartreuse; } /* 鼠标悬停会变色 */ a:hover { color: red; } /* 正在打开链接且还未打开链接会变色 */ a:active { color: yellow; } </style>
input框获取焦点事件：当input框被鼠标选中之后，框的颜色变成我们设置的颜色
input:focus {
background-color: red;
}
# input获取焦点(被点击)之后变为红色
伪元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;
}
# 将p标签首字母大小设置为48px,颜色设置为红色
before
p:before { content:"*"; color:red; } /*在每个<p>元素之前插入内容*，并且把颜色设置为红色/
after
p:after { content:"？？？"; color:blue; } /*在每个<p>元素之后插入内容？？？，并把颜色设置为蓝色*/
css添加文本无法正常选中
1.选择器相同，导入方式不同
就近原则
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { color: red; } </style> <link rel="stylesheet" href="mycss.css"> # 就近选择此选择器 </head> <body> <div id="d1" class="c1" style="color: blue">好好学习，天天向上</div> </body>
2.选择器不同，导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器
字体属性
字体大小
font-size用来设置字体大小
font-size:14px 24px 28px 36px
字体粗细
font-weight用来设置字体粗细
| 值 | 描述 |
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 color: ＃FF0000
- 一个RGB值 color: RGB(255,0,0)
- 颜色的名称 color: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
ps: 可以利用取色器工具来获取相关的十六进制和RGB值
- pycharm
- 截图功能
文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
| none | 默认,定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
背景属性
背景颜色
background-color: red;
背景图片
background-image: url('1.jpg'); # 括号里为图片路径
背景重复
repeat(默认):背景图片平铺排满整个网页
background-repeat: repeat-x; 背景图片只在水平方向上平铺
background-repeat: repeat-y; 背景图片只在垂直方向上平铺
background-repeat: no-repeat; 背景图片不平铺
背景位置
background-position: left top; 位于左上
background-position: 200px 200px; 距离左侧200px, 距离上边200px
background-position: center center; 位于中心位置
支持简写：
background:#336699 url('1.png') no-repeat left top; # 多个属性空格隔开
