一、CSS创建
当读到一个样式表时,浏览器会根据它来格式化(样式化)HTML文档。
样式表插入的方式有三种:
1.外部样式表
2.内部样式表
3.内联样式表
1.1、外部样式表
当样式需要应用于很多页面时,外部样式表是个理性选择。在使用外部样式表时,你可以通过改变一个文件来改变整个站点的外观。
外部样式表每个页面使用<link>标签来链接到样式表。<link>标签处于文档的头部。
如:
<head>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css" />
</head>
浏览器会从文件mystyle.css中读取样式声明,并根据他来格式和HTML文档。
外部样式表可以在任何文本编辑器中编辑。文件不能包含任何的HTML标签。样式表以.css扩展名进行保存。
1.2、内部样式表
当单个文档需要特殊样式时,应该使用内部样式表。内部样式表使用<sytle>标签在文档头部进行定义内部样式表。
如:
<head>
<sytle type = "text/css">
h1 {color : red;}
p {margin-left : 20px;}
</style>
</head>
1.3、内联样式表
由于要将内容和表现混杂在一起,内联样式表会损失掉样式表的许多优势。请慎用此方式,且仅当需要在一个元素(标签)内修改样式时使用此方式。
使用内联样式表,需要在相关标签内使用style属性,style属性可以包含任何CSS属性。
如:
<p style = "color : red; margin-left : 20px;">
你好,世界。
</p>
2、多重样式
如果某些属性在不同的样式表中被相同的选择器定义,那么属性值将会从更具体的样式表中被继承过来。
继承的方式依据于优先级顺序。
如:
外部样式表拥有针对h3选择器的三个属性:
h3 {
color : red;
text-align : left;
font-size : 8pt;
}
内部样式表针对h3的两个属性:
h3 {
text-align : right;
font-size : 20pt;
}
那么假如拥有内部样式表的页面同时和外部样式表链接时,具体样式结果:
color : red;
text-algin : right;
font-size : 20pt;
也就是说如果样式表中同一个选择器中的属性相同,那么将根据优先级顺序来进行具体样式获取。