CSS技术（笔记）

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’’>br/>@import(“外部css的url”)
</style>
2.2 CSS选择器和常用的属性
1.标记选择器：直接使用html标记作为选择器
比如：<div>标记选择器</div>
语法：div{属性:值;}

类选择器：直接使用HTML标记的class属性的值作为选择器
比如：<div class=”divclass”>class选择器</div>
语法：.divClass {属性:值;}
ID选择器：直接使用html标记的ID属性的值作为选择器
比如：<div id=”divId”>id选择器</div> 比如都写在body的里面、
语法：#divId {属性:值;} 语法都写在head里面。Title的后面。
id属性的值必须唯一
通配符选择器:让所有的标记显示相同的样式。
语法： *{属性:值;}
选择器之间的优先级：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>

</body>
</html>

猜你喜欢