使用Cascading Style Sheet 2.0 中文手册.chm
1.什么是CSS，有什么作用？
CSS(Cascading Style Sheet)：层叠样式表语言
CSS的作用：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看
CSS好比是HTML的化妆品一样
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件
2.CSS要求掌握到的程度？
*常见的CSS样式要求会写
*别人写的CSS样式要能看懂
3.在HTML页面中嵌套使用CS的三种方式
1)在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式
语法格式：
<标签 style="样式名:样式值;样式名:样式值;……"></标签>
如：
<body>
<div style="width:300px;height:300px;background-color:#33ff99;border:solid red"></div>
</body>
2)在head标签中使用style块，这种方式被称为样式块方式
语法格式：
<head>
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
……
}
选择器{
样式名:样式值;
样式名:样式值;
……
}
</style>
</head>
3)链入外部样式表文件(最常用)
实现原理：
将样式写到一个独立的xxx.css文件中，在需要的网页上直接引入css文件，样式就引入了
语法格式：
<head>
<link type="text/css" rel="stylesheet" href="css文件路径"></link>
</head>
如：
css文件中：
a{
text-decoration : none ;
}
#baidusapn{
text-decoration: underline;
cursor: pointer;
}
html测试文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入外部独立的css文件</title>
<link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baidusapn">点击我连接到百度哦</span>
</body>
</html>
优点：
这种方式易维护，维护成本较低
4.选择器(id选择器、标签选择器、类选择器)
1)id选择器：
语法格式：
#id{
样式名：样式值;
样式名：样式值;
……
}
如：
<style tyle="text/css">
#usernameErroring{
color:red;
font-size: 12px;
}
</style>
2)标签选择器(注：标签选择器作用范围比id选择器广)
语法格式：
标签名{
样式名:样式值;
样式名:样式值;
……
}
如：
<style tyle="text/css">
div{
background-color:black;
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
3)类选择器(class相同的可以认为是同一标签)
语法格式：
.类名{
样式名:样式值;
样式名:样式值;
……
}
如：
<style tyle="text/css">
.myclass{
background-color: aqua;
border: 1px solid #FF0000;
}
</style>
5.列表样式
ul{
list-style-type:none;
}
6.绝对定位(盒子左上角为定位点)
#div_1{
position:absolute;
left:100px;
top:100px;
}
浙公网安备 33010602011771号