Java-CSS

最新推荐文章于 2022-09-13 20:09:09 发布

小学猿

最新推荐文章于 2022-09-13 20:09:09 发布

阅读量181

点赞数

分类专栏： CSS 文章标签： java-css

本文链接：https://blog.csdn.net/qq_43559559/article/details/102863528

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS (Cascading Style Sheets) ：层叠样式表

层叠：一层一层叠加
样式表：存储样式的地方，多个样式

HTML--------》页面的结构--------》人的面部（素颜）
CSS ---------》美化页面 ----------》给人化妆

css：必须写在head中
< style>css样式代码< /style>

css选择器：
范围越小，优先级越高（id>类>标签）

1.标签选择器：标签名{ }
2.类选择器：. 类名{ }
3.id选择器：#id值{ }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.dd .font{
				height: 200px;
				width: 200px;
				color: red;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="dd">
			<div class="font">
			11</div></div>
		1
		<div class="dd">111</div>		
	</body>
</html>

css盒子模型

边框的四个属性：
border-top:上边框
border -right:右边框
border -bottom:下边框
border -left:左边框

设置上下左右边框样式 为1像素的 实体 红色线
border:1px solid red;

margin：外边距不会把边框撑大
padding：内边距会把边框撑大

内边距有四个属性可以设置：
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距
外边距有四个属性可以设置：
margin-top:上边距
margin -right:右边距
margin -bottom:下边距
margin -left:左边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				padding: 30px;
				width: 100px;
				height: 100px;
				background: red;
			}
			#div2{
				margin: 10px;
				background: yellow;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			123
		</div>
		<div id="div2">
			345
		</div>
	</body>
</html>