CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点。

1.嵌入样式表


	
		CSS四种设置方式
	

	
		

内联样式表


运行结果:

CSS四种设置方式_第1张图片

2.嵌入样式表


	
		CSS四种设置方式
		
	
	
		

嵌入样式表

嵌入样式表

表格
姓名 年龄 性别 职业
张三 22 个体
张三 22 个体
张三 22 个体

运行结果:

CSS四种设置方式_第2张图片

3.外部样式表

css3.html:


	
		CSS四种设置方式
		
		
	
	
		

外部样式表

外部样式表
layout.css:

p{
	color:green;
	background-color:red;
	border:5px solid blue;
	font-size:3cm;
}
b{
	color:yellow;
	background-color:gray;
	border:4px solid yellow;
	font-size:3cm;	
}
 
  
运行结果:

CSS四种设置方式_第3张图片

4.输入样式表

one.css:

p{
	color:yellow;
}
two.css:

b{
	color:yellow;
}

three.css:

@import url(one.css);
@import url(two.css);
p{
	font-size:1cm;
	border:2px solid green;
}
b{
	font-size:1cm;
	border:2px solid green;
}

css4.html:


	
		输入样式表
		
	
	
		

输入样式表

输入样式表

运行结果:

CSS四种设置方式_第4张图片

最后说一点关于四种设置方式的优先级:这个就不用代码作为示例了,大家可以自己简单的实验一下。

内联样式表优先级高于其他三种,其他三种的优先级在于加载顺序,先加载的先运行。



你可能感兴趣的:(★语言,------【CSS】,漫谈CSS)