1.行内样式表
行内(内联)样式:在标签的开始标签里面添加style属性,属性值中添加css样式代码
<div style="color:red;background-color: blue;">
我就像一个蘑菇,处在阴暗的地方,随便怎么成长,长的起来就优秀,长不起来就溃败
</div>
好处:哪里需要就写在哪;
缺点:多个样式相同时,需要重复书写。
2.内部样式表
<!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>
<style>
/* 标签选择器 */
div {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<div>.我就像一个蘑菇,处在阴暗的地方,随便怎么成长,长的起来就优秀,长不起来就溃败</div>
</body>
</html>
好处:结构和样式分离, 架构清晰,利于后期代码维护可以批量设置选中的标签样式;
缺点: 结构和样式没有完全分离
3.外部选择器
先创建一个后缀名为.css的文件,在里面通过选择器书写css代码,再在head标签通过link标签引入css文件。
<!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="css/外部样式.css">
</head>
<body>
<div>.我就像一个蘑菇,处在阴暗的地方,随便怎么成长,长的起来就优秀,长不起来就溃败</div>
</body>
</html>
div {
color: red;
background-color: pink;
}
/* css文件 */
好处:样式和结构代码完全分离,一处改处处改;
注意:
相同的选择器三个样式的优先级内联>内部=外部,
内部和外部看代码的顺序 就近原则:谁离标签更近
4.CSS选择器
标签选择器、类选择器、id选择器
(1)标签选择器
通过标签名找到指定标签
<!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>
<!-- 标签选择器,通过标签名找到指定标签 -->
<style>
p{
color: red;
}
div{
color: green;
}
</style>
</head>
<body>
<p>吼吼吼吼或或或或或或或</p>
<div>1112665456455645456</div>
</body>
</html>
(2)类选择器(class选择器)
类选择器:通过标签上的class名找到相应的标签,从而使不同类型的标签可以提取公共样式
格式: .class名{
属性:属性名;
属性:属性名;
属性:属性名;
……
}
注:如果标签上作用多个类选择器的样式,可以设置多个class名,中间用空格隔开。
选择器中间没有空格代表并且的意思,注意p2段落标签
<!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>
<!-- 类选择器
格式: .class名{
属性:属性名;
属性:属性名;
属性:属性名;
……
}
-->
<style>
.op{
color: red;
}
.od{
background-color: pink;
}
/* 选择器中间没有空格代表并且的意思 */
.op.od{
font-size: 30px;
}
</style>
</head>
<body>
<p class="op od">吼吼吼吼或或或或或或或</p>
<p class="od">wwwwwwwwwwwwwwwwwwwww</p>
<p class="op os od">p2p2p2p2p2p2p2p2</p>
<div class="op">1112665456455645456</div>
</body>
</html>
(3) id选择器
id选择器: 通过标签上的id名找到指定标签;
id是唯一的,只能找到页面中指定标签。
格式:#id名{
属性:属性值;
属性:属性值;
}
<!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>
<style>
#p1{
font-size: 50px;
}
</style>
</head>
<body>
<p id="p1">wwwwwwwwwwwwwwwwwwwwww</p>
<p>asdadasdasdasdsadasdsadas</p>
<div>dasdasdasddsadawfeggdfgfdg</div>
</body>
</html>
注:1.id选择器命名规则:
(1)以数字、字母、-和_组成;
(2)不能以数字开头
(3)不能包含特殊符号(因为特殊符号会有特殊的用法)
2.选择器权重:id选择器>类选择器>标签选择器
(注意和外部样式、内部样式、行内样式的差别)