1.概要
CSS（Cascading Style Sheet）：层叠样式表语言。
作用：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
HTML还是主体，CSS依赖HTML。CSS存在的意义就是修饰HTML。
个人要求能看懂即可
2.在HTML页面给中嵌套使用CSS的三种方式
2.1 第一种方式
：在标签内部使用style属性来设置元素的CSS样式，这种方式又被称为内联定义方式。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联定义方式</title>
</head>
<body>
<!--
width 宽度样式
height 高度样式
backgroud-color 背景色样式
display 布局样式（none表示隐藏，block表示显示）
border-color 边框颜色
border-width 边框宽度
border-style 边框风格
-->
<div style="width: 300px; height: 300px; background-color: aquamarine; display: block;
border-color: red; border-width: 1px; border-style: solid;"></div>
<!-- 样式还可以这样写（border : 1px solid red;），下面的写法跟上面的效果一样 -->
<div style="width: 300px; height: 300px; background-color: aquamarine; display: block;
border : 1px solid red;"></div>
</body>
</html>
2.2 第二种方式
：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名:样式值;
样式名:样式值;
...
}
选择器 {
样式名:样式值;
样式名:样式值;
...
}
</style>
</head>
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式块方式和三种选择器</title>
<style type="text/css">
/*
这是CSS的注释方法（/* */）
*/
/*
id选择器
语法格式：
#id{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
}
*/
#usernameErrorMsg{
color: red;
font-size: 12px;
}
/*
标签选择器
语法格式：
标签名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
}
标签选择器作用的范围比id选择器广。
*/
div {
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
类选择器
语法格式：
.类名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
*/
.student {
border : 1px solid red;
width : 400px;
height : 30px;
}
</style>
</head>
<body>
<!-- 设置样式字体大小为12px，颜色为红色 -->
<span id="usernameErrorMsg">样式块方式</span>
<div></div>
<div></div>
<div></div>
<!--class相同的标签可以认为是同一类标签。-->
<br><br><br>
<input type="text" class="student"/>
<br><br><br>
<select class="student">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
2.3 第三种方式
：链入外部样式表文件，这种方式最常用。（将样式写到到一个独立的xxx.css文件中，在需要的网页上引入css文件，样式就引入了。）
语法格式：
<link type="text/css" rel="stylesheet" href="css"文件的路径 />
这种方式易维护，维护成本较低。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">点击我链接到百度哦！</span>
</body>
</html>
1.css的内容如下：
a {
/*
这里text-decoration表示的是文本装饰。
具体信息我们可以查询css的参考手册。
*/
text-decoration : none;
}
/*
cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
*/
#baiduSpan {
text-decoration: underline;
cursor: pointer;
}
额外说一个“绝对定位”：
div{
position : absolute;
left: 100px;
top:
}
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
