2.1 CSS技术 1.简介：它是叠层样式表，cascading stytle sheet ，它的作用是增强网页的显示效果。 目的：使用css让网页内容和样式分离，便于网站代码后期的维护。 书写规范： 选择器{属性1:值1;属性2:值2;} 提示：如果值为若干单词，则要给值加引号 实例：通过css样式<div>标记进行设置 div{border:1px solid red;width:600px;height:400px;} 其中div为选择器，表示css样式作用的HTML对象。Border属性有三个值“1px solid red” 分为表示1像素、实心边框线、红色。 CSS样式的引入方式 *注意：css不能单独使用，必须和html网页配合使用，引入css的四种方式：链入式、内嵌式、行内式、导入式。（内嵌式和链入式比较常用） *如果是比较小范围的使用CSS，或者单个页面使用，内嵌式比较方便；如果是大网站为了方便维护和管理，就要使用链入式。
- 行内式：直接在html标记里面使用css样式 语法：<div style="background-color: red">div的行内式效果</div>
- 内嵌式： （1）语法：<style type="text/css"> css代码 </style> *注意：代码的位置一定要放在<head>标记里面。 例如：<html> <head> <meta charset="utf-8"> <title>css样式的引入方式</title> <style type="text/css"> h2 {text-align:center;} div{ border:1px solid red; width:300px; height:200px; color:bule; } </style> </head> <body> <!--演示 行内式--> <div style="background-color: red">div的行内式效果</div> <!--演示内嵌式--> <h2>内嵌式css样式</h2> <div>使用style标记来实现内嵌式的效果，它的位置要放在<head>标记里面，title的后面 </body> </html> 3.链入式： 语法：<link type=’’text/css’’ href=’’外部css文件的名称/路径’’ rel=”stylesheet”><link> 步骤： （2）创建一个css文件 div { background-color:red ; }
（3）在网页里面使用link标签来引入外部的css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" href="链入式.css" rel="stylesheet"</link>
</head>
<body>
<div>链入式实现的效果</div>
</body>
</html>
4.导入式：
（4）语法：<style type=’’text/css’’>
@import(“外部css的url”)
</style>
2.2 CSS选择器和常用的属性
1.标记选择器：直接使用html标记作为选择器
比如：<div>标记选择器</div>
语法：div{属性:值;}
2. 类选择器：直接使用HTML标记的class属性的值作为选择器
比如：<div class=”divclass”>class选择器</div>
语法：.divClass {属性:值;}
3. ID选择器：直接使用html标记的ID属性的值作为选择器
比如：<div id=”divId”>id选择器</div> 比如都写在body的里面、
语法：#divId {属性:值;} 语法都写在head里面。Title的后面。
id属性的值必须唯一
4. 通配符选择器:让所有的标记显示相同的样式。
语法： *{属性:值;}
选择器之间的优先级：id选择器>类选择器>标记选择器>通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style type='text/css'>
/标签选择器：标签+{}；在此设置的标签属性，浏览器打开此页面时，选择所有此标签进行属性设置/
div {background-color:red;}
/类选择器：.+类名+{}；在此设置的类属性，浏览器打开此页面时，选择所有此类进行属性设置，优先级高于标签选择器/
.divClass {background-color:purple;}
/id选择器：#+id名+{}；在此设置的id属性，浏览器打开此页面时，选择此id进行属性设置，优先级高于类选择器和标签选择器/
#divId {background-color:green;}
</style>
</head>
<body>
<div>标记选择器</div>
<div class="divClass">测试--选择器</div>
<div class="divClass">标记选择器</div>
<div id="divId">标记选择器</div>
<!-- 选择器之间的优先级：id选择器>class选择器>标记选择器>通配符选择器-->
</body>
</html>
