css基础布局笔记

最新推荐文章于 2024-07-24 20:47:06 发布

wuyanwenyun

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量143

点赞数

分类专栏： HTML学习文章标签： css

本文链接：https://blog.csdn.net/wuyanwenyun/article/details/102653994

版权

HTML学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、css样式
内嵌样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--内嵌样式-->
		<h1 style="color: blue; font-size: 5px;">内嵌样式的css，蓝色，5px</h1>
	</body>
</html>

内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--内部样式-->
		<style type="text/css">
			h1{
				color: yellow;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<h3>内部样式的css，黄色，楷体</h3>
	</body>
</html>

外部样式

新建一个css文件，然后再在head标签中加入link标签，引入外部链接：

<link rel="stylesheet" href="css/css样式.css" />

2、选择器学习

<!DOCTYPE html>
<!--
	基本选择器:元素选择器、id选择器、类选择器
	关系选择器：
	属性选择器：
	伪类选择器：
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*基本选择器*/
			/*元素选择器*/
			h1{
				color: red;
			}
			/*id选择器
			对于多个元素，id也能实现，但是推荐用类选择器
			因为在搭配js写HTML的时候，元素的id唯一，
			*/
			#id1{
				color: green;
			}
			#id2{
				color: chartreuse;
			}
			/*类选择器*/
			.cls1{
				color: blue;
			}
			/*关系选择器*/
			div {
				color: aqua;
			}
			span{
				color: gold;
			}
			/*伪类选择器*/
			/*静止状态*/
			a:link{
				color: salmon;
				
			}
			/*悬浮状态*/
			a:hover{
				color: yellow;
			}
			/*触发状态*/
			a:active{
				color: blue;
			}
			/*完成状态*/
			a:visited{
				color:pink;
			}
		</style>
		<span></span>
	</head>
	<body>
		<h1>11111</h1>
		<h1>11111</h1>
		<h1 id="id1">11111</h1>
		<h2>22222</h2>
		<h3 class="cls1">3333</h3>
		<h4 class="cls1">44444</h4>
		<div>
			<h5>555555</h5>
			<span id="id2">
				7777777<br />
			</span>
		</div>
		<span>
			88888888<br />
		</span>
		<h5>悬浮变黄色，鼠标变小手</h5>
		
		<a href="kaff">静止红，悬浮黄，触发蓝，完成粉</a>	
		
	</body>
</html>

选择器应用举例：
百度首页右侧导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;/*去掉列标前图标*/
			}
			li{
				float: left;/*向左浮动*/
				margin-left: 10px;/*距离左侧间距*/
			}
			a{
				color: black;/*字体颜色*/
				font-family: "宋体";
				font-size: 13px;/*字体大小*/
				font-weight: bold;/*加粗*/	
			}
			div{
				position: absolute;/*绝对定位*/
				right: 10%;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<a href="aaa">新闻</a>
				</li>
				<li>
					<a href="aaa">hao123</a>
				</li>
				<li>
					<a href="aa">地图</a>
				</li>
				<li>
					<a href="aa">视频</a>
				</li>
			</ul>
		</div>
	</body>
</html>

3、三种定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--相对定位
			relative
			相对自身原位置
		-->
		<div style="width : 90px ;height: 90px; background-color: gold;
			position: relative;left: 300px;">90*90，相对定位，左300
		</div>
		<!--绝对定位
			absolute
			给黄色元素设置了绝对定位以后，那么它会释放父级（粉色div）原点，
			其他元素（绿色div）就会重新占用父级原点
		-->
		<div style="width: 100px;height: 100px;background-color: yellow;">
			参考点100*100
		</div>
		
		<div style="background-color: pink;width: 300px;height: 300px;
			margin-left: 100px;"> <!--距离左边框-->

			<div style="background-color: gold;width: 100px;height: 100px;
				position: absolute;left: 400px;
				">1、绝对定位，距离左边框400</div>
			<div style="background-color: gold;width: 100px;height: 100px;
				position:relative; left: 100px;
				">2、相对定位，距离粉红色原点100</div>			
		</div>
		<!--固定位置
			fixed
		-->
		<div style="width: 100px;height: 100px;background-color: orange;
			position: fixed;top: 100px;right: 0px;">100*100,固定位置上100，右0
		</div>
	</body>
</html>

4、盒子模型

<!DOCTYPE html>
<!--内边距
	padding:10px 5px 15px 20px;
	上内边距是 10px、右内边距是 5px、下内边距是 15px、左内边距是 20px
-->
<!--
	padding:10px 5px 15px;
	上内边距是 10px、右内边距和左内边距是 5px、下内边距是 15px
-->
<!--
	padding:10px;
	所有 4 个内边距都是 10px
-->
<!--外边距
	margin-left 外左边距
	
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="width: 500px;height: 500px;background-color: gold;
		 	padding-top: 20px;padding-left: 100px;">
       		<div style="background-color: pink;width: 200px;height: 200px;
            margin-left: 100px;padding-top: 100px;">
            	粉200*200，外左100，内上100
       		</div>
       		金色500*500，内上20，内左100，粉和字同时遵循
        </div>
	</body>
</html>