内联样式（在 HTML 元素内部）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式</title>
</head>
<body>
<!--
width 宽度样式
height 高度样式
background-color 背景色样式
dispiay 布局样式（none表示隐藏，block表示显示）
-->
<div style="width : 300px;
height : 300px;
background-color : #99FFCC;
display : block;
border-style : solid;
border-width : medium;
border-color : #FF0000
"></div>
<br>
<!--
样式的另一种写法：
border : border-width border-style border-color
-->
<div style="width : 300px;
height : 300px;
background-color : #FFFF00;
display : block;
border : medium solid #0000FF
"></div>
</body>
</html>
内部样式表（位于<head>标签内部）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式</title>
<style type="text/css">
/*这是css注释*/
#usernameErr {
font-size : 12px;
color : red;
}
</style>
</head>
<body>
<!--
设置样式字体大小12px，颜色为红色
-->
<span id="usernameErr">用户名错误</span>
</body>
</html>
选择器
id选择器
1、id选择器可以为标有特定id的HTML元素指定特定的样式。
2、HTML元素以id属性来设置id选择器，CSS中id选择器以 "#" 来定义。
3、ID属性不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。
4、ID属性只能在每个HTML文档中出现一次。
#usernameErr {
样式名:样式值;
样式名:样式值;
...
}
类（class）选择器
1、class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
2、class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。
3、类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
.类名 {
样式名:样式值;
样式名:样式值;
...
}
4、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fruit {
border : medium solid red;
}
</style>
</head>
<body>
<input type="text" class="fruit" />
<br><br>
<select class="fruit">
<option>苹果</option>
<option>西瓜</option>
</select>
</body>
</html>
标签选择器
1、以html标签作为css修饰所用的选择器。
2、标签选择器作用范围比id选择器广。
标签名 {
样式名:样式值;
样式名:样式值;
...
}
3、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
font-size : 12px;
color : red;
}
</style>
</head>
<body>
<div>用户名错误</div>
<div>密码错误</div>
<div>验证码错误</div>
</body>
</html>
外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式表</title>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="haha.css" />
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<span id="bdSpan">点我链接到百度</span>
</body>
</html>
CSS文件代码：
/*去掉下划线*/
a {
text-decoration : none;
}
/*加上下划线*/
#bdSpan {
text-decoration : underline;
/*cursor是鼠标样式，pointer是小手；
hand也是，但是hand有浏览器兼容问题，建议用pointer。*/
cursor : pointer;
}
