demo02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
css的基本语法:
选择器{
样式名称:样式的值;
样式名称:样式的值;
样式名称:样式的值;
}
选择器:用来定位页面元素
基本选择器:
标签选择器:直接以标签名称当做选择器 当前文档中的所有该标签都拥有这个样式
ID选择器:#id的名称 唯一标识,唯一定位页面某个元素设定样式,不可重复 注意id值不能用数字开头
类选择器:.类名称 可以给页面的部分元素设置同样的元素
复合选择器:
后代选择器:外层元素选择器 里层元素选择器 中间用空格隔开,所有满足条件的都生效,后代必须为父子代关系的
交集选择器:由两个选择器构成,第一个必须是标签选择器,第二个必须是id或者类选择器 两个选择器直接连在一起,中间没有任何字符(一般不用)
并集选择器:逗号间隔多个基本选择器,给多个元素设定同样的样式
css的引入方式:
行内样式:在标签名上添加style属性,书写样式
内部样式表:head中添加style标签用来书写样式
外部样式表:把css代码单独书写在一个.css的文件中,然后引入到某个html中 推荐使用
href指定要引入文件的路径,后边的是固定跟着的
推荐使用外部样式表:
1.做到html和css完全分离,易于程序的维护
2.单独的样式文件会在浏览器中进行缓存,一定程度上提高页面的访问速度
css的继承:
子标签会直接继承父标签的样式
子标签的样式不会影响父标签
css的优先级:
1.id选择器>类选择器>标签选择器
2.内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）即 行内样式>内部样式表>外部样式表
3.!important 提升优先级,最高优先级法
-->
<style>
p{
/*通过标签选择器定义样式*/
color: gold;
}
.p1{
/*通过类选择器定义样式,设置大小以像素为单位*/
font-size: 30px;
}
#p4{
/*通过id选择器定义样式*/
text-decoration: underline;
}
#p5 img{
/*后代选择器*/
width: 100px;
height: 100px;
}
#p6 #img1{
/*后代选择器--对指定的某个操作*/
width: 100px;
height: 100px;
}
p#pp{
/*交集选择器*/
font-size: 50px;
color: red;
}
h2,font,#ppp{
/*并集选择器*/
font-size: 10px;
}
h1{
/*内部样式表添加样式*/
color: aqua;
}
</style>
<!--css外部引入 href指定要引入文件的路径-->
<link href="css/demo02.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>1111111</p>
<p class="p1">2222222</p>
<p class="p1">3333333</p>
<p id="p4">4444444</p>
<p id="p5"><!--外层元素选择器-->
<img src="img/02.jpg"/><!--内层元素选择器-->
<img src="img/03.jpg" />
<p><!--非直接父子关系,后代选择器不生效-->
<img src="img/01.jpg" />
</p>
</p>
<p id="p6">
<img id="img1" src="img/02.jpg"/>
<img src="img/03.jpg" /><!--指定img中上边单个元素时不生效-->
</p>
<p><!--不满足不生效-->
<font>交集选择器</font>
</p>
<p id="pp"><!--标签选择器-->
<font>交集选择器2</font>
</p>
<h2>并集选择器</h2>
<font>并集选择器</font>
<p id="ppp">并集选择器</p>
<p style="color: red;font-weight: bold;">行内样式</p>
<p>
行内样式
<font>子标签</font><!--子标签直接继承父标签-->
<font id="ff">子标签</font><!--子标签样式不会影响父标签-->
</p>
<p id="qw" class="pclass">样式的优先级</p>
<h1 style="color:#0000FF ;">优先级</h1><!--行内样式法添加样式-->
</body>
</html>
demo02.css
p{
color: blueviolet;
font-weight: bold;
}
#ff{
color: blue;
font-size: 30px;
}
#qw{
/*通过id选择器添加样式*/
color: yellow;
}
.pclass{
/*通过类选择器添加样式*/
color: yellowgreen;
}
p{
/*通过标签选择器添加样式*/
color: palevioletred;
}
h1{
/*外部样式表添加样式*/
color: peru !important;
}
