CSS层叠样式表
CSS简介
CSS主要用来调节html标签的各种样式。
对于html大量的标签，我们首先要有寻找标签的能力，才能对各类标签和各个标签进行精准的修改。
所以CSS的学习主要分两块：
- 如何查找标签
- 如何调整样式
css基础语法结构
选择器 {
样式名1：样式值1 样式值2；
样式名2：样式值；
}
/*css的单行和多行注释*/
导入css的多种方式
-
head内的style标签内部编写（学习时使用便于对照）
<head> <style> div {color: blue} </style> </head> -
head内的link标签引入（标准方式）
<head> <link rel="stylesheet" href="mycss.css"> </head> -
标签内部通过style属性直接编写（内联方式，不推荐）
<div style="color: blue">-div-</div>
CSS选择器
css基本选择器
一个标签可以从标签类型，id属性和class属性来划分：
id属性和class属性的区别在于：
- id属性同一个页面的所有id值不能重复，id属性只有一个值，更像是唯一标识。
- class属性同一个页面的所有的class可以用同一个值，且一个标签可以有多个class值，更像是分门别类。
于是按照多种划分方式，也催生了四种基本的选择器：
| 基础选择器 | 语法 |
|---|---|
| 标签选择器 | div {样式} |
| id选择器 | #d1 {样式} |
| 类选择器 | .c1 {样式} |
| 通用选择器 | * {样式} |
其中通用选择器是指对页面中所有标签进行统一的样式添加，通常是做一些简单的样式去除。
.c1{
color:blue
}
#d1{
background-color:pink
}
css组合选择器
有时候，我们基本的选择器并不能满足我们的需求，如博客页面中，我们的文章内容都在一个id为context的div标签下，其中有很多p标签没有id值和class属性。
所以我们的诉求是找到#context下的p标签进行操作。
于是有了组合选择器，可以是任意基础选择器组合在一起。
| 组合选择器 | 语法 | 含义 |
|---|---|---|
| 后代选择器 | div p | div标签下的所有p标签 |
| 儿子选择器 | div>p | div标签下的第一层p标签 |
| 毗邻选择器 | div+p | div标签后紧挨的p标签 |
| 弟弟选择器 | div~p | div标签后面所有p标签 |
<div id="context">
<p>我是第一行</p>
<p>她是第二行 <span>[我行里还有个span]</span></p>
<p>你是第三行</p>
<code>我是代码相关 不是p</code>
<p>他是第四行</p>
<p>汝乃第五行</p>
<div><p>我是p孙子</p></div>
</div>
<p>我是文章外的一行</p>
<p>你是文章外的第二行</p>
<span id="d2" class="c1 c3">我是span标签</span>
以上面这段html页面做实验，分别测试四种组合选择器的对比如下。
分组与嵌套
-
分组：对于多个选择查找的结果可以做统一样式的处理
用逗号隔开的几个选择器统一添加样式
-
嵌套：对于查找到的所有标签再嵌套一层属性查找
选择器后紧贴类选择器进行二次筛选
| 处理方式 | 语法 | 解释 |
|---|---|---|
| 分组 | div,p,#d1 {样式} | 多个选择器的结果统一添加样式 |
| 嵌套 | div.c1 | 一个结果选择器结果下含有c1属性的标签添加样式 |
| 综合使用 | #d1 p.c2 | 查找d1标签的后代p标签中有c2类属性的添加样式 |
属性选择器
标签内是有属性的，有默认属性和自定义属性，css可以通过标签的属性来进行查找。
/*如果有username属性则符合条件*/
[username] {}
/*username属性的值为leethon则符合条件*/
[username='leethon']
/*拥有username属性的div标签，嵌套属性查找*/
div[username] {}
伪类选择器
a标签的四种状态：
- 未访问过的链接 -- link
- 鼠标悬停在链接上 -- hover
- 选定链接时 -- active
- 已访问过的链接 -- visited
a:link {
color: #FF0000
}
a:hover {
color: #FF00FF
}
a:active {
color: #0000FF
}
a:visited {
color: #00FF00
}
伪元素选择器
给标签的元素增加一些特殊的样式，语法为
其他选择器:伪元素选择器
注意：在css中添加的内容包括文本，无法被正常选中，这可以应用隐藏一些文本内容的选中状态。
-
first-letter
常用的给首字母设置特殊样式：
p:first-letter { font-size: 48px; color: red; } -
before
在每个p标签之前插入内容
p:before { content:"*"; color:red; } -
after
在每个p标签之后插入内容
p:after { content:"[?]"; color:blue; }
选择器优先级
不同选择器是可能筛选到同一个标签的，所以多个选择器对同一种样式进行设置，应该生效哪一个呢？
-
对于同一种选择器遵循就近原则
即内联样式最终生效，其次是head标签中离标签最近的样式设置。
<head> <style> div {color: yellow} </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <div style="color: blue">-div-</div> </body>
-
对于不同选择器遵循就精准原则
除了内联样式外，id选择器最终生效，其次是类选择器，最后是标签选择器。
<style> #d1 {color:blue} id选择器优先级最高 .c1 {color:red} 类选择器优先级其次 div {color: yellow} 标签选择器优先级最低 </style>
CSS样式调节
字体样式
| 样式属性 | 属性值 | 含义 |
|---|---|---|
| font-size | 数字px | 字体大小像素值 |
| font-weight | bold\normal\lighter | 自重 |
| color | 色盘、颜色名、rgb | 前景色，文字色 |
| text-align | left\center\right | 文字对齐 |
| text-decoration | none | 主要用于a标签取消下划线 |
| text-indent | 数字px | 首行缩进 |
关于color的取色方式
-
预设的颜色名
-
颜色代号#六个16进制数
如
#FF00FF|#00FF00 -
rgb与rgba
rgb(0255,0255,0~255)表示三原色混合后的结果
rgba多一位参数表示透明度，范围0~1
取色可以使用截图工具或者取色盘：
背景属性
| 样式属性 | 属性值 | 含义 |
|---|---|---|
| background-color | 颜色值 | 背景色 |
| background-image | 图片url | 背景图片 |
| background-repeat | no-repeat\repeat-x | 背景图片重复铺盖 |
| background-position | center center\100px -100px | 背景图片位置调整 |
| background | 以上所有属性值 | 统合背景属性 |
div {
width: 800px; /*div标签设置宽高*/
height: 800px;
background-color: red;
background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");
/*可以索引到图片网页地址*/
/*background-image: url("666.png"); 也可以是本地地址*/
background-repeat: no-repeat; /*不重复*/
/*background-repeat: repeat-x; 只有横向重复*/
/*background-repeat: repeat-y; 只有纵向重复*/
background-position: center center; /*调整图片居中到div标签中*/
/*background: url("666.png") blue no-repeat center center; 所有属性都可以用这一句完成*/
}