css初学

最新推荐文章于 2024-11-03 19:27:37 发布

大胖驾到

最新推荐文章于 2024-11-03 19:27:37 发布

阅读量148

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_51239196/article/details/123583864

版权

css的优势

降低耦合度。

解耦让分工协作更容易

提高开发效率

根据定义CSS的位置不同分为

行内样式

<h1 style="color: red;">34</h1>

内部样式（写在HTML页面内）

</head>
	<style>
	  h1{
		  color: beige;
	  }
	</style>
	
	<body>

外部样式（创建一个css文件，写在文件里面）

h1{
	color: aqua;
}

<head>
		<one
		<link rel="stylesheet" href="css/one.css" />
		<meta charset="utf-8">
		<title></title>
	</head>

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器与优先级</title>
	    <style type="text/css">
		/* 优先级：标签选择器<class选择器<id选择器 */
		/*  class选择器：通过html标签中的class属性应用生效 id="MyColor"*/
	    	#MyColor{
				color: gainsboro;
			}
			/* class选择器：通过html标签中的class属性应用生效 class="darkgreyColor" */
			.darkgreyColor{
				color: darkgrey;
			}
			/* 标签选择器：直接在体同名的HTML标签上显示 */
			p{
				color: #00FFFF;
			}
			div{
				color: lawngreen;
			}
	    </style>
	</head>
	<body>
		<div id="MyColor" class="darkgreyColor"> 看颜色</div>
		<div id="MyColor">
			ID=Mycolr的行
		</div>
		<div id="MyColor">
			ID=Mycolr的行2
		</div>
		<div>DIV的颜色</div>
		<p>段落</p>
		<p>段落2</p>
	</body>
</html>

常用样式颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.top{
				color: antiquewhite;
			}
			.con{
				color: rgb(255,0,0);
			}
			.content{
				color: rgba(255,0,0,0.7);
			}
		</style>
	</head>
	<body>
		<h1 class="top">念奴娇.赤壁怀古</h1>
		<p class="con">大江东去，浪淘尽，千古风流人物。</p>
		<p class="con">故垒西边，人道是，三国周郎赤壁。</p>
		<p class="con">故垒西边，人道是，三国周郎赤壁。</p>
		<p class="con">故垒西边，人道是，三国周郎赤壁。</p>
		<p class="content">故垒西边，人道是，三国周郎赤壁。</p>
		<p class="content">故垒西边，人道是，三国周郎赤壁。</p>
		<p class="content">故垒西边，人道是，三国周郎赤壁。</p>
	</body>
</html>

宽高&背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bg{
				color: #A9A9A9;
				/* 背景色 */
				width: 80%;
				height: 300px;
				background-color: #00FFFF;
				/* 背景图片：背景图片小于宽高的时候默认平铺 */
				background-image: url(img/xs.png);
				/* 背景平铺方式：不设置的时候默认铺满屏幕（xy同时平铺）
				  repea-x:横轴平铺
				  repea-y:纵轴平铺
				  repea:xy平铺
			      no-repea:不平铺
				 */
				background-repeat:no-repeat;
				/* 
				 背景位置：第一个参数向右移动，x轴，负数向左移动
				          第二个参数向下移动，负数向上移动，y轴
				 */
				background-position: 40px 41px;
			}
			.bg2{
				width: 80%;
				height: 300px;
				/* 缩写成一个
				 顺序：背景色，背景图片，背景平铺方式，背景x,y轴的偏移
				 用逗号隔开
				 */
				background: blueviolet url(img/cat.jpg) no-repeat 30px 15px;
			}
		</style>
	</head>
	<body>
		<h1 class="bg">梦游天姥吟留别</h1>
		<p class="bg2">仰天大笑出门去，</p>
		<p class="bg2">吾辈岂是蓬蒿人</p>
	</body>
</html>

文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本</title>
		<style type="text/css">
			.bg{
				/* 所有块状元素都有宽和高，行级元素没有 */
				width: 90%;
				height: 800px;
				/* 背景样式 不建议缩写*/
				background: #7CFC00 url(img/a.png) no-repeat 10px 10px;
				/* 字体 */
				font-size: 18px;
				font-family: "微软雅黑";
				font-weight: bolder;
				/* 字体缩写 :粗细 大小 样式*/
				font: bold 24px "仿宋";
				/* 文本样式 */
				/* 划线位置：underline（下划线） line-through(中)  none(没有划线)*/
				text-decoration: line-through;
				/* 文本对齐方式：水平：left right center */
				text-align: center;
				/* 垂直对齐：没有单个属性可以设置，一般单
				行的时候使用高度等于行高设置的垂直居中 */
				line-height: 800px;
				/* 文字间的间隙 */
				letter-spacing: 10px;
			}
		</style>
	</head>
	<body>
		<div >
			<p class="bg">123</p>
		</div>
	</body>
</html>

列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				background-color: #00FFFF;
				/* 列表样式：none-无样式 square-正方形 circle-空心圆 decimal-数字 */
				list-style-type: afar;
				/* 列表样式为自定义图片 */
				list-style-image: url(img/b.png);
				/* 列表样式存放的位置 */
				list-style-position: outside;
				/* 缩写 */
				list-style: none url(img/b.png) inside;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>

表框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:80%;
				height: 500px;
				/* 边框宽度 */
				border-width: 2px;
				/* 颜色 */
				border-color: #00FFFF;
				/* 样式： dashed-虚线  dotted-点线 solid-实线 */
				border-style:solid;
				/* 缩写：样式 颜色 宽度 */
				border: solid #8A2BE2 3px;
				/* 边框可以分为四个方向分别设置 */
				border-top: solid #8A2BE2 3px;
				border-bottom: solid #8A2BE2 3px;
				border-left: solid #8A2BE2 3px;
				border-right: solid #8A2BE2 3px;
				/* 没有边框 */
				border: none;
				/* 常用的边框样式 */
				border:solid 1px #ccc;
			}
		</style>
	</head>
	<body>
		<div >
			213
		</div>
	</body>
</html>

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- border边框
		     marjin:外边距，元素与语速之间的距离
			 padding:（内边距）内容和边框之间的距离-->
			 <style type="text/css">
			 	.p{
					width: 200px;
					height: 500px;
					background-color: #8A2BE2;
					border: solid #00FFFF 2px;
					/* 四个方向上的元素与元素之间的值都是50px  */
					margin: 50px;
					/* /* 第一个值表示上下的距离是50px,第二个元素表示的值是左右的值是100px */
					margin: 50px 100px;
					/* 50px上    100px左右  200px下*/
					margin: 50px 100px 200; */
					一个元素真正的宽度：width+内边距+外边距+边框线的值
					高度：height+内边距+外边距+边框线
				}
			 </style>
	</head>
	<body>
		<p><img src="img/a.png" ></p>
		<p><img src="img/a.png" ></p>
	</body>
</html>

float浮动

clear清楚浮动

display

display:block -- 显示为块级元素

display:inline -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性13 复合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a style="display: inline; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
		<a style="display: inline-block; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
		<a style="display: inline-block; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
		<a style="display: block; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
	</body>
</html>

复合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			/* 并集选择器 :多个选择器都是通用的样式。任何形式的选择器
			（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。*/
			
			div,p,ul{
				color: #00FFFF;
			}
			/* 交集选择器 ：交集选择器由两个选择器构成，
			找到的标签必须满足：既有标签一的特点，也有标签二的特点。*/
			p.class{
				color: aqua;
			}
			/* 后代选择器：用来选择元素或元素组的子孙后代 */
			ul li{
				color: red;
			}
			/* 子元素选择器：只能选择直接子类 */
			ul>li{
				color: #7CFC00;
			}
			/* 伪类选择器：用于向某些选择器添加特殊的效果（给链接添加特殊效果） */
			/* 未访问的链接 */
			a:link{
				color: #6495ED;
			}
			/* 已访问的链接 */
			a:visited{
				color: #8A2BE2;
			}
			/* 鼠标移动到链接上 */
			a:hover{
				color: darkslateblue;
			}
			/* 选定的链接 */
			a:active{
				color: coral;
			}
			.aa{
				
			}
			
		</style>
	</head>
	<body>
		<a href="宽高背景.html">aaa</a>
		<p class="aa">55 </p>
		<div >
			123
		</div>
		<ul>
			<li>列</li>
			<li>
				<ul>
					<li>表</li>
				</ul>
			</li>
			<li>
				<p>一段话</p>
			</li>
		</ul>
		<p>123</p>
	</body>
</html>