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>
注意:id属性的值必须唯一,class属性的值可以相同