<1.内联样式,优点：控制精确，缺点：代码重用性差，页面代码乱。>
<div style="background-color:#0F0"></div>
<2.内嵌样式，优点：代码重用性好。缺点：控制不精确，写在<head>标签里面>
<style type="text/css">
*{
color:#0F3
}<!--*代表给所有内容改样式-->
</style>
<3.外部样式,优点：可以对多个页面，多个标签内容进行改样式；缺点：控制最不精确，新建一个css>
<link href="file:///D|/实训资料/自我练习/新建文件夹/Untitled-5.css" rel="stylesheet" type="text/css" />
样式的格式：
样式名：样式的值
多个样式之间，用；隔开。
选择器
1.*选择器
<style type="text/css">
*{
color:#0F3
}<!--*代表给所有内容改样式-->
</style>
2.id选择器（精确控制）"#"
<head>
<style>
#aa{
color:#0C6}
</style>
</head>
<body>
<div id="aa">精确控制</div>
</body>
3.class选择器，用“.”
<head>
<style>
.a1{
color:#306}
</style>
</head>
<body>
<div class="a1">这是第一个</div>
<div class="a1">这是第二个</div>
<div class="a1">这是第三个</div>
<div class="a1">这是第四个</div>
<div class="a1">这是第五个</div>
</body>
4.标签选择器
<head>
<style>
div{
color:#066}
</style>
</head>
<body>
<div></div>
</body>
5.复合选择器
（1）“，”代表并列
<style>
div,span{
color:#F00}
</style>
</head>
<body>
<div>测试一</div>
<span>测试二</span>
（2）“空格”表示后代
<head>
<style>
#u1 li{
color:#F00}
</style>
</head>
<body>
<ul id="u1">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<body>
（3）“.” 标签选择含有class的
<head>
<style>
div.c1{ <-- div标签里的有class=“c1”的。 -->
color:#0F3}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<span class="c1"></span>
</body>
<!--内联的样式，优先级最高。内嵌其次。
内联，内嵌同时控制一部分内容，以内联为准。-->
<!-- 选择器的优先级，-->
标签选择器的优先级大于*选择器
class选择器优先级大于标签选择器
id选择器优先级大于class选择器
时间： 2024-10-15 02:46:59