前端基础:CSS样式选择器
CSS概述
CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局。CSS规则由两个主要的部分组成:1.选择器;2.一条或多条声明;如下所示:
selector {
property: value;
property: value;
property: value;
property: value;
...
}
例如:
h1 {color:red; font-size: 14px;}
CSS的四种使用方式
1.行内式
行内式是在标签的style属性中设定CSS样式,这种方式没有体现出CSS的优势,不推荐使用:
<body>
<p>Paragraph One</p>
<p style="background: red">Paragraph Two</p>
<!--第一种:行内式-->
<p style="color: crimson;">Paragraph Three</p>
</body>
2.内嵌式
内嵌式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中,格式如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第二种方式:内嵌式-->
<style>
Paragraph{
color: black;
background-color: burlywood;
}
</style>
</head>
3.链接式
创建common.css文件,专门用来存放样式,如下所示:
在对应的html文件中,将common.css文件引入即可:
4.导入式
将独立的.css文件应用到html文件中,导入式使用CSS规则引入外部CSS文件,<style>标签也是写在<head>标签中,其语法为:
注意::导入式会在整个网页加载完后才会加载CSS文件,因此会产生一个问题,如果网页比较大则会先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式的一个固有缺陷,使用链接式时与导入式不同的是,它会以网页文件主体加载前加载CSS文件,因此显示出来的网页从一开始就是携带样式效果的,它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点,推荐大家使用链接式。
注意:标签的嵌套规则
- 1.块级标签可以包含行内标签或者某些块级标签,但行内标签不能包含块级标签,只能包含其它行内标签;
- 2.有几个特殊的块级标签只能包含行内标签,不能包含块级标签,如:h1-h6、p标签、dt;
- 3.li内可以包含div;块级标签与块级标签并列、行内标签与行内标签并列;
CSS选择器
1.选择器基础
选择器指明了"{}"中的样式的作用对象,也就是样式作用于网页中的元素:
- 1.通用元素选择器*:所有的标签都被选中;
- 2.标签选择器:匹配所有p标签的样式p {color: red};
- 3.id选择器:匹配指定id的标签 #p {color:red};
- 4.class选择器:匹配指定class的标签 .c1 {color:red},可以多选div.c1 {color:red};
实例如下:可以对块级标签设置长度和高度,不能对行内标签设置长度和高度(它只会适应内容的大小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器,所有div标签都被选中 */
div{
font-family: 华文楷体;
}
/* id选择器:给id=c2的设置样式,id一般不常用(因为id不能重复) */
#n1{
background-color: blueviolet;
font-size: medium;
}
/* class选择器:给class=c1的设置样式 */
.c1{
color: red;
}
/* 或者 */
p.c1{
color: blueviolet;
}
/* 通用元素选择器 */
*{
background-color: burlywood;
font-size: large;
}
/* 注意CSS中的注释与html中的不同 */
</style>
</head>
<body>
<div id="n2">
<div id="n1">
<p>Hello World!</p>
<div class="c1">Hello CSS!</div>
</div>
<p>好好学习!</p>
</div>
<span>天天向上!</span>
<p>paragraph</p>
<div class="c1">
<p class="c2">世界,你好!</p>
<h5>我是h5标签!</h5>
</div>
</body>
</html>
2.组合选择器
1.后代选择器 (不分层级,只让p标签变色) .c2 p{color:red}
2.子代选择器(只在儿子层找) .c2>p{color:red}
3.多元素选择器:同时匹配所有指定的元素 .div,p{color:red}
或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
不常用
3.毗邻选择器(紧挨着,找相邻的,只找下面的,不找上面的).c2+p{color:red}
4.兄弟选择器:同一级别的,离得很近的.c2~p{color:red}
5.多元素选择器: .c2 .c3,.c2~ .c3{ color:red }
说明:
.a1 .a2, .a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
#下面的两个就相当于上面的一个,用逗号隔开可以减少代码的重用
.a1 .a2{
color: blue;
font-size: 15px;
background-color: red;
}
.a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
如下实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/* 后代选择器(部分层级):选择所有类为c1下面的p标签 */
.c1 p{
background-color: black;
}
/* 子代选择器 */
.c2>p{
color: crimson;
}
/* 毗邻选择器 */
.c3+p{
background-color: aquamarine;
}
/* 兄弟选择器:同一级别,离得很近 */
.c3~p{
background-color: blueviolet;
}
/* 多元素选择器:同时匹配所有指定的元素 */
.div,p{
background-color: red;
}
.c1 .c2,a1~p{
color: blue;
font-size: 20px;
background-color: green;
}
/* 下面的两个就相当于上面的一个,用逗号隔开可以减少代码的重用 */
/*.a1 .a2{*/
/*color: blue;*/
/*font-size: 15px;*/
/*background-color: red;*/
/*}*/
/*.a1~p{*/
/*color: blue;*/
/*font-size: 15px;*/
/*background-color: red;*/
/*}*/
</style>
</head>
<body>
<p>Welcome to the world of css!</p>
<div class="c1">
<div class="c2">
<p id="s1">生活不止有眼前的苟且</p>
<div class="c2">
<p>还有诗和远方</p>
</div>
</div>
<p>好好学习,天天向上!</p>
<h1 class="c3">Class One!</h1>
<h2>Class Two!</h2>
</div>
<div class="c1">
<em>牛儿还在山坡吃草</em>
<div class="c2">
<p>放牛的却不知道哪儿去了</p>
<b>王二小®</b>
</div>
</div>
<h5>民族英雄</h5>
<p>英雄</p>
</body>
</html>
3.属性选择器
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。
比如“[cheacked]”,以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
common.css
/*1.匹配所有hello属性的,并且只是在div标签的*/
div[hello]{
color: yellowgreen;
}
/*2.匹配所有hello=world的并且只是在div标签的*/
div[hello=world]{
color: aqua;
}
/*上面的优先级和下面的优先级本应该是一样的*/
/*应该显示下面的,但是,由于上面查找的范围
比下面的范围广,所以它会把上面的也显示了。*/
/*3.匹配所有属性为hello,并且具有多个空格分割的值,*/
/*其中一个只等于world的*/
div[hello~=world]{
color: blueviolet;
}
/*4.匹配属性值以指定值开头的每个元素,
并且是在div标签里的*/
div[hello^=w]{
background-color: aquamarine;
}
div[egon^=w]{
background-color: aquamarine;
}
/*5.匹配属性值以指定值结尾的每个元素 */
div[eric$=a]{
background-color: blueviolet;
}
/*6.匹配属性值中包含指定值的每个元素 */
div[eric*=a]{
background-color: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<div>
<div hello="world">世界,你好</div>
<div hello="world">你好!</div>
<div eric="world">Eric</div>
<div hello="practice">你是谁?</div>
</div>
</body>
</html>
4.伪类
anchor伪类:专用于控制链接的显示效果
a:link(没有接触过的链接),用于定义了链接的常规状态。
a:hover(鼠标放在链接上的状态),用于产生视觉效果。
a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
如下实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
/* 没访问之前 */
a:link{
color: blue;
}
/* 鼠标放在链接上的状态 */
a:hover{
color: chartreuse;
}
/* 访问过后 */
a:visited{
color: red;
}
/* 鼠标点击的时候 */
a:active{
color: aqua;
}
/* 在p标签属性为c2的后面加上内容 */
p.c2:after{
content: 'Hello world!';
color: chartreuse;
}
/* 在所有的p标签的前面加上内容 */
p:before{
content: '我是谁?';
color: chartreuse;
}
span{
background-color: aqua;
width: 100px;
height: 50px;
/* span标签是行内标签,对其设置高度和长度不会起作用;它是
跟着文本内容进行大小变化*/
}
</style>
</head>
<body>
<p>我爱北京*!</p>
<p class="c2">我爱北京*!</p>
<p class="c3">我爱北京*!</p>
<a href="" id="c1">北京*</a>
<span>*</span>
</body>
</html>
before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例:p:before{content:"hello";color:red;display: block;}
5.CSS优先级和继承
- CSS的继承:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如:一个body定义了的颜色值也会应用到段落文本中;
body{color:red;} <p>Hello world</p>
这段文字都继承了由body{color:red;}样式定义的颜色,然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0:
p{color:green}
我们发现只需要给p加个颜色值就能覆盖掉它集成的样式颜色,由此可见:任何显示声明的规则都可以覆盖其继承的样式。此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限的,有些属性不能被继承,如:border、margin、padding、background等。
div {
border:1px solid #222
}
<div>Hello<p>world</p> </div>
- CSS的优先级:所谓优先级,即是指CSS样式在浏览器中被解析的先后顺序,样式表中的特殊性描述了不同规则的权重,它的基本规则是:
1.内联样式表的权重最高 style="- - - - - 1000";
2.统计选择符中的id属性 #id - - - - - - - - 100;
3.统计选择符中的class属性 .class - - - - - - 10;
4.统计选择符中的html标签名 p - - - - - - - - -1;
按这些规则将数字串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到后的顺序逐位比较:
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突,则比较优先权。
4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
继承实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的继承</title>
<style>
/* 给body的所有内容加上样式 */
body{
color: crimson;
border: 2px solid;
border-color: aqua;
}
/* 子类有设置样式就用子类的样式,没有就继承父类的 */
p{
color: red;
}
#s2{
color: blue;
}
/* 不能被继承,它会用自己的边框,而不会用父类的边框 */
p{
border: 5px solid;
}
</style>
</head>
<body>
<div class="c1" id="s1">
<div class="c2" id="s2">
<div class="c3" id="s3">海上生明月</div>
<p>天涯共此时</p>
</div>
</div>
<p>举杯邀明月</p>
<p>对影成三人</p>
</body>
</html>