html5

最新推荐文章于 2021-09-05 21:31:42 发布

&邶风

最新推荐文章于 2021-09-05 21:31:42 发布

阅读量249

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/F556688/article/details/112761620

版权

1.选择器优先级
特性值：
number
特性值越大，优先级越高
特性值相同，越靠下的优先级越高

!important;优先级最高

2.尺寸、颜色单位
1.尺寸
1.绝对单位
px
2.相对单位
百分比
em
2.颜色值
1.关键字
red
blue
2.rgb(r,g,b)
0-255
3.rgba()
a:透明 0-1
4.16进制颜色值
#
3.文本样式
color
font-size
font-style
font-weight
font-family:
“宋体”
字体栈：“宋体”,“黑体”…
网络字体：
1.下载字体
2.声明字体
@font-face{
font-family:’’
src:url()
}
3.引用字体
div{
font-family:’’
}
字体图标：
1.fontawesome
1.下载/引入外部样式库
2.在html中引入
link
3.使用class类
class=“fa fa-xxx”
2.iconfont
1.官网上选择需要的图标
2.下载图标对应的css样式文件
3.html中引入
4.使用class
class=“iconfont xxxxx”
text-align:
text-transform:
text-decoration:none
text-shadow:x y blur color

letter-spacing:
word-spacing:

width:
	min-width
	max-width
height

overflow:
	设置超出元素部分的展示形式
	hidden:超出部分隐藏
	scroll:超出部分以滚动条形式展示

元素的隐藏和显示：
	display:
		none：元素的隐藏
				不但隐藏元素本身，还会隐藏元素所占据的空间
		block：元素的显示
	visibility:
		hidden：元素的隐藏
			只隐藏元素，不隐藏元素所占用的空间
		visible：元素的显示
表格样式：
	border-collapse: collapse;//表格边框合并
	caption-side: bottom//表格标题位置
列表样式：
	list-style:
	line-height:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border:1px solid red;
			font-size: 30px;
			text-align: center;
		}

		div:nth-child(2){
			/*display: none;*/
			visibility: visible;
		}

		td{
			width: 100px;
			height: 30px;
			border:1px solid black;
		}

		table{
			border-collapse: collapse;
			caption-side: bottom
		}

		li{
			/*list-style-type: decimal;*/
			border:1px solid red;
			list-style-position: inside;
			height: 50px;
			text-align: center;
			line-height: 50px;
			/*list-style-image: url('./2.png');*/

			/*line-height: 50px;*/
		}

	</style>
</head>
<body>

	<ul>
		<li>
			one
		</li>
		<li>two</li>
		<li>three</li>
	</ul>

		<table>
			<caption>学生信息表</caption>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
</body>
</html>

盒子：
	1.盒子的组成
		盒子=内容+内边距+边框+外边距

		盒子的高度=内容+内边距+边框
		盒子所占空间高度=内容+内边距+边框+外边距

	2.盒子分类
		1.标准盒子/w3c盒子
			默认都是标准盒子
			特点：
				设置的宽高属性-》设置给元素内容的
			box-sizing:content-box;
		2.边框盒子/怪异盒子
			box-sizing:border-box
			特点：
				宽高属性-》盒子：内容+内边距+边框
背景样式设置：
	background
边框样式设置:
	border:1px solid red

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		div{
			box-sizing: border-box;
			width: 100px;
			height: 100px;
			border:1px solid red;
			padding:10px;
			margin:10px;
			/*
			1.盒子的内容区宽度？
				content=100-20-2=78
			2.盒子的宽度？
				box=100px
			3.盒子所占空间宽度？
				box=100+20=120
			*/
		}
	</style>
</head>
<body>
	<div>hello</div>
</body>
</html>

布局：
	1.浮动
		float:
			none
			left
			right
		浮动何时停止？
			1.遇到父元素边框
			2.遇到其他浮动元素

		浮动元素不遮挡文字和行内元素

		1.如果浮动属性设置给块级元素
			块级元素可以在一行中显示
		2.如果浮动属性设置给行内元素
			行内元素可以设置宽高

	清除浮动：
		clear:
			left
			right
			both

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		article{
			background-color: #ccc;
			overflow: hidden;
			margin-left: 100px;
		}
		div{
			width: 100px;
			height: 100px;
			border:1px solid red;
			font-size: 30px;
			margin:10px;
			float: left;
		}

		span{
			width: 100px;
			height: 100px;
			border:1px solid red;
			float: left;
		}
		p{
			width: 100px;
			height: 100px;
			background-color: blue
		}

		.clear{
			clear: left;
		}

		section::after{
			content: '';
			display: block;
			clear: left;
		}
	</style>
</head>
<body>
	<article>
		<section>
			<div>div1</div>
			<div>div2</div>
			<div>div3</div>
		</section>
		
		<p></p>
		<!-- <span>span1</span>
		<span>span2</span>
		<span>span3</span> -->

	</article>
</body>
</html>