码迷,mamicode.com
首页 > Web开发 > 详细

HTML 中的样式选择器

时间:2017-04-25 22:17:23      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:blog   ext   使用   type   sof   开头   控制   精确   size   

选择器:

1.标签选择器。用标签名做选择器。

 eg.

<style type="text/css">
p   //格式对标签P起作用
{
样式:
}
</style>

 

2.class选择器。都是  .  开头

<style>
.main     /*定义样式*/
{

样式:

}
</style>
<body>

<div class="main">   <!--调用class样式--!>

</div>


</body>

 

3.ID选择器。以“#"开头

 

<style>
#main    /*定义样式*/
{

样式:

}
</style>
<body>

<div id="main">   <!--调用id样式--!>

</div>


</body>

 

4 复合选择器

   a.  用“,”隔开,表示并列

        

<script>
p,span          /*p,span两者同样的样式*/
{

样式:

}

</script>

   b. 用空格隔开表示后代

 

<script>
main p          /*找到使用样式main的标签,在该标签里的p标签使用该样式*/
{

样式:

}

</script>



子代p属于内敛标签,单独设置宽度不起作用,需要设置display=“block”

  c.筛选 “  . ”

 

<script>
 p.sp          /*在标签p中的class="sp"的标签,执行以下样式*/
{

样式:

}

</script>

  

样式表分类

1,内联样式表

   和html联合显示,控制精确。

   例如:<p style="font-size:14px; color:red;">内联样式表</p>

2.内嵌样式表

  作为一个独立区域内嵌在网页里面,必须写在head标签里面

<style type="text/css">
p   //格式对标签P起作用
{
样式:
}
</style>

3.外部样式表:  

   新建一个CSS文件,用来存放样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点击右键——CSS样式表——附加样式表

  <link rel="stylesheet" href="css/style.css" type="text/css">

4.有些标签有些默认的边距,一般写样式表代码都会先去除

  例如:

<style type="text/css">
*   //格式对所有标签起作用
{
margin:0px;
padding:0px;
}
</style>

  

 

 

 

 

 

 

 

 

 

 

 

 

HTML 中的样式选择器

标签:blog   ext   使用   type   sof   开头   控制   精确   size   

原文地址:http://www.cnblogs.com/514929hgy/p/6764451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!