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

HTML样式表的使用

时间:2015-01-19 23:27:48      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:

层叠样式表:CSS Cascading Style Sheet。V2.1 
控制页面样式外观。

一、样式表分三类:
1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。
<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />

2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。
<head>
...
<style type="text/css">
input
{
    border:0px;
    border-bottom:1px solid red;
}
</style>
</head>

3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。
(1)外部样式表的定义

(2)外部样式表的调用


二、样式表的选择器:
内嵌、外部样式表的一般语法:
选择器

   样式=值;
   样式=值;
   样式=值;
   ....

1.基本:
(1)标签选择器:用标记名称来当选择器。
input{.....}
div{...}
span{...}
td{...}
(2)类别选择器:在HTML元素中使用class对元素进行分类,然后使用这个class的值作为选择器。
.class的名{.....}
(3)ID选择器:针对HTLM中相应ID的元素起作用。
#ID的名{...}
#d1{font-size:48px;}
#dd{border:5px dotted red;}

2.复合:
(1)用逗号隔开。——并列关系,同时起作用。
input,#dd,.yellow,.uu
{
    color:gray;
    line-height:28px;

}

(2)用空格隔开。——后代关系。
div uu
{
    background-color:blue;
}

    <input name="txt" type="text" class="uu"/>
    <div>
    <input name="txt" type="text" />
        <input name="txt" type="text" class="uu" value="******"/>
        <span>
            <input name="txt" type="text" class="uu" value="******"/>
        </span>
    </div>
什么是后代???

(3)class二次筛选。
标签选择器.class选择器{....}
input.uu
{
    border:5px double red;
}

例:

对比:div .uu与div.uu的不同。

例题1:内嵌样式表

技术分享

 

例题2:外部样式表

技术分享

 

例题3:选择器

技术分享

技术分享

例题3复合选择器

技术分享技术分享

HTML样式表的使用

标签:

原文地址:http://www.cnblogs.com/wllhq/p/4234927.html

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