一、什么是css?
- css指的是层叠样式表(Cascading Style Sheets)
- css描述了如何在屏幕、纸张或其他媒体上显示HTML元素
- css节省了大量工作。它可以同时控制多张网页的布局
二、css语法
css规则集(rule-set)由选择器和声明块组成:
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
实例:
将所有的<p>标签元素都居中对齐,并带有红色文本颜色:
p{
color:red;
text-align:center;
}
三、css选择器
css选择器用于“查找”(或选取)要设置样式的HTML元素。
css选择器分为五类:
- 简单选择器(根据标签名、id、类来选取元素)
- 组合器选择器(根据它们之间的特定关系来选取元素)
- 伪类选择器(根据特定状态选取元素)
- 伪元素选择器(选取元素的一部分并设置其样式)
- 属性选择器(根据属性或属性值来选取元素)
1、简单选择器
(1.)元素选择器
元素选择器根据元素名称来选择HTML元素。
实例
页面上的所有<p>元素都居中对齐,并且文本颜色为红色:
p{
text-align:center;
color:red;
}
(2.)id选择器(#)
id选择器使用HTML元素的id属性来选择特定元素。
元素的id在页面中是唯一的,因此id选择器用于选择一个唯一的元素!
要选择具有特定id的元素,请写一个井号(#),后跟该元素的id。
实例
html代码
<div id="para1">id选择器</div>
css代码
#para1{
text-align:center;
color:red;
}
注意:id名不能以数字开头!
(3.)类选择器( . )
类选择器选择有特定class属性的HTML元素。
如需选择拥有特定class的元素,请写一个英文句号(.),后面跟类名。
实例
<div class="center">css类选择器</div>
.center{
text-align:center;
color:red;
}
注意:类名不能以数字开头!
(4.)通用选择器(*)
通用选择器(*)选择页面上的所有HTML元素。
*{
text-align:center;
color:red;
}
2、组合器选择器
css中有四种不同的组合器:
- 后代选择器(空格)
- 子代选择器(>)
- 相邻兄弟选择器(+)
- 后续兄弟选择器(~)
- 交集选择器
- 并集选择器( , )
(1.)后代选择器(空格)
后代选择器匹配属于指定元素后代(里边嵌套的元素)的所有匹配元素。
定义的时候用 空格 隔开。
实例
为div标签下所有h1节点设置为红色文本样式
div h1{
color:red;
}
<div>
<h1>儿子标题</h1>
<span><h1>孙子标题</h1></span>
<h1>儿子标题</h1>
</div>
(2.)子代选择器(>)
子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。
实例
为div标签下所有h1儿子节点设置为红色文本样式
div>h1{
color:red;
}
<div>
<h1>儿子标题</h1>
<span><h1>孙子标题</h1></span>
<h1>儿子标题</h1>
</div>
(3.)相邻兄弟选择器(+)
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器(+)选择所有作为指定元素的相邻的同级元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
该实例中只有“段落3。不再div中。”的背景颜色为黄色。
(4.)后续兄弟选择器(~)
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
定义的时候用 ~ 隔开。
实例
为div之后的所有p标签元素设置为黄色文本样式
div ~ p {
background-color: yellow;
}
<div>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>
(5.)交集选择器
选择的元素必须同时满足多个条件才可以被选择,交集选择器就是干这个的。
定义的时候用 标签名.ID名/类名 。
实例
为所有p标签且class为part的段落添加绿色文本样式
p.part {
color: red;
}
<p class="part">段落</p>
<h1 class="part">标题</h1>
(6.)并集选择器
多种元素共享某种属性,这时候就可以使用并集选择器。
定义的时候用 逗号 隔开。
实例
为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式
p, h1, .link, #click {
color: red;
}
<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com/" class="link">打开百度,你就知道!</a>
<button id="click">我是按钮</button>
3、伪类选择器
伪类用于定义元素的特殊状态。
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
(1.)锚伪类
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */
<a href="https://www.baidu.com/">打开百度,你就知道!</a>
注意:推荐使用顺序为link、visited、hover、active
(2.)input伪类
选择器 | 示例 | 示例说明 |
:focus | input:focus | 选择元素输入后具有焦点 |
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:out-of-range | input:out-of-range | 选择元素指定范围外的值 |
:invalid | input:invalid | 选择所有无效值的元素 |
:valid | input:valid | 选择所有有效值的元素 |
:optional | input:optional | 选择没有"required"属性的元素 |
:required | input:required | 选择含有"required"属性的元素 |
:read-only | input:read-only | 选择只读属性的元素 |
:read-write | input:read-write | 选择可写属性的元素 |
(3.)other伪类
选择器 | 示例 | 示例说明 |
:not(selector) | :not(p) | 选择每个非 <p> 元素的元素 |
:empty | p:empty | 选择所要没有子元素的p元素 |
:first-child | p:first-child | 选择所有p元素的第一个子元素 |
:first-of-type | p:first-of-type | 选择的每个p元素是其父元素的第一个p元素 |
:lang(language) | p:lang(it) | 选择每个lang属性值以“it”开头的<p>元素 |
:last-child | p:last-child | 选择所有p元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p元素是其父元素的最后一个p元素 |
:nth-child(n) | p:nth-child(2) | 选择所有p元素的父元素的正数第二个子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素正数的第二个为p的子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素的父元素的倒数第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
:root | root | 选择元素的根元素 |
:target | #news:target | 选择当前活动的#news元素(单击包含该锚名称的URL) |
4、伪元素选择器
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 <p> 元素之后插入内容。 |
::before | p::before | 在每个 <p> 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
5、属性选择器
选择器 | 例子 | 例子描述 |
---|---|---|
[attribute] | [target] | 选择带有 target 属性的所有元素。 |
[attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
[attribute~=value] | [title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素。 |
[attribute|=value] | [lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素。 |
[attribute^=value] | a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 <a> 元素。 |
[attribute$=value] | a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。 |
[attribute*=value] | a[href*="w3school"] | 选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。 |