css
2018-11-10 本文已影响0人
python奕
/注释/
一、基本选择器
1. 标签选择器 span{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<span>文本内容</span>
</body>
</html>
2.ID选择器 #sp1{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#sp1{
font-size:20px;
color:red;
}
#sp2{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<span id="sp1">文本内容</span>
</br>
<span id="sp2">好好学习</span>
</body>
</html>
3.类选择器 .sp1{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sp1{
font-size:20px;
color:red;
}
.sp2{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<span class="sp1">文本内容</span>
</br>
<span class="sp2">好好学习</span>
</body>
</html>
4.通配选择器
*{}
注：通配选择器<标签选择器<类选择器<ID选择器<行内式
!importan提示优先级
div：块级元素，独占一行，可以设置宽高
span：行内元素，一行可以显示多个，设置宽高无效
二、复合选择器
1.后代选择器
选择器1 选择器2
2.子代选择器
选择器1>选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1>span{
font-size: :20px;
color:red;
}
</style>
</head>
<body>
<div class="div1">
<span>文本内容</span>
<div class="div2">
<span>这是嵌套内容</span>
</div>
</div>
</body>
</html>
3.交集选择器 选择器1.选择器2{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span.cls1{
font-size: :20px;
color:red;
}
</style>
</head>
<body>
<div >
<span class="cls1">文本内容</span>
</div>
<div class="cls1">
<span class="sp2">这是嵌套内容</span>
<p class="cls1">ccccc</p>
</div>
</body>
</html>
4.并集选择器 选择器1，选择器2{}
div span转化
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sp1{
font-size:20px;
background-color: black;
color:red;
display: inline-block;
height: 100px;
}
.sp2{
font-size: 20px;
color: blue;
display: inline-block;
background-color: black;
}
</style>
</head>
<body>
<span class="sp1">文w本内容</span>
<span class="sp2">好好学习</div>
</body>
</html>
三、超链接
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */
四、盒子
border padding会改变盒子大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 90px;
border-bottom-color:black ;
border-bottom-style: solid;
height: 100px;
background-color:red ;
margin-bottom:5px ;
padding-top: 10px;
padding-left: 10px;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
}
span{
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
<span>内容</span>
</div>
<div class="div2">
</div>
</body>
</html>
overflow: hidden; - 设置边框
设置行高，水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
line-height: 250px;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
