1、样式初始化:
把你所有浏览器自带的默认样式来进行处理;
可用 群组选择器:如果有共同的样式,可以使用群组选择器归类。
body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,p{
margin:0;
}
2、display(样式类型)
block 块级样式
inline 内联/行内样式
区分block与inline的特点:
block 块级样式:
独占一行
支持宽高
支持padding,margin
inline 内联/行内样式:
横排显示
不支持宽高
支持水平方向的margin,不支持垂直方向的margin
支持padding,垂直方向会出现诡异问题(会占位)
会解析一个空格的字符
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title> Document </title>
<meta name='keywords' content=''/>
<meta name='description' content=''/>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color:#0f0;
margin:50px;
padding:50px;
}
span{
width:100px;
height:100px;
background-color:deeppink;
/* margin:50px; */
padding:50px;
}
</style>
</head>
<body>
<div>我是div标签</div>
<p>我是p标签</p> /* 被第一个span挡住了 */
<span>我是span标签1</span>
<span>我是span标签2</span>
</body>
</html>
3、样式类型转换
行内样式与块级样式之间可以进行样式转换。
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title> Document </title>
<meta name='keywords' content=''/>
<meta name='description' content=''/>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color:#0f0;
margin:50px;
padding:50px;
}
p{
width:100px;
height:100px;
background-color:#ff0;
}
span{
display:inline;
width:100px;
height:100px;
background-color:deeppink;
}
.myDiv{
display:inline;
background-color:#f00;
}
.mySpan{
display:block;
background-color:#00f;
}
</style>
</head>
<body>
<div>我是div标签</div>
<p>我是p标签</p>
<span>我是span标签1</span>
<span>我是span标签2</span>
<div class="myDiv"> this is mydiv</div>
<span class="mySpan"> this is myspan</span>
</body>
</html>
4、行内块元素
inline-block:行内块元素
特点:
支持宽高
横排显示
支持margin
支持padding
会解析一个空格的字符
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title> Document </title>
<meta name='keywords' content=''/>
<meta name='description' content=''/>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color:purple;
padding:50px;
}
.mydiv1{
display:inline-block;
}
.myspan{
width:100px;
height:100px;
background-color:orange;
padding:50px;
}
.myspan1{
display:inline-block;
width:100px;
height:100px;
margin:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="mydiv1"> this is mydiv1 </div>
<div class="mydiv1"> this is mydiv1 </div>
<span class='myspan'>this is span</span>
<span class='myspan1'> this is span </span>
</body>
</html>
5、cursor 鼠标样式:
pointer 小手指样式
auto 自动
default 默认样式
move 移动
text 文本样式
wait 等待
help 帮助
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title>Document </title>
<meta name='keywords' content=''/>
<meta name='description' content=''/>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color:#F99;
margin-bottom:5px;
}
.mydiv1{
width:100px;
height:100px;
background-color:#FF0;
cursor:pointer;
}
.mydiv2{
width:100px;
height:100px;
background-color:#F0F;
cursor:auto;/* 自动样式 */
}
.mydiv3{
width:100px;
height:100px;
background-color:#0FF;
cursor:default; /* 默认样式 */
}
.move{
width:100px;
height:100px;
cursor:move;
}
.text{
cursor:text;
}
.wait{
cursor:wait;
}
.help{
cursor:help;
}
.new{
width:100px;
height:100px;
background-color:#90f;
cursor:url('images/Hello_Background.cur'),pointer;
}
</style>
</head>
<body>
<a href="http://baidu.com"> 我是a标签 </a>
<div class='mydiv1'>我是div标签</div>
<div class="mydiv2"></div>
<div class="mydiv3"></div>
<div class="move">move</div>
<div class="text">text</div>
<div class="wait">wait</div>
<div class="help">help</div>
<div class='new'> new </div>
</body>
</html>