CSS学习笔记1

CSS技术：
1.简介：他是层叠样式表。Cascading stytle sheet,他的作用是增强网页的显示效果。
目的：使用CSS让网页内容和样式分离，便于网站代码后续的维护。
书写规范：
选择器[属性1: 值1; 属性2: 值2; ]
2.CSS样式的引入方式
CSS不能单独使用，必须和html网页配合使用，引入css有四种方式：链入式、行内式、内嵌式、导入式。
1.行内式：直接在html标记里面使用CSS样式
语法：<div style=“background-color:red”>div的行内式效果</div>
2.内嵌式：

语法：<style type=”text/css”>
           Css 代码
       </style>

位置：一定要放置在标记里面
3.链入式
语法：<link type="text/css" rel="styleSheet" href="简历测试.css" ></link>
步骤： 1创建一个CSS文件
2在网页里面使用link标签来引入外部的CSS文件
4.导入式

<style type=”text/css”>
          @import url(外部css的url);
</style>

链接式和导入式的区别

<link> 1、属于XHTML 2、优先加载CSS文件到页面
@import 1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

1.3.CSS选择器和常用属性
1.标记选择器：直接使用html标记作为选择器
比如：<div>标记选择器</div>
语法: div{属性：值；}
2。类选择器：直接使用html标记的class属性的值作为选择器
比如：<div class=”divclass”>class选择器</div>
语法：.divclass{属性：值;}
3.id选择器：直接使用html标记的id属性的值作为选择器
比如：<div id=”divid”>id选择器</div>
语法：#divid{属性：值；}
4.通配符选择器：让所有的标记显示相同的样式
语法：* {属性：值；}
选择器优先级：id选择器>class选择器>标记选择器>通配符选择器
比如：

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {background-color:red;}
			.divclass {background-color:blue;}
			#divid {background-color: green;}
			* {background-color: gray ;}
		</style>
	</head>
	<body>
		<!--选择器优先级：id选择器>class选择器>标记选择器>通配符选择器-->
		<div>标记选择器</div>
		<div class="divclass">测试--选择器</div>
		<div class="divclass">class选择器</div>
		<div id="divid">id选择器</div>
	</body>