CSS-曹老师视频笔记-2018.07.10
2018-07-10 本文已影响0人
侯小强2018
CSS样式表
-
<style>样式风格标签
属性：type="text/css"
-
标签选择器
标签名{ 属性名：属性值}
文本属性：color，font-family，font-size
-
类选择器
.类名{ 属性名：属性值}
-
<link rel="stylesheet" href=" .css" type="text/css">
-
特殊样式超链接
a:link { color:red; font-size:10 ;} 未访问
a:visited{ color: blue; font-size: 20} 访问过
a:hover{ color: #FFFF00; font-size: 40} 悬停，鼠标放上
a:active{ color: #F5F5F5; font-size: 20} 鼠标点中激活
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style type="text/css">
a:link { color:red; font-size:10 ;}
a:visited{ color: blue; font-size: 20}
a:hover{ color: #FFFF00; font-size: 40}
a:active{ color: #F5F5F5; font-size: 20}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下 </a>
</body>
</html>
-
id类选择器
id名
position:absolute 绝对位置
z-index：层次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id1{
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 300px;
z-index: 1;
background-color: red;
}
#id2{
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
z-index: 2;
background-color: green;
}
#id3{
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 100px;
z-index: 3;
background-color: yellow;
}
</style>
</head>
<body>
<div id="id1">
</div>
<div id="id2"></div>
<div id="id3"></div>
</body>
</html>
分层布局的div
