css基础

浏览数：27 / 时间：2015年06月09日

层叠样式表：CSS Cascading Style Sheet。（V2.1版本有些旧系统不支持）
控制页面样式外观。

一、样式表分三类：
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
{
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>
什么是后代？？？后代就是凡事父辈以后的都是后代而子集值包含下一代

注意：<p>里面不要配div 反之则可以

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

例：

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

前一个中间有空格表示后代后一个没有空格就是筛选的意思

二、样式属性

1、背景与前景

background-color:#90; /*背景色，样式表优先级高*/

background-image:url(路径)/*设置背景图片（默认）*/

background-attachment:fixed;/*背景是固定的，不随字体滚动*/

background-attachment:scroll;/*背景随字体滚动*/

background-repeat:no-repeat;/*no-repeat,不平铺；repeat，平铺repeat-x，横向平铺；repeat-y，纵向平铺*/