CSS基础学习

what？

答：层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅课可以静态的装饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。在新闻发布系统就是使用CSS对页面进行美化的。

知识介绍

选择器

1、ID选择器
对于ID大家其实并不陌生，一个元素的ID是唯一的，而且这个选择是在CSS中经常使用，而且具有较高的级别，一般在CSS中编写使用“#”代表。
例如：

#search {
    height: 27px;
}

<div id="searchres" >
</div>

2、类别选择器
说起类（class）他可是很出名的，而这里的类别选择器也是常用的选择器之一，用class表示，在CSS中，使用“.”进行表示。
例如：

.search {
    height: 27px;
}

<div class="searchres" >
</div>

3、标签选择器
首先要知道什么是标签？
答：标签限定了文档的开始和结束点，在他们之间是文档的头部与主体。例如：p标签，a标签等等
例如：

li{
    text-align:center;
    margin:20px;
}

<li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp; 页</a></li>
<li><a href="#">体育新闻</a></li>
 <li><a href="#">财经新闻</a></li>
<li><a href="#">社会新闻</a></li>

4、后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅有两个，也可以是多个，这个和口头上说的后代有相同的含义。
例如：

#newscontent .con{
    text-indent:2em;/*让段落首行缩进2个字符*/
    line-height:20px;/*行间距*/
}
<div id="newscontent" class="commonfrm">
	<p>
            <asp:Label ID="lblContent" runat="server" Text=""></asp:Label>
        </p>
    </div>

有这么多的选择器，在使用的时候又是如何区分他们的等级的呢？
优先级：ID选择器 > 类选择器 > 标签
后代选择器一般要根据它是由那几个选择器一起使用的。
PS：当样式出现矛盾的时候，与css样式的排列顺序有关系，以后面的顺序为主

链接

在B/S中a标签经常使用，那么对于a标签你有那些了解呢？

• a:link - 正常，未访问过的链接
• a:visited - 已访问过的链接
• a:hover - 鼠标放在链接上时
• a:active - 链接被点击的那一刻

PS:
hover必须在:link和 a:visited之后定义才有效。
active必须在hover之后定义是有效的。

盒子模型

• margin(外边距) - 清除边框外的区域，外边距是透明的。
• border(边框) - 围绕在内边距和内容外的边框。
• padding(内边距) - 清除内容周围的区域，内边距是透明的。
• content(内容) - 盒子的内容，显示文本和图像。 (图中蓝色区域)

在使用的浏览器中一般都会有盒子模型，只需要按一下F12，就可以找到盒子模型啦。
例如：