css样式连接与选择器
作为一名后端开发工程师,也需要掌握一些基本的前端语音,CSS中一些基本的语法也要能够读懂,明白其作用。整理了一些CSS最基本的功能语法和知识点如下
(1)CSS样式的连接
样式:修饰页面/标签
样式的效果为就近原则:当内联样式,内部样式块对象,外部样式表同时作用于同一个标签时,谁离标签近就显示谁的效果
内联样式:内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性
示例代码:
<p style="color:#f00">这一行的字体颜色将显示为红色</p>
内部样式块对象:在HTML文档的head标记里插入一个style块对象。
示例代码:
<style>
body{background:#fff;color:#000;}
p{font-size:14px;}
</style>
外部样式表:先建立外部样式表文件*.css,然后使用HTML的link对象。
①,import引用
示例代码:
<head>
<meta charset="UTF-8">
<title>CSS案例</title>
<!--如何将CSS文件引用到HTML中-->
<style>
@import url("css/TestDemo.css");
</style>
</head>
②,link引用
示例代码:
<link rel="stylesheet" href="*.css" />
(2)基本选择器
注意:选择器优先级,内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式
①标签选择器
②类选择器
③id选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--标签选择器:用标签作为样式选择器
类选择器:用类作为样式选择器,以.开头,后面写类选择器的名称
注意:文件的名称和类的名称不要以数字开头
id选择器:用id作为样式选择器,以#开头,后面写id选择器的名称
-->
<style>
/*标签选择器*/
p{
color: blue;
}
/*类选择器*/
.text{
color: yellow;
}
/*id选择器*/
#text2{
color: pink;
}
</style>
</head>
<body>
<p>日照香炉生紫烟</p>
<p class="text">遥看瀑布挂前川</p>
<p id="text2">飞流直下三千尺</p>
<p>疑是银河落九天</p>
</body>
</html>
id选择器有些地方只能用一次,有些地方可以多次使用(不建议多个标签使用同一个id)。
尽可能的用class,除非极特殊的情况可以用id
(3)高级选择器
1,层级选择器
包括:后代选择器,子选择器,相邻兄弟选择器(很少用),通用兄弟选择器(很少用)
①后代选择器:E F 选择E元素后的子类元素F(子类不仅包括直接子类,还有间接子类)
示例代码:
/*后代选择器*/
body p{
background: orange;
}
②子选择器:E>F 选择E元素后的子类元素F(仅仅是直接子类)
示例代码:
/*子代选择器*/
body>p{
background: orange;
}
③相邻兄弟选择器:E+F 选择紧跟在E元素后面的F元素,它们有一个相同的父级元素,即E,F同级,且F紧跟着E后面
示例代码:
/*相邻兄弟选择器*/
.active+p{
background: orange;
}
④通用兄弟选择器:
示例代码:E~F 选择E元素后面的所有兄弟元素F,它们有一个相同的父级元素,且所有F在E后面
/*通用兄弟选择器*/
.active~p{
background: orange;
}
2,结构伪类选择器
注意:p:nth-child(n),n可以换成关于n的表达式,n会=0,1,2,3… 如p:nth-child(2n-1),即可以选择所有奇数的子类
E F:first-child
E F:last-child
E F:nth-child E的子类中,第n个元素,且这个元素是F,那么生效
E F:first-of-type
E F:last-of-type
E F:nth-of-type E的子类中,第n个F元素生效
示例代码:
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #0000FF;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #8A2BE2;
}
/*body下面的第2个p元素*/
p:nth-child(2){
background: red;
}
/*body下面的第1个p元素*/
p:nth-child(1){
background: #DAA520;
}
p:nth-of-type(3){
background: #FF0000;
}
</style>
3,属性选择器
注意:属性选择器也有优先级,E[attr=val]比E[attr^=val]高
① E[attr] 用来选择有某个属性的元素,无论属性值是什么。
注意:可以设置同时有多个属性时,才会生效。 E[attr1][attr2]
示例代码:
/*存在id属性的a标签*/
a[id] {
background: yellow;
}
②E[attr=val] 用来选择有某个属性,且属性值为设置的值的元素
示例代码:
a[id=first]{
background: #FF0000;
}
③E[attr^=val] 用来选择有某个属性,且属性值以设置的值开头的元素
示例代码:
a[class^=links]{
background:aquamarine;
}
④E[attr$=val] 用来选择有某个属性,且属性值以设置的值结尾的元素
示例代码:
a[class$=links]{
background:aquamarine;
}
⑤E[attr=val]* 用来选择有某个属性,且属性值中包含设置的值的元素
示例代码:
a[class*=links]{
background:aquamarine;
}
4,交集,并集选择器
①交集选择器(一般标签名在前,类名在后):E.F 选择E,F为同一个标签的不同属性,如E是标签名,F是类名
示例代码:
/*交集选择器*/
p.active{ //.active.p or p..active 都不行
background: orange;
}
......
<p class="active">1</p>
②并集选择器: E,F 选择E元素或者F元素
示例代码:
/*并集选择器*/
p,.active{
background: orange;
}
......
<p>1</p>
<h1 class="active">2</h1>