css样式使用方式
css样式写法
<style>
div{
color:red; /*内部样式写法*/
}
</style>
<link rel="stylesheet" href="css文件路径"> <!--外部样式写法-->
</head>
<body>
<p style="color:blue;"></p> <!--内联样式(行内样式)写法-->
<div>
1.内部样式:在head元素中添加一对style标记
2.在style标签中添加样式规则
</div>
<p>
外部样式:创建一个css后缀文件夹
在该文件夹中编写样式规则
在head元素中以link引入
</p>
</body>
</html>
css基础选择器
<!--css选择器写法-->
<!--1.通用选择器-->
<!-- *{...} --> <!--修饰页面所有元素;效率低,尽量少用-->.
<style>
*{
color: red;
}
</style>
<!--2元素选择器-->
<!-- 元素名称{...}--> <!--定义元素名称所对应的一类元素. -->
<style>
div{
color: red;
}
</style>
<!--若同类元素名称需要用到不同样式则用以下选择器-->
<!-- 3.类选择器-->
<!--.类名{...}--> <!--类名定义不能保函数字和特殊字符. -->
<style>
.any{
color: red;
}
.other{
background-color: blue;
}
</style>
</head>
<body>
<any class="any other 类名"></any> <!-- 定义一个或多个元素样式 -->
4.id选择器
#id值{…}
定义id值所对应的唯一元素
5.群组选择器
选择器1,选择器2,选择器3{…}
定义一组选择器的公共样式.
6.后代选择器
选择器1 选择器2 选择器3{…}
依托于后代关系匹配元素.
id群组和后代选择器
<!--通用选择器效率较低,重复较多,尽量不用-->
<style>
#d1,p,span,.mc{/*id,元素,元素,类选择器*/
color:red;
} /*群组选择器简化同类写法*/
/*原本写法:
#d1{color:red;}
p{color:red;}
span{color:red;}
mc{color:red; }*/
#d3 ul li{
color:gray;
font-size:14px; /*这是后代选择器写法*/
}
</style>
</head>
<body>
<div id="d1">练习一</div>
<p>课后练习</p>
<span>课后跟弹</span>
<h2 class="mc">视频</h2>
<div>chu</div>
<h3>shu</h3>
<b>shu</b>
群组选择器
作用:定义一组选择器的公共样式
多个选择器之间用逗号分隔.
语法:选择器1,选择器2…{样式声名}
`<div id="d3">`
<ul>
<li>满减99</li>
<li>满减99</li>
<li>满减99</li>
</ul>
</div>
后代选择器
作用: 依托于后代关系匹配页面的元素.
后代:一级或多余一级的嵌套关系.
语法:选择器1 选择器2 选择器3…{声名样式}
