笔记01-Web-CSS

2021-09-12 15:58:51 阅读：110 来源： 互联网

标签：Web 01 top 10px font margin 选择器 CSS left

CSS
1.概述：CSS全称(Casading Style Sheets)层底样式表，在html基础上引入css样式，css就是相当于在给“房子”装修
2.引入CSS样式

//行内写法：
<h1 style = "color:red ; font-size:20px;">hello</h1>
//内嵌：body列表看起来相对整洁
<head>
<style>
	h1{
		color: deeppink;  
		font-size: 200px;
		}
</style>
</head>
<body>
	<h1> hello</h1>
</body>
//外联：html文件相对于干净
<link rel="stylesheet" type="text/css" href="../css/first.css">
//在建一个以.css结尾的文件
h1{
	color: deeppink;  
	font-size: 200px;
}

优先级：行内写法>内嵌>外联
3.CSS选择器：

id选择器： 语法结构
	#id值{
	}
标签选择器：语法结构
	标签名div{
	}
类选择器：语法结构
	.class属性{
	}
层级选择器：
+相邻的兄弟（同级关系）
~所有兄的（同级关系）
>所有子标签（包含关系）

所有选择器可在一起使用
#a,div,.class{
	
}

4.伪类：只针对超链接标签a使用

:hover 鼠标悬停
:active 点住不松开
:visitd 访问过的
:link 为访问过的

5.CSS盒子模型(Box Model)

	 margin: 外边距    边框 到 浏览器的 距离
	 border: 边框
	 padding: 内边距  内容到 边框的距离  
	 
	 padding\margin-top 上
	 padding\margin-left 左
	 padding\margin-right  右 
	 padding\margin-bottom  下
	 margin：0 auto 居中
	 margin：10px 所有边距为
	 margin：10px 20px 30px 40px 上右下左
	 margin：10px 20px 10px 上 左右 下

6.定位position

1.绝对定位：absolute 以浏览器边缘为参照物
2.相对定位：relative 已统计元素为参照物

案例
1.导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				float: left;
				position: relative;
				margin-left: 30px;
				
			}
			a{
				text-decoration: none ;
				color: black;
				font-weight: 800;
			}
			a:hover{
				font-size: 60px;
				color: red;
			}
		</style>
	</head>
	<body>
		<ul type="none">
			<li><a href="#" >北京</a></li>
			<li><a href="#">上海</a></li>
			<li><a href="#">广州</a></li>
			<li><a href="#">哈尔滨</a></li>
		</ul>
	</body>
</html>

2.页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: lightgray;
				text-align: center;
				font-size: 40px;
				position: relative;
			}
			#head{
				height: 120px;
				font-size: 40px;
				padding-top: 50px;
			}
			#hah{
				height: 60px;
				font-size: 40px;
				margin-top: 10px;
			}
			
			#left,#center,#right{
				float: left;
				height: 460px;
			}
			
			#left{
				width:575px;
				margin-top: 10px;
			}
			#center{
				margin-top: 10px;
				margin-left: 9px;
				width:600px;
				
			}
			#right{
				width:600px;
				margin-top: 10px;
				margin-left: 10px;
			}
			#foot1{
				margin-top: 480px;
				height: 200px;
				background-color: lightgray;
				
			}
			
		</style>
	</head>
	<body>
		<div id = "head">头部区域</div>
		<div id ="hah">标题栏</div>
		<div id = "left">左标题区域</div>
		<div id = "center">中间区域</div>
		<div id = "right">右标题区域</div>
		<div id = "foot1" style="background-color: lightgray;">尾部区域</div>
	</body>
</html>

标签：Web,01,top,10px,font,margin,选择器,CSS,left
来源： https://blog.csdn.net/qq_53855503/article/details/120250295

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

笔记01-Web-CSS