CSS2
<html>
<head>
<title>CSS内嵌式</title>
</head>
<body>
<!--
border-color：边界颜色
border-style：边界样式
width、height：宽高
-->
<div style="border-color:red;border-style:solid;width:300px;height:300px"></div>
<!--
对边框的简化书写
border:边界大小 边界样式 边界颜色
-->
<div style="border:3px solid aqua;width: 300px;height: 300px;"></div>
</body>
</html>
<html>
<head>
<title>CSS样块式</title>
<style type="text/css">
/*
id选择器
id有唯一的特点
语法格式：
#id{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
*/
#usernameErrorMsg{
font: 50px;
color: red;
}
/*
标签选择器
标签样式有相同标签，共同设置的特点
语法格式：
标签名 {
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
标签选择器作用的范围比id选择器广。
*/
div{
background-color: bisque;
border: 3px solid red;
width: 200px;
height: 200px;
}
/*
类选择器
当不是唯一，也不做同款标签时，考虑同一类来处理
语法格式：
.类名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
*/
.student{
border : 1px solid red;
width : 100px;
height : 30px;
}
</style>
</head>
<body>
<!--
设置样式字体大小12px，颜色为红色！
-->
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<br />
<!--
设置两个有背景颜色的方框！
-->
<div></div>
<div></div>
<br />
<!--class相同的标签可以认为是同一类标签。-->
<input type="text" class="student"/><br>
<select class="student">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
id：用#idName{ ...}；用于id唯一
标签：直接用标签名；用于相同标签
class：用.className{ ...}；用于同类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三种模式--引入外部css文件</title>
<link type="text/css" rel="stylesheet" href="css/1.css" />
</head>
<body>
<!--设置百度超链接样式-->
<a href="http://www.baidu.com">百度</a>
<!-- 设置文字样式 -->
<span id="baiduSpan">点击我链接到百度哦！</span>
</body>
</html>
a{
text-decoration:none;
}
/*
cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
*/
#baiduSpan{
text-decoration: underline;
cursor: pointer;
}
4、伪类选择器
①链接伪类选择器
给链接以特殊效果：
（love hate）:link、:visited、:hover、:active
经常用的是：hover{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
/* 未访问的链接 */
a:link{
color: coral;
}
/* 已访问的链接 */
a:visited{
color: green;
}
/* 鼠标移动到链接上 */
a:hover{
color: #FF0000;
}
/* 选定的链接 */
a:active{
color: blue;
}
#shopping:hover{
color: magenta;
}
</style>
</head>
<body>
<a href="#">热点信息</a>
<a href="#" id="shopping">闪购</a>
</body>
</html>
②位置伪类选择器
用于针对位置进行选择
li:nth-child(n){ ...} 奇数n=add 偶数n=even
③目标伪类选择器
针对目标之后的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>目标选择器</title>
<style>
:target{
color: red;
}
</style>
</head>
<body>
<div>目录</div>
<a href="#biaoti1">1、标题1</a>
<a href="#biaoti2">2、标题2</a>
<a href="#biaoti3">3、标题3</a>
<br>
<h1 id="biaoti2">标题2</h1>
<h1 id="biaoti3">标题3</h1>
</body>
</html>
浙公网安备 33010602011771号