CSS

CSS

• 层叠样式表，一种用来表现HTML或XML等文件样式的计算机语言。
• 作用：
  * 修饰美化HTML网页
  * 外部样式表可以提高代码复用性从而提高工作效率
  * HTML内容与样式表现分离，便于后期维护

1 基础语法

• 请使用花括号来包围声明
• 如果值为若干单词，则要给值加引号
• 多个声明之间使用分号;分开
• css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

2 导入CSS的三种方式

2.1 内联方式

• 把CSS样式嵌入到html标签当中，类似属性的用法

	 <div style="color:blue;font-size:50px">This is my HTML page. </div>

2.2 内部方式

• 在head标签中使用style标签引入css

	<style type=“text/css”> //告诉浏览器使用css解析器去解析
		div{color:red;font-size:50px}
	</style>

2.3 外部方式

• 将css样式抽成一个单独文件，使用者直接引用

	创建单独文件 div.css
	内容示例：div{color:green;font-size:50px}
	引用语句写在head标签内部
		<link rel="stylesheet" type="text/css" href=“div.css"></link>
	    rel:代表当前页面与href所指定文档的关系
	    type:文件类型，告诉浏览器使用css解析器去解析
	    href:css文件地址

3 CSS选择器

3.1 基本选择器

• 元素选择器：html标签{属性:属性值}

	<style type="text/css">
	    span{color: red;font-size: 100px}
	</style>  

• id选择器：#id值{属性:属性值}

	创建id选择器：
		<div id="s1">hello,everyone!</div>
		<div id="s2">hello,everyone!</div>
	    <div id="s3">hello,everyone!</div>
	根据id选择器进行html文件修饰 
	    <style type="text/css">
			#s1{color: red;font-size: 100px}
			#s2{color: green;font-size: 100px}
			#s3{color: blue;font-size: 100px}
	    </style>

• class选择器：.class名{属性:属性值}

	创建class选择器：
	    <div class="s1">hello,everyone!</div>
	    <div class="s2">hello,everyone!</div>
	    <div class="s3">hello,everyone!</div>
	根据id选择器进行html文件修饰：
	    <style type="text/css">
	        .s1{color: purple;font-size: 100px}
	        .s2{color: pink;font-size: 100px}
	        .s3{color: yellow;font-size: 100px}
	    </style>

• 优先级从高到低：id选择器，class选择器，元素选择器

3.2 属性选择器

• htm标签[属性=‘属性值’]{css属性:css属性值;}
• html标签[属性]{css属性:css属性值;}

3.3 伪元素选择器

• 静止状态 a:link{css属性}
• 悬浮状态 a:hover{css属性}
• 触发状态 a:active{css属性}
• 完成状态 a:visited{css属性}

3.4 层级选择器

	<style type="text/css">
	    #div1 .div11{color:red;}
	    #div1 .div12{color:purple;}
	    .div2 #div22{color:green;}
	    .div2 #div23{color:blue;}
	</style>

4 CSS盒子模型