目录
CSS的三种样式
1.行内样式
在标签元素内直接添加style属性来实现对元素样式的设计。
例如下面标红的字体
<h1 style="font: size 20px;color: blue;">行内CSS样式</h1>
2.内部样式
在<head></head>标签元素中直接添加style样式来实现对标签元素h1样式的设计
<head>
<style type="text/css">
h1{color: rgb(5, 252, 252); }
</style>
</head>
3.外部样式
外部样式是通过调用css文件的形式对标签元素进行样式设计,调用css文件时需要用到 link标签,然后附带上type属性。
<link rel="stylesheet" href="com.css" type="text/css">例如这里调用的是名为 com的css文件来对样式进行设计,其中type属性的值要等于text/css。
代码演示如下
<!--html代码段-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式</title>
<link rel="shortcut icon" href="D:/huashan/qianduan/img/wang.jpg" type="image/x-icon"/>
<link rel="icon" href="you.ico" type="image/x-icon"/>
<link rel="stylesheet" href="com.css" type="text/css">
<style type="text/css">
h1{
color: rgb(5, 252, 252);
}
</style>
</head>
<body>
<!-- 优先级:行内>内部样式>外部样式 -->
<h1>外部CSS样式</h1>
<p>外部CSS样式</p>
<h1>内部CSS样式</h1>
<h1 style="font: size 20px;color: blue;">行内CSS样式</h1>
</body>
</html>
<!--css代码段-->
h1{
color: red;
}
p{
color: blue;
font: size 20px;;
}
运行效果如下
CSS选择器
-
类选择器
通过class属性来定义类选择器,在标签元素中添加class属性,再通过css样式来设计标签,
例如在p标签中定义一个名为red的class属性<p class="red">类选择器</p>,然后在css文件中对类标签进行设计,在class属性名的前面需要加“.”。
.red{
color: red;
font-size: small;
}
-
ID选择器
通过id属性来的定义id选择器,在标签元素中添加id属性,再通过css样式来设计标签,例如在p标签中定义一个名为first的id属性<P id="first">ID选择器</P>,然后在css文件中对类标签进行设计,在id属性名的前面需要加“#”。
#first{
font-size: large;
color: coral;
}
代码演示如下
<!-- html代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="class02.css" type="text/css">
</head>
<body>
<!-- 类选择器 -->
<p class="red">类选择器</p>
<!-- ID选择器 -->
<P id="first">ID选择器</P>
</body>
</html>
<!-- css文件 -->
.red{
color: red;
font-size: small;
}
#first{
font-size: large;
color: coral;
}
运行效果如下
-
层次选择器
-
后代选择器
有两个选择符A和B,且B被包含在A中 例如:在body中的所有p标签
body p{
background-color: aqua;
}
为body下面的所有p标签添加背景颜色
-
子选择器
有两个选择符A和B,且B是A的子类,例如:ul下的li标签
ul>li{
background-color: chartreuse;
}
为ul下的li标签添加背景颜色
-
相邻兄弟选择器
在具有class属性的p标签后存在一个p标签,在css文件中通过类选择器名+p即可实现对该标签后的相邻的同级p标签进项操作。
例如:
.action + p{
background-color: beige;
}
在class属性等于action的p标签中,对同级且位于该标签下面的相邻p标签添加背景颜色
-
通用兄弟选择器
在具有class属性的p标签后存在若干个p标签,在css文件中通过类选择器名~p即可实现对该标签后的相邻的同级p标签进项操作。
例如:
.action~p{
background-color: cornflowerblue;
}
在class属性等于action的p标签中,对同级且位于该标签下面的所有p标签添加背景颜色
-
结构伪类选择器
first-child:
选择父级元素下第一个子元素,如果该元素是要定义的标签类型则生效否则不生效。
例如:
p:first-of-type{
background: blue;
}
选择父级元素下的第一个元素如果该元素是p则生效,否则不会有改变
nth-child(n) :
选择父级元素下第n个子元素,同理如果该元素是要定义的标签类型则生效否则不生效。
例如:
p:nth-child(3){
background: black;
}
选择父级元素下的第三个元素如果该元素是p则生效,否则不会有改变
last-child:
选择父级元素下最后一个子元素,同理如果该元素是要定义的标签类型则生效否则不生效。
例如:
ul li:last-child{
background: aqua;
}
选择父级元素ul下的最后一个li元素如果该元素是li则生效,否则不会有改变
first-of-type:
选择body下所有后代元素下的第一个p元素(相对于其他p元素来说),如果有其他元素阻碍也会直接跳过其他元素。
例如:
p:first-of-type{
background: blue;
}
选择body下所有后代元素中的第一个p元素,如果p元素不在第一位也会跳过其他元素选择第一个出现的p元素
nth-of-type(n):
选择body下所有后代元素下的第n个p元素(相对于其他p元素来说),如果有其他元素阻碍也会直接跳过其他元素。
例如:
p:first-of-type{
background: blue;
}
选择body下所有后代元素中的第n个p元素,如果p元素不是第n位也会跳过其他元素选择第n个出现的p元素
last-of-type:
选择body下所有后代元素下的最后一个p元素(相对于其他p元素来说),如果有其他元素阻碍也会直接跳过其他元素。
例如:
p:first-of-type{
background: blue;
}
选择body下所有后代元素中的最后一个p元素,如果最后一位不是p元素也会选择相对于其他p元素来说处在最后一个的p元素
-
属性选择器
A[b]:
选择A元素,且A元素具有b属性
例如:
h1[class]{
color: blanchedalmond;
background-color: blanchedalmond;
}
选择h1元素,且具有class属性
A[b=c]:
选择A元素,且A元素具有b属性且b属性的值等于c
例如:
p[class=text]{
color: aqua;
font-size: 10px;
background-color: aqua;
}
选择p元素 且class属性的值等于text
A[b^=c]:
选择A元素,且A元素具有b属性,且b属性的值是以c开头的(c可以是字符串)
例如:
p[id^=link]{
color: red;
font-size: 30px;
background-color: red;
}
选择p元素,具有id属性,且id属性的值是以link开头的
A[b$=c]:
选择A元素,且A元素具有b属性,且b属性的值是以c结尾的(c可以是字符串)
例如:
li[class$=age]{
background-color: blue;
font-size: 20px;
}
选择li元素,具有class属性,且class属性的值是以age结尾的
A[b*=c]:
选择A元素,且A元素具有b属性,且b属性的值是以c结尾的(c可以是字符串)
例如:
li[class*=id]{
background-color: lawngreen;
font-size:11px;
}
选择li元素,具有class属性,且class的值里具有id