层叠样式表:CSS Cascading Style Sheet。V2.1 (3.0版本有些旧系统不支持)
控制页面样式外观。
一、样式表分三类: 1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。
<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> (solid意思是实线)
2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。
<head>
...
<style type="text/css">
input
{
border:0px; border-bottom:1px solid red;
}
</style> </head>
3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。
(1)外部样式表的定义
(2)外部样式表的调用
新建一个css文件,用来放样式表,如果要在HTML文件中调用样式表,需要在HTML文件中点右键--css样式--附加样式表。一般用link连接方式
二、样式表的选择器:
内嵌、外部样式表的一般语法:
选择器
{
样式=值;
样式=值;
样式=值;
....
}
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 { }
<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> 什么是后代???后代即父辈以后的都是后代 而子集值包含下一代 注意:<p>里面不要配div 反之则可以
(3)class二次筛选。 标签选择器.class选择器{....} input.uu { border:5px double red; }
例:
对比:div .uu与div.uu的不同。
中间有空格的表示后代,没有空格的是筛选的意思。