CSS中关系选择器，属性选择器，伪类选择器，伪元素选择器，分组与嵌套，选择器的优先级，宽度与高度，字体属性 ，文本属性，背景属性，边框，display属性
Ⅰ 关系选择器
【一】定义概览
- 后代选择器
- 儿子选择器
- 毗邻选择器
- 弟弟选择器
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E F | 包含选择符(Descendant combinator) | CSS1 | 选择所有被E元素包含的F元素。 |
| E>F | 子选择符(Child combinator) | CSS2 | 选择所有作为E元素的子元素F。 |
| E+F | 相邻选择符(Adjacent sibling combinator) | CSS2 | 选择紧贴在E元素之后F元素。 |
| E~F | 兄弟选择符(General sibling combinator) | CSS3 | 选择E元素所有兄弟元素F。 |
【二】标签关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
- 通过嵌套层级来表示亲属关系
- 1.对于div1来说：div2、p2、span2都是儿子
- 2.对于div2、p2、span2来说：div1就是父亲
- 3.对于p1来说：div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
- 4.对于span2来说：div2、p2是哥哥 span2是弟弟
- 5.div1内部所有的标签无论层级都可以称之为是div1的后代
ps:判断的时候一定要看层级关系
【三】介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器 */
/* div里面的 所有 span标签变成红色 */
div span {
color: red;
}
/* 儿子选择器 */
/* div 标签内部的所有儿子变色 而孙子辈不会变色*/
/* */
div > span {
color: greenyellow;
}
/* 毗邻选择器 */
/* 同级别紧挨着的下面的第一个 */
div + span {
color: green;
}
/* 弟弟选择器 */
/* 同级别下面的所有span标签 */
div ~ span {
color: burlywood;
}
</style>
</head>
<body>
<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
<p>
这是div里面的 第一个 p 标签
</p>
<p>这是div里面的第二个 p 标签
<span>
这是div标签里面的第二个 p 标签下的 span 标签
</span>
</p>
<span> 这是div里面的第一个 span 标签 </span>
<span> 这是div里面的第二个 span 标签 </span>
</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>
</body>
</html>
【1】后代选择器
- 选择所有被E元素包含的F元素
- 如：选择所有被div 元素包含的span元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器 */
/* div里面的 所有 span标签变成红色 */
div span {
color: red;
}
</style>
</head>
<body>
<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
<p>
这是div里面的 第一个 p 标签
</p>
<p>这是div里面的第二个 p 标签
<span>
这是div标签里面的第二个 p 标签下的 span 标签
</span>
</p>
<span> 这是div里面的第一个 span 标签 </span>
<span> 这是div里面的第二个 span 标签 </span>
</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>
</body>
</html>
【2】儿子选择器
- 选择所有作为E元素的子元素F
- 如：div 标签内部的所有span儿子变色 而孙子辈不会变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 儿子选择器 */
/* div 标签内部的所有儿子变色 而孙子辈不会变色*/
/* */
div > span {
color: greenyellow;
}
</style>
</head>
<body>
<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
<p>
这是div里面的 第一个 p 标签
</p>
<p>这是div里面的第二个 p 标签
<span>
这是div标签里面的第二个 p 标签下的 span 标签
</span>
</p>
<span> 这是div里面的第一个 span 标签 </span>
<span> 这是div里面的第二个 span 标签 </span>
</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>
</body>
</html>
【3】毗邻选择器
- 选择紧贴在E元素之后F元素
- 如：div同级别紧挨着的下面的第一个span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 毗邻选择器 */
/* 同级别紧挨着的下面的第一个 */
div + span {
color: green;
}
</style>
</head>
<body>
<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
<p>
这是div里面的 第一个 p 标签
</p>
<p>这是div里面的第二个 p 标签
<span>
这是div标签里面的第二个 p 标签下的 span 标签
</span>
</p>
<span> 这是div里面的第一个 span 标签 </span>
<span> 这是div里面的第二个 span 标签 </span>
</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>
</body>
</html>
【4】弟弟选择器
- 选择E元素所有兄弟元素F
- 如：div同级别下面的所有span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 弟弟选择器 */
/* 同级别下面的所有span标签 */
div ~ span {
color: burlywood;
}
</style>
</head>
<body>
<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
<p>
这是div里面的 第一个 p 标签
</p>
<p>这是div里面的第二个 p 标签
<span>
这是div标签里面的第二个 p 标签下的 span 标签
</span>
</p>
<span> 这是div里面的第一个 span 标签 </span>
<span> 这是div里面的第二个 span 标签 </span>
</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>
</body>
</html>
Ⅱ 属性选择器
【一】定义概览
- 含有某个属性
- 含有某个属性并且有某个值
- 含有某个属性并且有某个值的某个标签
| 选择符 | 版本 | 描述 |
|---|---|---|
| E[att] | CSS2 | 选择具有att属性的E元素。 |
| E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。 |
| E[att~="val"] | CSS2 | 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 |
| E[att^="val"] | CSS3 | 选择具有att属性且属性值为以val开头的字符串的E元素。 |
| E[att$="val"] | CSS3 | 选择具有att属性且属性值为以val结尾的字符串的E元素。 |
| E[att*="val"] | CSS3 | 选择具有att属性且属性值为包含val的字符串的E元素。 |
| E[att|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 |
- 代码总览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*方式一 ： [type_name] {属性名:属性值} */
[username] {
color: red;
}
/*方式二 ： [type_name="type_value"] {属性名:属性值} */
[username="silence"] {
color: green;
}
/*方式三 ： tag_name[type_name="type_value"] {属性名:属性值} */
div[username="mark"] {
color: deeppink;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="silence">
<input type="text" username="mark">
<p username="silence">这是 p 标签</p>
<div username="mark">这是 div 标签</div>
</body>
</html>
【1】含有某个属性
- 方式一 ： [type_name]
- 所有type_name是username的都变红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*方式一 ： [type_name] {属性名:属性值} */
[username] {
color: red;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="silence">
<input type="text" username="mark">
<p username="silence">这是 p 标签</p>
<div username="mark">这是 div 标签</div>
</body>
</html>
【2】含有某个属性并且有某个值
- 方式二 ： [type_name="type_value"]
- 满足username="silence"条件的变为绿色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*方式二 ： [type_name="type_value"] {属性名:属性值} */
[username="silence"] {
color: green;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="silence">
<input type="text" username="mark">
<p username="silence">这是 p 标签</p>
<div username="mark">这是 div 标签</div>
</body>
</html>
【3】含有某个属性并且有某个值的某个标签
- 方式三 ： tag_name[type_name="type_value"]
- 满足div块标签内的username="mark"条件下的数据变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
方式三 ： tag_name[type_name="type_value"] {属性名:属性值}
div[username="mark"] {
color: deeppink;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="silence">
<input type="text" username="mark">
<p username="silence">这是 p 标签</p>
<div username="mark">这是 div 标签</div>
</body>
</html>
Ⅲ 伪类选择器
【一】定义概览
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:link | CSS1 | 设置超链接a在未被访问前的样式。 |
| E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |
| E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
| E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
| E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 |
| E:lang(fr) | CSS2 | 匹配使用特殊语言的E元素。 |
| E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
| E:root | CSS3 | 匹配E元素在文档的根元素。 |
| E:first-child | CSS2 | 匹配父元素的第一个子元素E。 |
| E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
| E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。 |
| E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:first-of-type | CSS3 | 匹配父元素下第一个类型为E的子元素。 |
| E:last-of-type | CSS3 | 匹配父元素下的所有E子元素中的倒数第一个。 |
| E:only-of-type | CSS3 | 匹配父元素的所有子元素中唯一的那个子元素E。 |
| E:nth-of-type(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-of-type(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:empty | CSS3 | 匹配没有任何子元素（包括text节点）的元素E。 |
| E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
| E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。 |
| E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。 |
| E:target | CSS3 | 匹配相关URL指向的E元素。 |
| @page:first | CSS2 | 设置页面容器第一页使用的样式。仅用于@page规则 |
| @page:left | CSS2 | 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则 |
| @page:right | CSS2 | 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则 |
【二】超链接状态注解
【1】超链接状态顺序
超链接状态顺序：
a:link {}
a:visited {}
a:hover {}
a:active {}
【2】状态解释
E:link { sRules }
设置超链接a在未被访问前的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。
E:visited { sRules }
设置超链接a在其链接地址已被访问过时的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。
E:hover { sRules }
设置元素在其鼠标悬停时的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。
E:active { sRules }
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。
E:focus { sRules }
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
webkit内核浏览器会默认给:focus状态的元素加上outline的样式。
/*# 1.鼠标悬浮*/
p:hover {
/*鼠标移动到p标签上方 字体颜色动态修改为橙色*/
color: orange;
}
/*# 2.获取聚点*/
input:focus {
/*输入框被鼠标左键选中(聚焦) */
background-color: black;
}
/*#3.常态*/
a:link {
/* 常态 */
color: red;
}
/*4.访问之后修改状态*/
a:visited {
/* 访问之后的状态 */
color: burlywood;
}
/*5.鼠标点击，激活*/
a:active {
/* 鼠标点击不松开 激活态 */
color: blue;
}
- 代码总览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 鼠标悬浮态 */
p#p1:hover {
color: deeppink;
}
/* input输入框获取焦点(input被选中) */
/*input:focus {*/
/* background-color: green;*/
/*}*/
/* 常态 */
/*a:link {*/
/* color: red;*/
/*}*/
/* 访问之后的状态 */
/*a:visited {*/
/* color: darkgray;*/
/*}*/
/* 鼠标点击不松开 激活态 */
a:active {
color: deeppink;
}
</style>
</head>
<body>
<p>
(1) tag_name:hover 悬浮会触发样式的修改
(2) tag_name(input):focus 聚焦选中的时候会发生样式的更改
(3) tag_name(a):link 给标签加一个静态的颜色样式
(4) tag_name(a):visited 点击标签过后，给颜色增加新样式
(5) tag_name(a):active 点击标签处于激活状态才会对样式进行修改
</p>
<p ><a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a></p>
<p>username <input type="text"></p>
<p id="p1">这是一个p标签</p>
<script></script>
</body>
</html>
【三】示例
【1】hover 鼠标悬浮会触发样式的修改
- 鼠标悬浮态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 鼠标悬浮态 */
p#p1:hover {
color: deeppink;
}
</style>
</head>
<body>
<p>
(1) tag_name:hover 悬浮会触发样式的修改
(2) tag_name(input):focus 聚焦选中的时候会发生样式的更改
(3) tag_name(a):link 给标签加一个静态的颜色样式
(4) tag_name(a):visited 点击标签过后，给颜色增加新样式
(5) tag_name(a):active 点击标签处于激活状态才会对样式进行修改
</p>
<p ><a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a></p>
<p>username <input type="text"></p>
<p id="p1">这是一个p标签</p>
<script></script>
</body>
</html>
【2】focus 聚焦选中的时候会发生样式的更改
- input输入框获取焦点(input被选中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* input输入框获取焦点(input被选中) */
input:focus {
background-color: green;
}
</style>
</head>
<body>
<p>
(1) tag_name:hover 悬浮会触发样式的修改
(2) tag_name(input):focus 聚焦选中的时候会发生样式的更改
(3) tag_name(a):link 给标签加一个静态的颜色样式
(4) tag_name(a):visited 点击标签过后，给颜色增加新样式
(5) tag_name(a):active 点击标签处于激活状态才会对样式进行修改
</p>
<p ><a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a></p>
<p>username <input type="text"></p>
<p id="p1">这是一个p标签</p>
<script></script>
</body>
</html>
【3】link 给标签加一个静态的颜色样式
- 常态颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 常态 */
a:link {
color: red;
}
</style>
</head>
<body>
<p>
(1) tag_name:hover 悬浮会触发样式的修改
(2) tag_name(input):focus 聚焦选中的时候会发生样式的更改
(3) tag_name(a):link 给标签加一个静态的颜色样式
(4) tag_name(a):visited 点击标签过后，给颜色增加新样式
(5) tag_name(a):active 点击标签处于激活状态才会对样式进行修改
</p>
<p ><a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a></p>
<p>username <input type="text"></p>
<p id="p1">这是一个p标签</p>
<script></script>
</body>
</html>
【4】visited 点击标签过后，给颜色增加新样式
- 访问之后的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 访问之后的状态 */
a:visited {
color: darkgray;
}
</style>
</head>
<body>
<p>
(1) tag_name:hover 悬浮会触发样式的修改
(2) tag_name(input):focus 聚焦选中的时候会发生样式的更改
(3) tag_name(a):link 给标签加一个静态的颜色样式
(4) tag_name(a):visited 点击标签过后，给颜色增加新样式
(5) tag_name(a):active 点击标签处于激活状态才会对样式进行修改
</p>
<p ><a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a></p>
<p>username <input type="text"></p>
<p id="p1">这是一个p标签</p>
<script></script>
</body>
</html>
【5】active 点击标签处于激活状态才会对样式进行修改
- 鼠标点击不松开 激活态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 鼠标点击不松开 激活态 */
a:active {
color: deeppink;
}
</style>
</head>
<body>
<p>
(1) tag_name:hover 悬浮会触发样式的修改
(2) tag_name(input):focus 聚焦选中的时候会发生样式的更改
(3) tag_name(a):link 给标签加一个静态的颜色样式
(4) tag_name(a):visited 点击标签过后，给颜色增加新样式
(5) tag_name(a):active 点击标签处于激活状态才会对样式进行修改
</p>
<p ><a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a></p>
<p>username <input type="text"></p>
<p id="p1">这是一个p标签</p>
<script></script>
</body>
</html>
【四】注解补充
E:first-child { sRules }
匹配父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。
与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。
E:last-child { sRules }
匹配父元素的最后一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。
与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素。
E:only-child { sRules }
匹配父元素仅有的一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
E:nth-child(n) { sRules }
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)
E:nth-last-child(n) { sRules }
匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)
Ⅳ 伪元素选择器
【一】定义概览
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式。 |
| E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式。 |
| E:before/E::before | CSS2/3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E:after/E::after | CSS2/3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E::placeholder | CSS3 | 设置对象文字占位符的样式。 |
| E::selection | CSS3 | 设置对象被选择时的颜色。 |
【二】注解
【1】状态注解
E:first-letter/E::first-letter { sRules }
设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-line
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:first-letter可转化为E::first-letter
E:first-line/E::first-line { sRules }
设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-letter
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:first-line可转化为E::first-line
E:before/E::before { sRules }
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:before可转化为E::before
E:after/E::after { sRules }
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
即E:after可转化为E::after
E::placeholder { sRules }
设置对象文字占位符的样式。
::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder\
E::selection { sRules }
设置对象被选择时的样式。
需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。
【2】示例模板代码
/*1.修改首个字体样式*/
p:first-letter {
color: red;
font-size: 48px;
}
/*2.在文本开头添加内容*/
p:before {
content: '哈哈';
color: blue;
}
/*3.在文本结尾添加内容*/
p:after {
content: '嘿嘿';
color: yellow;
}
【三】代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1.修改首个字体样式*/
p:first-letter {
color: red;
font-size: 55px;
}
/*2.在文本开头添加内容*/
p:before {
content: '骑猪';
color: blue;
}
/*3.在文本结尾添加内容*/
p:after {
content: '大队';
color: yellow;
}
</style>
</head>
<body>
<p>
这是一个测试标签
</p>
<script></script>
</body>
</html>
【1】first-letter 修改首个字体样式
/*1.修改首个字体样式*/
p:first-letter {
color: red;
font-size: 55px;
}
【2】before 在文本开头添加内容
/*2.在文本开头添加内容*/
p:before {
content: '骑猪';
color: blue;
}
【3】after 在文本结尾添加内容
/*3.在文本结尾添加内容*/
p:after {
content: '大队';
color: yellow;
}
【4】图例展示
Ⅴ 分组与嵌套
【一】分组
【1】语法
- 以 , 隔开 对所有指定的一组标签进行增加样式
/*查找div或者p或者span*/
div, p, span {
color: red;
}
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, p {
color: red;
}
</style>
</head>
<body>
<h1>【一】分组</h1>
<p>以 , 隔开 对所有指定的一组标签进行增加样式 </p>
<div class="c1">这是div c1标签</div>
<div class="c1">这是div c3标签</div>
<div class="c2">这是div c2标签</div>
<p class="c1">这是p标签</p>
<span id="span1">这是span标签</span>
<span id="span2">这是span标签</span>
<script></script>
</body>
</html>
【二】嵌套
【1】语法
/*查找id是d1或者class包含c1或者span*/
#d1, .c1, span {
color: red;
}
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.c1 ,span#span1{
color: red;
}
</style>
</head>
<body>
<div class="c1">这是div c1标签</div>
<div class="c1">这是div c3标签</div>
<div class="c2">这是div c2标签</div>
<p class="c1">这是p标签</p>
<span id="span1">这是span标签</span>
<span id="span2">这是span标签</span>
<h1>【二】嵌套</h1>
<p> 以 标签名+属性值确定 每一组标签 进行增加样式</p>
<p>
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
div #d1 查找div内部id是d1的后代标签
div#d1>.c1 查找id是d1的内部class包含c1的儿子标签
</p>
<script></script>
</body>
</html>
【三】代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div, p {*/
/* color: red;*/
/*}*/
div.c1 ,span#span1{
color: red;
}
</style>
</head>
<body>
<h1>【一】分组</h1>
<p>以 , 隔开 对所有指定的一组标签进行增加样式 </p>
<div class="c1">这是div c1标签</div>
<div class="c1">这是div c3标签</div>
<div class="c2">这是div c2标签</div>
<p class="c1">这是p标签</p>
<span id="span1">这是span标签</span>
<span id="span2">这是span标签</span>
<h1>【二】嵌套</h1>
<p> 以 标签名+属性值确定 每一组标签 进行增加样式</p>
<p>
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
div #d1 查找div内部id是d1的后代标签
div#d1>.c1 查找id是d1的内部class包含c1的儿子标签
</p>
<script></script>
</body>
</html>
Ⅵ 选择器的优先级
【一】概述
- !important
- 行内 style 属性
- id选择器
- 类选择器
- 标签选择器
- 通用选择器
【二】选择器相同 书写顺序不同
- 就近原则：谁离得近，就使用谁的样式
【三】选择器精确度越高，优先级越高
- !important > 行内 style 属性 > 行内选择器 > id选择器 > 类选择器 > 标签选择器
- 精确度越高，优先级越高
【四】示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class_p {
color: red;
}
p {
color: green;
}
* {
color: chartreuse;
}
#id_p {
color: darkblue;
}
</style>
</head>
<body>
<h1>四个基础选择器</h1>
<p class="class_p" id="id_p" style="color:deeppink">
!important
style 行内标签样式
id 选择器
class 选择器
标签选择器
通用选择器
</p>
<script></script>
</body>
</html>
- 两两对比即可得出结论
Ⅶ 宽度与高度
- 行级标签无法设置长度和宽度，就算写了也不会生效
【一】定义概览
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| width | CSS1 | 无 | 定义了元素内容区（Content Area）的宽度 |
| min-width | CSS2 | 无 | 定义了元素内容区（Content Area）的最小宽度 |
| max-width | CSS2 | 无 | 定义了元素内容区（Content Area）的最大宽度 |
| height | CSS1 | 无 | 定义了元素内容区（Content Area）的高度 |
| min-height | CSS2 | 无 | 定义了元素内容区（Content Area）的最小高度 |
| max-height | CSS2 | 无 | 定义了元素内容区（Content Area）的最大高度 |
| margin | CSS1 | 无 | 为元素设置所有四个方向（上右下左）的外边距 |
| padding | CSS1 | 无 | 为元素设置所有四个方向（上右下左）的内边距，即内容和元素边界之间的空间 |
【二】代码预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
height: 200px;
width: 100px;
}
/* 行级标签无法设置长度和宽度，就算写了也不会生效 */
span {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<p>这是一个P标签</p>
<span>这是一个SPAN标签</span>
<p>
高度和宽度参数只对块级标签生效而对行级标签元素不生效
height
width
</p>
</body>
</html>
【三】注解
【1】width
width：<length> | <percentage> | auto
默认值：auto
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为 <length> | <percentage> 时
计算值：指定的值
媒 体：视觉
取值：
auto：
无特定宽度值，取决于其它属性值
<length>：
用长度值来定义宽度。不允许负值
<percentage>：
用百分比来定义宽度。百分比参照包含块宽度。不允许负值
说明：
定义元素的宽度。
对于img元素来说，若仅指定此属性，其height值将会根据图片源尺寸进行等比例缩放。
width属性是盒模型的重要组成部分，对于盒模型规则，请参阅box-sizing属性。
对应的脚本特性为：width。
min-width：<length> | <percentage>
默认值：0
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为 <length> | <percentage> 时
计算值：指定的值
媒 体：视觉
取值：
<length>：
用长度值来定义最小宽度。不允许负值
<percentage>：
用百分比来定义最小宽度。不允许负值
说明：
定义元素的最小宽度。
当min-width属性的值小于width时，min-width属性将会被忽略。
当min-width属性的值大于width时，min-width属性将会被忽略，同时width会忽略自己的值定义而使用min-width的值作为自己的使用值。
当min-width属性的值大于max-width时，max-width属性将会被忽略。
对应的脚本特性为：minWidth。
max-width：<length> | <percentage> | none
默认值：none
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为 <length> | <percentage> 时
计算值：指定的值
媒 体：视觉
取值：
none：
无最大宽度限制
<length>：
用长度值来定义最大宽度。不允许负值
<percentage>：
用百分比来定义最大宽度。不允许负值
说明：
定义元素的最大宽度。
当max-width属性的值小于width时，max-width属性将会被忽略，同时width会忽略自己的值定义而使用max-width的值作为自己的使用值。
当max-width属性的值大于width时，max-width属性将会被忽略。
当max-width属性的值小于min-width时，max-width属性将会被忽略。
对应的脚本特性为：maxWidth。
【2】height
height：<length> | <percentage> | auto
默认值：auto
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为 <length> | <percentage> 时
计算值：指定的值
媒 体：视觉
取值：
auto：
无特定高度值，取决于其它属性值
<length>：
用长度值来定义高度。不允许负值
<percentage>：
用百分比来定义高度。不允许负值
说明：
定义了元素内容区（Content Area）的高度
对于img元素来说，若仅指定此属性，其width值将会根据图片源尺寸进行等比例缩放。
width属性是盒模型的重要组成部分，对于盒模型规则，请参阅box-sizing属性。
对应的脚本特性为：height。
min-height：<length> | <percentage>
默认值：0
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为 <length> | <percentage> 时
计算值：指定的值
媒 体：视觉
取值：
<length>：
用长度值来定义最小高度。不允许负值
<percentage>：
用百分比来定义最小高度。不允许负值
说明：
定义元素的最小高度。
当min-height属性的值小于height时，min-height属性将会被忽略。
当min-height属性的值大于height时，min-height属性将会被忽略，同时height会忽略自己的值定义而使用min-height的值作为自己的使用值。
当min-height属性的值大于max-height时，max-height属性将会被忽略。
对应的脚本特性为：minHeight。
max-height：<length> | <percentage> | none
默认值：none
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为 <length> | <percentage> 时
计算值：指定的值
媒 体：视觉
取值：
none：
无最小高度限制
<length>：
用长度值来定义最大高度。不允许负值
<percentage>：
用百分比来定义最大高度。不允许负值
说明：
定义元素的最大高度。
当max-height属性的值小于height时，max-height属性将会被忽略，同时height会忽略自己的值定义而使用max-height的值作为自己的使用值。
当max-height属性的值大于height时，max-height属性将会被忽略。
当max-height属性的值小于min-height时，max-height属性将会被忽略。
对应的脚本特性为：maxHeight。
Ⅷ 字体属性
【一】概述
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| font | CSS1/2 | 有 | 简写属性。定义元素的文本特性 |
| font-style | CSS1 | 有 | 指定元素的文本是否为斜体 |
| font-variant | CSS1 | 有 | 定义元素的文本是否为小型的大写字母 |
| font-weight | CSS1 | 有 | 定义元素文本字体的粗细 |
| font-size | CSS1 | 有 | 定义元素的字体大小 |
| font-family | CSS1 | 有 | 定义元素文本的字体名称序列 |
| font-stretch | CSS3 | 有 | 定义元素的文字是否横向拉伸变形 |
| font-size-adjust | CSS3 | 有 | 定义小写字母x的高度与对象文字字号的比率。 |
【1】font-style 指定文本字体样式为正常，斜体的字体
normal： 指定文本字体样式为正常的字体
italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应oblique
oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
font-style: italic;
【2】font-variant 正常的字体，小型的大写字母字体（只对英文字符生效）
normal： 正常的字体 small-caps： 小型的大写字母字体
font-variant: small-caps;
【3】font-weight 定义元素文本字体的粗细
normal： 正常的字体。相当于数字值400
bold： 粗体。相当于数字值700。
bolder： 定义比继承值更重的值
lighter： 定义比继承值更轻的值
<integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
一般情况下都直接输入数值
font-weight: 100;
【4】font-stretch 定义元素的文字是否横向拉伸变形
normal： 正常文字宽度
ultra-condensed： 比正常文字宽度窄4个基数。
extra-condensed： 比正常文字宽度窄3个基数。
condensed： 比正常文字宽度窄2个基数。
semi-condensed： 比正常文字宽度窄1个基数。
semi-expanded： 比正常文字宽度宽1个基数。
expanded： 比正常文字宽度宽2个基数。
extra-expanded： 比正常文字宽度宽3个基数。
ultra-expanded： 比正常文字宽度宽4个基数。
font-stretch: ultra-condensed;
【5】font-size定义元素的字体大小
font-size：<absolute-size> | <relative-size> | <length> | <percentage>
<absolute-size>： 根据对象字号进行调节。
font-size: 30px;
【6】font-family 定义元素文本的字体名称序列
font-family：[ <family-name> | <generic-family> ] #
<family-name>： 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起
<generic-family>： 字体序列名称。
font-family: "华文楷体";
【二】总代码预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*
font-style
normal： 指定文本字体样式为正常的字体
italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
*/
font-style: italic;
/*
font-variant：normal | small-caps
normal： 正常的字体 small-caps： 小型的大写字母字体
*/
/*font-variant: small-caps;*/
/*
font-weight：normal | bold | bolder | lighter | <integer>
normal： 正常的字体。相当于数字值400
bold： 粗体。相当于数字值700。
bolder： 定义比继承值更重的值
lighter： 定义比继承值更轻的值
<integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
*/
font-weight: 100;
/*
font-stretch：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
normal： 正常文字宽度
ultra-condensed： 比正常文字宽度窄4个基数。
extra-condensed： 比正常文字宽度窄3个基数。
condensed： 比正常文字宽度窄2个基数。
semi-condensed： 比正常文字宽度窄1个基数。
semi-expanded： 比正常文字宽度宽1个基数。
expanded： 比正常文字宽度宽2个基数。
extra-expanded： 比正常文字宽度宽3个基数。
ultra-expanded： 比正常文字宽度宽4个基数。
*/
font-stretch: ultra-condensed;
/*
font-size：<absolute-size> | <relative-size> | <length> | <percentage>
<absolute-size>： 根据对象字号进行调节。以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)， <relative-size>： 相对于父对像中字号进行相对调节。使用成比例的em单位计算。 <length>： 用长度值指定文字大小。不允许负值。 <percentage>： 用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
*/
font-size: 30px;
/*
font-family：[ <family-name> | <generic-family> ] #
<family-name>： 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起
<generic-family>： 字体序列名称。
*/
font-family: "华文楷体";
}
</style>
</head>
<body>
<p>
骑猪大队 测试文本 Silence
</p>
<script></script>
</body>
</html>
Ⅸ 文本属性
【一】概述
【1】文本
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| text-transform | CSS1/3 | 有 | 定义元素的文本如何转换大小写 |
| white-space | CSS1 | 有 | 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。 |
| tab-size | CSS3 | 有 | 定义元素内容中制表符的长度 |
| word-break | CSS3 | 有 | 定义元素内容文本的字间与字符间的换行行为 |
| word-wrap/overflow-wrap | CSS3 | 有 | 定义元素内容文本遇到边界时如何换行 |
| text-align | CSS1/3 | 有 | 定义元素内容的水平对齐方式 |
| text-align-last | CSS3 | 有 | 定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式 |
| text-justify | CSS3 | 有 | 定义使用什么方式实现文本内容两端对齐 |
| word-spacing | CSS1/3 | 有 | 指定单词之间的额外间隙 |
| letter-spacing | CSS1/3 | 有 | 指定字符之间的额外间隙 |
| text-indent | CSS1/3 | 有 | 定义块内文本内容的缩进 |
| vertical-align | CSS1/2 | 无 | 定义行内元素在行框内的垂直对齐方式 |
| line-height | CSS1 | 有 | 定义元素中行框的最小高度 |
| text-size-adjust | CSS3 | 有 | 定义移动端页面中元素文本的大小如何调整 |
【2】文本装饰
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| text-decoration | CSS1/3 | 无 | 简写属性。定义元素文本装饰 |
| text-decoration-line | CSS3 | 无 | 定义元素文本装饰线条位于文本的哪个位置 |
| text-decoration-color | CSS3 | 无 | 指定元素文本装饰线条的颜色 |
| text-decoration-style | CSS3 | 无 | 定义元素文本装饰线条的形状 |
| text-decoration-skip | CSS3 | 有 | 定义元素文本装饰线条必须跳过内容中的哪些部分 |
| text-underline-position | CSS3 | 有 | 定义元素装饰线的位置 |
| text-shadow | CSS3 | 有 | 定义文字是否有阴影及模糊效果 |
【1】text-align 定义元素内容的水平对齐方式
/*
text-align：start | end | left | right | center | justify | match-parent | justify-all
left： 内容左对齐。
center： 内容居中对齐。
right：
内容右对齐。
justify： 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start： 内容对齐开始边界。（CSS3）
end： 内容对齐结束边界。（CSS3）
match-parent： 这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all： 效果等同于justify，不同的是最后一行也会两端对齐。（CSS3） * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
*/
text-align: right; 右对齐
【2】text-indent 自己定义宽度 首行缩进
text-indent：[ <length> | <percentage> ] && hanging? && each-line?
自己定义宽度 首行缩进
text-align: left;
text-indent: 10px;
【3】text-decoration-line 定义元素文本装饰线条位于文本的哪个位置
/*
text-decoration-line：none | [ underline || overline || line-through || blink ]
none： 指定文字无装饰
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线
blink： 指定文字的装饰是闪烁。
*/
text-decoration-line: underline;
【4】text-decoration-color 指定元素文本装饰线条的颜色
text-decoration-color：<color>
text-decoration-color: red;
【5】text-decoration-style 定义元素文本装饰线条的形状
/*
text-decoration-style：solid | double | dotted | dashed | wavy
solid： 实线
double： 双线
dotted： 点状线条
dashed： 虚线
wavy： 波浪线
*/
text-decoration-style: wavy;
【6】text-shadow 定义文字是否有阴影及模糊效果
text-shadow：none | <shadow> [ , <shadow> ]*
none： 无阴影
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>： 设置对象的阴影的颜色。
*/
text-shadow: 10px 10px 5px red;
【二】代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td {
/*
text-align：start | end | left | right | center | justify | match-parent | justify-all
left： 内容左对齐。
center： 内容居中对齐。
right：
内容右对齐。
justify： 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start： 内容对齐开始边界。（CSS3）
end： 内容对齐结束边界。（CSS3）
match-parent： 这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all： 效果等同于justify，不同的是最后一行也会两端对齐。（CSS3） * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
*/
text-align: left;
/*
text-indent：[ <length> | <percentage> ] && hanging? && each-line?
自己定义宽度 首行缩进
*/
text-indent: 10px;
/*
text-decoration-line：none | [ underline || overline || line-through || blink ]
none： 指定文字无装饰
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线
blink： 指定文字的装饰是闪烁。
*/
text-decoration-line: underline;
/*
text-decoration-color：<color>
指定元素文本装饰线条的颜色。
*/
text-decoration-color: red;
/*
text-decoration-style：solid | double | dotted | dashed | wavy
solid： 实线
double： 双线
dotted： 点状线条
dashed： 虚线
wavy： 波浪线
*/
text-decoration-style: wavy;
/*
text-shadow：none | <shadow> [ , <shadow> ]*
none： 无阴影
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>： 设置对象的阴影的颜色。
*/
text-shadow: 10px 10px 5px red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>silence</td>
<td>741741</td>
</tr>
</tbody>
</table>
<script></script>
</body>
</html>
Ⅹ 背景属性
【一】概述
| background | CSS1/3 | 无 | 简写属性。定义元素的背景特性 |
|---|---|---|---|
| background-color | CSS1 | 无 | 定义元素使用的背景颜色 |
| background-image | CSS1/3 | 无 | 定义元素使用的背景图像 |
| background-repeat | CSS1/3 | 无 | 定义元素的背景图像如何填充 |
| background-attachment | CSS1/3 | 无 | 定义滚动时背景图像相对于谁固定 |
| background-position | CSS1/3 | 无 | 指定背景图像在元素中出现的位置 |
| background-origin | CSS3 | 无 | 指定的背景图像计算background-position时的参考原点(位置) |
| background-clip | CSS3 | 无 | 指定对象的背景图像向外裁剪的区域 |
| background-size | CSS3 | 无 | 定义背景图像的尺寸大小 |
/*# 1.背景颜色*/
background-color: red;
/*# 2.背景图片*/
background-image:url("");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
/*是否平铺*/
background-repeat:no-repeat\repeat-x\repeat-y
/*图片位置*/
background-position:left top;
/*背景附着*/
background-attachment: fixed;
【1】background-color 背景颜色
/*
background-color：<color>
定义元素使用的背景颜色。
*/
background-color: red;
【2】background-image 背景图片
/*
background-image：<bg-image> [ , <bg-image> ]*
none： 无背景图。
<image>： 使用绝对或相对地址指或者创建渐变色来确定图像。
*/
background-image: url("111.jpeg");
【3】background-repeat 是否平铺
/*
background-repeat： 指定背景图像如何填充。
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
*/
background-repeat: repeat-x;
【4】background-position 图片位置
/*
background-position： 指定背景图像在元素中出现的位置。
<percentage>： 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
<length>： 用长度值指定背景图像在元素中出现的位置。可以为负值。
center： 背景图像横向或纵向居中。
left： 背景图像从元素左边开始出现。
right： 背景图像从元素右边开始出现。
top： 背景图像从元素顶部开始出现。
bottom： 背景图像从元素底部开始出现。
*/
background-position: top;
【5】background-size 指定背景图像尺寸
background-size： 指定背景图像尺寸。
<length>： 用长度值指定背景图像大小。不允许负值。
<percentage>： 用百分比指定背景图像大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
*/
background-size: auto;
【二】总代码预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 4000px;
height: 4000px;
/*
background-color：<color>
定义元素使用的背景颜色。
*/
background-color: red;
/*
background-image：<bg-image> [ , <bg-image> ]*
none： 无背景图。
<image>： 使用绝对或相对地址指或者创建渐变色来确定图像。
*/
background-image: url("111.jpeg");
/*
background-position： 指定背景图像在元素中出现的位置。
<percentage>： 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
<length>： 用长度值指定背景图像在元素中出现的位置。可以为负值。
center： 背景图像横向或纵向居中。
left： 背景图像从元素左边开始出现。
right： 背景图像从元素右边开始出现。
top： 背景图像从元素顶部开始出现。
bottom： 背景图像从元素底部开始出现。
*/
background-position: top;
/*
background-size： 指定背景图像尺寸。
<length>： 用长度值指定背景图像大小。不允许负值。
<percentage>： 用百分比指定背景图像大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
*/
background-size: auto;
/*
background-repeat： 指定背景图像如何填充。
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
*/
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
</div>
<script></script>
</body>
</html>
ⅩⅠ 边框
【一】概述
| border | CSS1 | 无 | 简写属性。定义元素边框的外观特性。参阅outline属性 |
|---|---|---|---|
| border-width | CSS1 | 无 | 简写属性。定义元素的边框厚度 |
| border-style | CSS1 | 无 | 简写属性。定义元素的边框样式 |
| border-color | CSS1 | 无 | 简写属性。定义元素的边框颜色 |
| box-shadow | CSS3 | 无 | 定义元素的阴影 |
| border-radius | CSS3 | 无 | 简写属性。定义元素的圆角 |
| border-image | CSS3 | 无 | 简写属性。定义将图像应用到元素的边框上 |
| border-image-source | CSS3 | 无 | 定义元素边框样式所使用的图像。 |
| border-image-slice | CSS3 | 无 | 用以指定从哪 4 个位置分割图像（遵循上右下左的顺序） |
| border-image-width | CSS3 | 无 | 定义元素边框图像的厚度 |
| border-image-outset | CSS3 | 无 | 定义边框图像从边框边界向外偏移的距离 |
| border-image-repeat | CSS3 | 无 | 定义分割图像怎样填充边框图像区域 |
/*# 1.自定义调整每个边的边框*/
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
/*# 2.统一调整每个边的边框*/
border: 5px solid black; 顺序无所谓 只要给了三个就行
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
/*# 3.画圆*/
border-radius: 50%
# 如果长宽一样那么就是圆 不一样就是椭圆
【1】border-color 指定边框颜色
/* border-color : 指定边框颜色 */
border-color: red;
【2】border-width 指定边框宽度
/* border-width : 指定边框宽度
<length>： 用长度值来定义边框的厚度。不允许负值
medium： 定义默认厚度的边框。计算值为3px
thin： 定义比默认厚度细的边框。计算值为1px
thick： 定义比默认厚度粗的边框。计算值为5px
*/
border-width: 20px;
【3】border-style 指定边框造型
/*
none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
hidden： 隐藏边框。
dotted： 点状轮廓。
dashed： 虚线轮廓。
solid： 实线轮廓
double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓。
ridge： 3D凸槽轮廓。
inset： 3D凹边轮廓。
outset： 3D凸边轮廓。
*/
border-style: outset;
【4】box-shadow 指定边框阴影
/*
box-shadow：none | <shadow> [ , <shadow> ]*
none： 无阴影
<length>①： 第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
<length>②： 第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
<length>③： 第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
<length>④： 第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩 <color>： 定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset： 定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
*/
box-shadow: 10px 10px 10px 10px;
- 上面四个属性结合
【5】border-radius 定义元素的圆角
/*
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
border-top-left-radius: 55pt 25pt;
border-top-right-radius: 55pt 25pt;
border-bottom-right-radius: 55pt 25pt;
border-bottom-left-radius: 55pt 25pt;
*/
border-radius: 50%;
【6】border-image 定义将图像应用到元素的边框上
border-image: url("111.jpeg");
【7】border 属性支持一次性全部定义
/* border 属性支持一次性全部定义 */
}
p {
width: 400px;
height: 400px;
/* border : width style color*/
border: 2px dotted green;
}
【二】总代码预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
/* border-color : 指定边框颜色 */
border-color: red;
/* border-width : 指定边框宽度
<length>： 用长度值来定义边框的厚度。不允许负值
medium： 定义默认厚度的边框。计算值为3px
thin： 定义比默认厚度细的边框。计算值为1px
thick： 定义比默认厚度粗的边框。计算值为5px
*/
border-width: 20px;
/*
none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
hidden： 隐藏边框。
dotted： 点状轮廓。
dashed： 虚线轮廓。
solid： 实线轮廓
double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓。
ridge： 3D凸槽轮廓。
inset： 3D凹边轮廓。
outset： 3D凸边轮廓。
*/
border-style: outset;
/*
box-shadow：none | <shadow> [ , <shadow> ]*
none： 无阴影
<length>①： 第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
<length>②： 第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
<length>③： 第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
<length>④： 第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩 <color>： 定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset： 定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
*/
box-shadow: 10px 10px 10px 10px;
/*
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
border-top-left-radius: 55pt 25pt;
border-top-right-radius: 55pt 25pt;
border-bottom-right-radius: 55pt 25pt;
border-bottom-left-radius: 55pt 25pt;
*/
border-radius: 50%;
border-image: url("111.jpeg");
/* border 属性支持一次性全部定义 */
}
p {
width: 400px;
height: 400px;
/* border : width style color*/
border: 2px dotted green;
}
</style>
</head>
<body>
<div>
</div>
<p>
</p>
<script></script>
</body>
</html>
ⅩⅡ display属性
【一】概述
display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline
适用于：所有元素
继承性：无
动画性：否
计算值：指定值，除浮动，绝对定位和根元素外
媒体：视觉
取值：
none：
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：
指定对象为内联元素。
block：
指定对象为块元素。
list-item：
指定对象为列表项目。
inline-block：
指定对象为内联块元素。（CSS2）
table：
指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：
指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：
指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：
指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：
指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：
指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：
指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：
指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：
指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：
指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：
根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：
将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：
将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：
将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
【1】display:inline 让标签具备行内标签的特性(不能设置长宽)
#d1 {
width: 400px;
height: 400px;
background-color: red;
display: inline;
}
<div id="d1">
dsadsadas
</div>
【2】display:block 让标签具备块儿级标签的特性(可以设置长宽)
#p1 {
width: 400px;
height: 400px;
background-color: red;
display: block;
}
<span id="p2">
sadsadad
</span>
【3】display:none 隐藏标签(重点) 页面上不会保留位置也不显示
#p2 {
width: 400px;
height: 400px;
background-color: red;
display: none;
/*visibility: hidden;*/
}
<span id="p2">
sadsadad
</span>
<p>66666</p>
【4】visibility:hidde 也是隐藏标签 但是位置会保留
#p2 {
width: 400px;
height: 400px;
background-color: red;
/*display: none;*/
visibility: hidden;
}
<span id="p2">
sadsadad
</span>
<p>66666</p>
【二】总代码预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
/*
none： 隐藏对象。与visibility属性的hidden值其不为被隐藏的对象保不同，留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
list-item： 指定对象为列表项目。 inline-block： 指定对象为内联块元素。（CSS2） table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2） run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
*/
width: 400px;
height: 400px;
background-color: red;
display: inline;
}
#p1 {
width: 400px;
height: 400px;
background-color: red;
display: block;
}
#p2 {
width: 400px;
height: 400px;
background-color: red;
/*display: none;*/
visibility: hidden;
}
</style>
</head>
<body>
<div id="d1">
dsadsadas
</div>
<hr>
<span id="p1">
sadsadad
</span>
<hr>
<span id="p2">
sadsadad
</span>
<p>66666</p>
<p>
display 属性 可以将块级标签变为行内
</p>
<script></script>
</body>
</html>
