CSS基本概念以及语法

最新推荐文章于 2024-07-21 20:52:32 发布

邮你拥抱

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量193

点赞数

分类专栏： CSS知识总结文章标签： css

本文链接：https://blog.csdn.net/qq_52344261/article/details/112258820

版权

CSS知识总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1.概述（cascade style sheet）层叠样式表

	1. 原因：
			1.HTML功能太弱
			2.可以节省流量	
			3.降低耦合度
	2. 作用：就是给HTML的各种元素添加样式
	3. 注释：/**/

2.CSS语法

	1. 选择器{
		属性：值；
	}

3.CSS和HTML结合的方式

	1. 内联样式
			* 在标签中采用style属性书写
	2. 内部模式
			* 在head标签内，采用style标签来书写，style标签的标签体就是CSS代码
	3. 外部样式
		1. 定义CSS资源文件
		2. 在head标签内，定义link标签，引入外部的CSS资源文件
			* 采用：<link rel = "stylesheet" href = "a.css"></link>
			* 采用@import 路径的方式，在style标签中写，必须是第一句
			* 区别：在外部样式表中可以写@import，但不能写link标签。

4.选择器分类

1.基本选择器

		1. 标签选择器：选择器的名字代表了页面上的一类标签
		2. 类选择器：规定用圆点（.）来定义一个名字。灵活，任何标签都能用
		3. ID选择器：规定用（#）来定义，只针对特定的一个标签
		4. 通用选择器：规定用（*）来定义，针对页面所有的标签

		<style>
			/*标签选择器*/
			h2{
				color: red;
			}
			/*ID选择器*/
			#d1{
				font-size: 50px;
				color: #DC143C;
				border: 3px solid green;
				font-family: 华文琥珀;
			}
			/*类选择器*/
			.c1{
				color: blueviolet;
				font-size: 40px;
			}
			/*通用选择器*/
			*{
				cursor: pointer;
			}
		</style>

2.扩展选择器

		1. 组合选择器：把多个选择器用逗号连接起来，表示多个选择武器使用共同的样式
		2. 后代选择器：把多个选择器用空格连接起来，表示什么什么里面的元素
		3. 伪类选择器：用冒号来定义，一般用于超链接<a>
				1. 静态伪类：
					* link:初始化状态
					* visited:被访问过的状态
					* active:正在访问的状态
					* hover:鼠标悬浮状态
				2. 动态伪类：
					* focus：元素聚焦

		<style>
				/*组合选择器*/
			   p,h2,h3,#d1{
				   color: #5555FF;
			   }
			   /*后代选择器*/
			  div .c1{
				   border: 2px solid #55007F;
			   }
			   /*伪类选择器*/
			   a:link{
				   color: #FF0000;
				   font-size: 30px;
			   }
		   </style>

5.选择器的优先级

	1. 从这个样式表的类型来说：行级 > 内部 > 外部
	2. 从选择器的类型来说：ID > 类选择器 > 标签选择器
		* 任何情况下，ID选择器的优先级别最高
		* 如果选择器一样，后引入的优先级别高

6.各种属性

1.单位

		* 绝对单位：1in = 2.54cm = 25.4mm = 72pt = 6pc
		* 相对单位：px(像素)，%（百分比),em,rem

		<style>
			#d1{
				font-size: 0.5in;
			}
			h2{
				font-size: 8pc;
			}
			div #i1{
				font-size: 50px;
			}
			div #i3{
				font-size:300%;
			}
		</style>

2.字体属性：

		* font-size：字体大小
		* font-weight：粗体
		* font-style：italic:斜体
		* font-family：字体
		* font-variant：小写变大写

		<style>
			#d1{
				font-size: 50;
			}
			#d2{
				font-weight: bold;
			}
			.c1{
				font-style: italic;
			}
			.c2{
				font-family: 方正舒体;
			}
			div{
				font-variant: small-caps;
			}			
		</style>

3.文本属性：

		* color：颜色
		* text-decoration：文本装饰；underline，overline，line-through
		* text-align：文本的对齐方式
		* letter-spacing：字母间距（了解）
		* word-spaci：单词间距（了解）

		<style>
			p{
				color: red;
				text-align: center;
				text-decoration: underline;
				letter-spacing: 5px;
				word-spacing: 50px;
			}		
		</style>

4.背景属性

		* background-color：背景颜色
		* background-image：url（路径）背景图片
		* background-position
		* background-repeat
		* background-attachment

		<style>
			body{
				background-color: aquamarine;  /*背景颜色*/
				background-image: url(./img/b.jpg);  /*图片地址*/
				background-repeat: no-repeat;  /*背景重复*/
				background-position: right top;  /*背景位置*/
				background-attachment: scroll;  /*背景 适应方式*/
				background-attachment: fixed;
			}
		</style>

5.列表属性

		* list-style-type：none  列表项前什么都不放
		* list-style-image  列表项前放图片
		* list-style-position  位置

		<style type="text/css">
			ul{
				list-style: none;
				list-style-image: url(./img/icon.JPG);
				list-style-position: inside;
			}
		</style>

6.盒子模型

		* 属性
			* padding 内容到边的距离
			* border 边框
			* margin 盒子到盒子的距离
			* weight 内容的高度
			* hight 内容的宽度

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>盒子模型</title>
			<style type="text/css">
				#d1{
					width: 50px;
					height: 50px;
					border: 1px solid red;
					/* padding: 50px; */
					padding-left: 20px;
					padding-top: 20px;
					margin: 50px;
				}
				#d2{
					width: 100px;
					height: 100px;
					border: 1px solid red;
					padding: 50px;
					/* padding-left: 20px;
					padding-top: 20px; */
					margin-top: 20px;
				}
				div{
				
					border: 1px solid red;
				}
				#div1{
					height: 200px;
					width: 200px;
					/*以外盒子为基准，设置内边距*/
					padding: 50px;
					/*默认情况padding会影响盒子的大小*/
					/*设置盒子的属性，让height和width就是最终大小*/
					box-sizing: border-box;
				}
				#div2{
					height: 100px;
					width: 100px;
					/*以内盒子为基准，设置外边距*/
					/* margin: 50px; */
				}
			</style>
		</head>
		<body>
			<div id="d1">
				黄蓉
			</div>
			<div id="d2">
				黄蓉
			</div>
			<br>
			<div id="div1">
				<div id="div2">
					
				</div>
			</div>
		</body>
	</html>

结果展示：
在这里插入图片描述

7.定位属性：

		* 顺序流：指控件（标签）按照从左到右从上到下的顺序排列的一种顺序
			* 有两种情况会脱离顺序流
				* 第一种是绝对定位。
				* 第二种是设置浮动属性
		* position：定位
			* 相对定位:圆点在父盒子的左上角
			* 绝对定位:相对于自己在顺序流中的原位置的左上角为圆点
		* left：x坐标
		* top：y坐标

8.鼠标属性：

		* cursor pointer手型

		<style type="text/css">
			p{
				cursor: pointer;
				/* cursor: copy;
				cursor: move; */
			}
		</style>

9.其他属性：

		* display：显示或隐藏  block，none
		* z-index：z轴，垂直于屏幕的
		* overflow：超出内容：auto
		* opacity：透明度（0-1之间）

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>其他属性</title>
			<style type="text/css">
				img{
					display: none;
				}
				div{
					width: 200px;
					height: 200px;
					overflow: auto;
				}
				#d1{
					width: 100px;
					height: 100px;
					background-color: #7FFFD4;
					z-index: 10;
				}
				#d2{
					position: absolute;
					left: 300px;
					top: 300px;
					opacity: 0.2;
					background-color: #55007f;
					z-index: 5;
				}
			</style>
		</head>
		<body>
			<button οnclick="document.getElementById('img').style.display= 'block'">显示</button>
			<img src="img/b.jpg" id="img" >
			<div id="">
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
				<p>zxcvbnmkloiuytresghjnbvcdfghnbvcdfghbvcdfg</p>
			</div>
			<div id="d1">
				
			</div><br>
			<div id="d2">
				
			</div>
		</body>
	</html>