css(一)之网页概述

css简介

html用于界面布局，css用于美化界面。css最大的价值是结构与样式相分离。
选择器{样式}

css引入方式

• 行内样式表(行内式)
• 内部样式表(嵌入式)
• 外部样式表(链接式)

行内式(控制整个html页面)

将css写到html内部，将css代码抽取出来，单独放入style标签中。

<style>
	div {
		color:red;
		font-size:12px;
	}
</style>

可以控制整个html界面的样式，代码结构清晰。

嵌入式(控制一个标签)

元素内部style属性直接设置样式。

<div style="color:red;font-size:12px;"></div>

修改指定标签，应用范围比较小。

链接式(控制所有界面)

单独写个css文件，之后把css引入html界面中。

步骤：

1. 在外部创建一个css文件，写入样式。

div {
	color:red;
	font-size:12px;
}

2. 使用link标签进行引入。

<link rel="stylesheet" href="css文件路径"></link>

css三大特性

• 层叠性
• 继承性
• 优先级

层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。

原则：

• 样式冲突，就近原则。
• 样式不冲突不会层叠。

继承性

子标签会继承父标签的某些样式。

font:12px/1.5 Microsoft YaHei;

如果子元素没有设置行高，则会继承父元素的行高为1.5。
此时子元素的行高是：当前子元素的大小*1.5。

优先级

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
important 重要的	无穷大