CSS 初识1

 样式表

一 外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部。





		
	CSS 初识1(外部样式表) 
	


				 

CSS 实例!

这是一个段落。

Hello World!

标题居中

段落居中。

这个标题不受影响

xxxxxxx

浏览器会从文件 1.css 中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

body
{
	background-color:#d0e4fe;
}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
	color:green;
}
#para1            /*id选择器*/
{
	text-align:center;
	color:red;
}
.center			/*class选择器*/
{
	text-align:center;
}
h2.center			/*class选择器*/
{
	text-align:center;
}

效果图

CSS 初识1_第1张图片

二 内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用

CSS 实例!

这是一个段落。

Hello World!

标题居中

段落居中。

这个标题不受影响

xxxxxxx

效果图

CSS 初识1_第2张图片

补充

假如内部样式表和外部样式表在同一个选择器拥有不同属性,比如

外部样式表:h1 { color:red; text-align:left; font-size:8pt; }

内部样式表:h1 { text-align:right; font-size:20pt; }

最终表现的样式表为:h1 { color:red; text-align:right; font-size:20pt; }

即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代

优先级:内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

你可能感兴趣的:(html,CSS)