（5）HTML&&CSS笔记（样式）

最新推荐文章于 2024-01-26 18:33:43 发布

沭瑾

最新推荐文章于 2024-01-26 18:33:43 发布

阅读量95

点赞数

分类专栏： HTML&&CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/xiaoma_666/article/details/97259911

版权

HTML&&CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

沭瑾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（5）HTML&&CSS笔记（样式）

1、样式初始化：把你所有浏览器自带的默认样式来进行处理；可用群组选择器：如果有共同的样式，可以使用群组选择器归类。body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,p{ margin:0; }2、display（样式类型）block 块级样式inline 内联/行内样式区分block与inline的特点：block 块级样式：独占一行支持宽...
复制链接

扫一扫

专栏目录