html第四天-CSDN博客

本文链接：https://blog.csdn.net/weixin_45331512/article/details/124319957

div的浮动效果
在默认的情况下，div是回换行的，可以使用使用float对div进行水平排列
left居左排列  right居右排列


对于table而言，我们可以使用css来控制其样式。border表示边框的样式。
border：1px solid black分别控制它的粗细，形状，颜色
border-collapse:合并内外边框
padding 表示边距

类选择器
在指定的标签下添加class属性，属性值不能以数字开头
在css中使用小数点表示类选择器
格式：
.类名{

}
类选择器也支持派生选择器的用法

元素基于类而被选择

如
元素名.类名{

}
p.c1{

}

class值可以同时写多个  表示它属于多个类，中间用空格分割


属性选择器
使用一堆中括号来选中含有某种属性的元素
使用【属性值=属性名】来选中含有某种属性且属性值为所选的元素

当鼠标移动到某元素上时，所触发的样式变化
元素:hover{

}

背景图片
background-image：url()
不需要重复显示，
background-repeat:no-reapeat
background-position:水平% 垂直% （百分号前为数字 可以为负数）

控制文本的行间距
line-height

表单控件内
border-radius圆角边框

之前写的都是内部样式表

外部样式表
创建独立的。css文件
在html中使用<link rel="stylesheet" type="text/css" href="css文件">
外部样式表可以极大地提高效率

内联样式表
作用范围
外部>内部>内联
优先级
内联>内部>外部
内联只作用于当前标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 200px;
				width:200px;
				background-color: yellow;
				float: left;
			}
			#d2{
				height: 200px;
				width:200px;
				background-color: blue;
				float: left;
				}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
			}
			#top1{
				height: 180px;
				background-color: blue;
				left: 0px;
				right: 0px;
			}
			#body{
				position: absolute;
				top:180px;
				left: 0px;
				right: 0px;
				bottom: 50px;
			}
			#bodyleft{
				width:200px;
				height: 100%;
				float: left;
				background-color: red;
			}
			#bodyright{
                position: absolute;
				left: 200px;
				right: 0px;
				background-color: yellow;
				height: 100%;
				float: left;
			}
			#footer{
				position: absolute;
				height: 50px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="top1">顶部</div>
		<div id="body">
			<div id="bodyleft">左边列表</div>
			<div id="bodyright">右边详细信息</div>
		</div>>
		<div id="footer">页面底部</div>>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table,td{
				border: 1px solid black;
				border-collapse: collapse;
				padding: 10px 20px;
			}
			.c1{
				font-size: 30px;
				color: blue;
			}
			.c2 .c1{
				font-size: 30px;
				color: red;
			}
		    h3.c3{
				color: yellow;
			}
			[title]{
				color: yellow;
			}
			a:hover{
				color: black;
				font-size: 30px;
			}
			body{
				background-image: url(excitement_0041.jpg);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>
		<div id="d1" class="c2">
			<p>段落</p>
			<h3 class="c1">标题</h3>
			<p>段落</p>
			<h3>标题</h3>
			<p class="c1">段落</p>
			<h3 class="c3">标题</h3>
		</div>
		<a title="test" href="test.html">test</a>
		<a title="百度" href="http://www.baidu.com">百度</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link   rel="stylesheet" type="text/css" href="./my.css">
		<style type="text/css">
			#p1{
				line-height: 20px;
			}
			#p3{
				line-height: 50px;
				font-size: 30px;
			}
			.c1{
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<p id="p1"> 六号岛周边的海域上，一艘中型游轮正在缓慢行驶着。

    一层甲板，硕大的遮阳伞下面，七名男子围着餐桌而坐，或是吸着烟，或是在交头接耳地聊着什么。

    甲板周边，四名西装革履的保镖，戴着耳麦，腰间别着战术包，负手而立，看着极为专业。

    众人等待了一会，苗子维才换了一身防雨绸面料的运动装，笑吟吟地走了出来。
</p><br />
		<p id="p2">六号岛周边的海域上，一艘中型游轮正在缓慢行驶着。

    一层甲板，硕大的遮阳伞下面，七名男子围着餐桌而坐，或是吸着烟，或是在交头接耳地聊着什么。

    甲板周边，四名西装革履的保镖，戴着耳麦，腰间别着战术包，负手而立，看着极为专业。

    众人等待了一会，苗子维才换了一身防雨绸面料的运动装，笑吟吟地走了出来。</p><br>
		<p id="p3" style="font-size: 40px;">六号岛周边的海域上，一艘中型游轮正在缓慢行驶着。

    一层甲板，硕大的遮阳伞下面，七名男子围着餐桌而坐，或是吸着烟，或是在交头接耳地聊着什么。

    甲板周边，四名西装革履的保镖，戴着耳麦，腰间别着战术包，负手而立，看着极为专业。

    众人等待了一会，苗子维才换了一身防雨绸面料的运动装，笑吟吟地走了出来。</p><br />
	</body>
	<form>
	<input type="text" class="c1"/>
	<input type="submit" value="提交" class="c1"/>
	</form>
</html>

p{
	color: #000000;
	font-size: 35px;
}
/*my.css*/