前言
CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。之前,是没有CSS的,样式和HTML文件写到一起,呈现给用户界面,不出问题还好,如果出了一点小问题,就要大费周折去修改HTML文件,非常的不方便,为此,开发出了CSS,来使内容与样式分离。
选择器
1、类选择器
通过class标记,用于描述一组元素的样式,区别于id选择器,class选择器可以在多个元素中使用;在CSS中,类选择器用“.”来定义。类的第一个字符不能使用数字,因为在Mozilla/Firefox浏览器中不起作用。
2、ID选择器
通过id标记特定的HTML元素,CSS中id选择器以“#”来定义。同样,ID不能以数字开头,因为Mozilla/Firefox浏览器中不起作用。
例1:使id为m_category下的con类下的元素高度为300px。
<div id="m_category" class="con"></div>
#m_category .con {
height:300px;
}
例2:使id为m_category下的con类下的p块内元素宽度为300px。
<div id="m_category" class="con" runat="server">
<p>内容</p>
</div>
#m_category .con p{
width:300px;
}
3、HTM标签选择器
通过body标记。
例:使body内元素的字体大小全是14px。
body {
font-size:14px;
}
优先级:ID选择器>类选择器>HTM标签选择器
使用方法
CSS有三种使用方法,分别是外联式,嵌入式和内联式。
1、外联式(外部样式):将网页链接到外部样式表。
当样式需要被应用到很多页面的时候,则最好使用外部样式表,可以通过更改一个文件来改变整个站点的外观。
2、嵌入式(内页样式):在网页上创建嵌入的样式表。
当单个文件需要特别样式时,可以使用内部样式表。可以在head部分通过<style>标签定义内部样式表。
3、内联式(行内样式):应用内嵌样式到各个网页元素。
当特殊的样式需要应用到个别元素时,可以使用内联式。
CSS布局特点
1、精简代码,降低重构难度。
2、加快网页访问速度。
3、DEO优化。
4、更容易全浏览器兼容。