目录
一、行内样式
行内样式：在标签内使用style属性设置样式
style属性值中可以设置多个不同的样式
style的属性值称为声明：属性:属性值;
行内样式的弊端：
（1）样式与内容混合在一起，没有实现分离；
（2）很多相同标签的样式相同，样式代码会重复写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<h2 style="color: red;font-size: 100px; text-align: center;">登高</h2>
<p style="color: green;text-align: center;">风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p style="color: green;text-align: center;">无边落木萧萧下，不尽长江滚滚来。</p>
<p style="color: green;text-align: center;">万里悲秋常作客，百年多病独登台。</p>
<p style="color: green;text-align: center;">艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
</body>
</html>
二、内部样式
内部样式：在网页的head标签内写一个style标签，在style标签内编写样式，使用标签来确定样式设置的对象，然后再写样式代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
/*h2、p等其他标签，表示你要给谁设置样式*/
/*color：red;称之为声明，color称之为属性名，冒号（：）后面的称之为属性值*/
h2{
color: red;
text-align: center;
font-size: 100px;
}
p{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h2>悯农</h2>
<p>春种一粒粟</p>
<p>秋收万颗子</p>
<p>四海无闲田</p>
<p>农民犹饿死</p>
</body>
</html>
三、外部样式
当多个网页需要用到相同的样式时；可通过设置外部样式进行引用
1、创建外部样式步骤
在项目中创建个CSS文件夹，在CSS文件夹中创建CSS文件；
不需要写style标签，直接写要设置的样式。
2、引入外部样式的两种方式
2.1 第一种
在head标签内创建style标签，通过
@import url("文件地址");
引入
2.2 第二种
在head标签内创建style标签，通过link标签获取
<link rel="stylesheet" type="text/css" href="文件地址"/>
h2{
color: red;
font-size: 100px;
text-align: center;
}
p{
color: green;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<style>
@import url("css/Mystyle.css");
</style>
</head>
<body>
<h2>宿洞霄宫</h2>
<p>秋山不可尽，秋思亦无垠。</p>
<p>碧涧流红叶，青林点白云。</p>
<p>凉阴一鸟下，落日乱蝉分。</p>
<p>此夜芭蕉雨，何人枕上闻。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" type="text/css" href="css/Mystyle.css"/>
</head>
<body>
<h2>宿洞霄宫</h2>
<p>秋山不可尽，秋思亦无垠。</p>
<p>碧涧流红叶，青林点白云。</p>
<p>凉阴一鸟下，落日乱蝉分。</p>
<p>此夜芭蕉雨，何人枕上闻。</p>
</body>
</html>
3、style标签内的注释符号
style标签内的注释：/*注释*/
四、样式优先级
p{
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式优先级</title>
<style>
p{
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
<p style="color: red;">样式优先级</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式优先级</title>
<style>
p{
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
<p>样式优先级</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式优先级</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p>样式优先级</p>
</body>
</html>
样式优先级：就近原则，哪种样式离得近，显示哪种样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式优先级</title>
<style>
p{
color: green !important;
}
</style>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
<p style="color: red;">样式优先级</p>
</body>
</html>
无条件优先的属性只需要在属性后面使用
!important。它会覆盖页面内任何位置定义的元素样式。
五、CSS中颜色设置方式
1、使用颜色的英文单词
表示颜色的种类比较少
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色设置方式一</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>设置颜色</p>
</body>
</html>
2、使用十六进制表示法
最常用的颜色表示法
在#后面写6个十六进制数字
十六进制数字有0 1 2 3 4 5 6 7 8 9 A B C D E F
六个十六进制数如果两两相同，可以简写成三个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色设置方式二</title>
<style>
p{
color: #FF0000;
}
</style>
</head>
<body>
<p>颜色设置方式二：十六进制表示法</p>
</body>
</html>
3、使用rgb()表示法
rgb(数字1，数字2，数字3)，每一个数字的范围0-255
数字1：红色
数字2：绿色
数字3：蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色设置方式三</title>
<style>
p{
color: rgb(0,0,255);
}
</style>
</head>
<body>
<p>颜色设置方式三:rgb()表示法</p>
</body>
</html>
4、使用rgba()表示法
rgb(数字1，数字2，数字3，数字4)，前面三个数字表示颜色，范围0-255；最后一个数字表示透明度，范围（0-1）之间的小数
数字1：红色
数字2：绿色
数字3：蓝色
数字4：透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色设置方式三</title>
<style>
p{
color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<p>颜色设置方式四:rgba()表示法</p>
</body>
</html>
六、标签选择器
1、为什么需要标签选择器?
因为要个某个标签中的内容设置样式；首先需要找到这个内容所在的标签。
2、标签选择器
根据标签的名称来找，也就是所谓的标签选择器，使用标签选择器会将网页中所有相同点的标签设置相同的样式
3、class选择器：内选择器
根据类选择器来找，在标签中可以通过class属性来选择样式
类选择器使用（.）开头，其他的样式声明不变
类选择器可以被不同的标签重复使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
.h2color{
color: red;
}
.pcolor{
color: green;
}
</style>
</head>
<body>
<h2 class="h2color">无题·重帏深下莫愁堂</h2>
<p class="pcolor">重帏深下莫愁堂，卧后清宵细细长。</p>
<p class="pcolor">神女生涯原是梦，小姑居处本无郎。</p>
<p class="pcolor">风波不信菱枝弱，月露谁教桂叶香。</p>
<p class="pcolor">直道相思了无益，未妨惆怅是清狂。</p>
</body>
</html>
4、id选择器
在标签中可以使用id属性来选择样式，id选择器使用（#）开头，其他的样式声明不变，
id选择器具有唯一性，只被一个标签使用，且只能使用一次，尤其是在js中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#red{
color: red;
}
#green{
color: green;
}
#yellow{
color: yellow;
}
</style>
</head>
<body>
<h2 id="red">逍遥叹</h2>
<p id="green">岁月难得沉默</p>
<p id="yellow">秋风厌倦漂泊</p>
<p>夕阳赖着不走</p>
<p>挂在墙头舍不得我</p>
</body>
</html>
七、基本选择器的优先级
行内样式>id选择器>class选择器>标签选择器
当基本选择器共存时，会实现样式中的其他声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器的优先级</title>
<style>
p{
color: red;
}
.green{
color: green;
background-color: aliceblue;
}
#blue{
color: blue;
}
</style>
</head>
<body>
<p class="green" id="blue">基本选择器的优先级</p>
</body>
</html>
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
