首页 > 代码库 > html部分---样式表，选择器；

html部分---样式表，选择器；

2024-08-18 05:22:41   221人阅读

<1.内联样式,优点：控制精确，缺点：代码重用性差，页面代码乱。>

<div style="background-color:#0F0"></div>

 

<2.内嵌样式，优点：代码重用性好。缺点：控制不精确，写在<head>标签里面>

<style type="text/css">
*{
color:#0F3
}<!--*代表给所有内容改样式-->

</style>

 

<3.外部样式,优点：可以对多个页面，多个标签内容进行改样式；缺点：控制最不精确，新建一个css>

<link href=http://www.mamicode.com/"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选择器

html部分---样式表，选择器；


联系
我们