html部分---样式表,选择器;

时间:2024-08-23 08:04:07

<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:#}

</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:#}
</style>

</head>

<body>

<div></div>

</body>

5.复合选择器

(1)“,”代表并列

<style>
div,span{
    color:#F00}

</style>

</head>

<body>

<div>测试一</div>
<span>测试二</span>

html部分---样式表,选择器;

(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选择器