CSS样式基本知识

一个很懒的人

已于 2022-06-13 17:45:36 修改

阅读量150

点赞数

分类专栏：前端基础文章标签： css 前端 html

于 2022-06-11 09:17:56 首次发布

本文链接：https://blog.csdn.net/weixin_43715360/article/details/125193497

版权

前端基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

`推荐一个超级好用的前端网站：` w3school

前端设计案例请参考： 链接: html 、css 前端开发规划与注意事项

1.作用

美化HTML标签
	如:
		文本的大小,颜色,字体,位置等.
		背景的大小,颜色,位置等.
		标签的大小,位置等...
中文名称:层叠样式表

2.css代码书写位置

方案1: 标签的style属性中书写,这种写法称为内联样式(不建议使用)
方案2: 在head标签中书写style标签,在style标签内容区书写css代码(建议新手使用)
方案3: 在 css文件 中书写,通过link标签将其引入到使用的 html文件 中(建议熟练后使用)

示例：

方案一：

<body>
		<!--
        	不建议使用
        	1,减低了代码的可读性
        	2,降低了代码复用性
        -->
		<span style="font-size: 30px;">德玛西亚</span>
		<!--
        	<标签名 属性>内容</标签名>
        	<标签名 属性/>
        -->
	</body>

方案二

<head>
		<meta charset="UTF-8">
		<title>css书写位置2</title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
	</head>

方案三

<head>
   	<meta charset="UTF-8">
   	<title></title>
   	<link rel="stylesheet" type="text/css" href="css/demo03.css"/>
   </head>

span{
	color: red;
}

3.选择器

作用: 在css代码中寻找html中的标签


常用的选择器
	（1）基本选择器
		1.统配选择器
			作用:给当前网页所有标签都设置该样式
			语法:
				*{
					css代码
				}
				
		2.标签选择器
			作用:给当前网页中所有该标签都使用
			语法:
				标签名{
					css代码
				}
				
		3.class选择器（表示为一类样式）
			作用:给当前网页中所有class属性值为xxx的设置样式
			语法:
				.class的属性值{
					css代码
				}
			* 注意:
				所有标签都有class属性,
				并且class属性值可以重复
				一个标签可以拥有多个class属性值
				
		4.id选择器
			作用:给当前网页中id属性值为xxx的设置样式
			语法:
				#id的属性值{
					css代码
				}
			* 注意:
				一个网页中id的属性值不能重复
				
	（2）高级选择器（一般不使用）
		子代选择器
			作用:限定选取的使用范围
			语法:
				父选择器 子选择器{
			
				}
				父选择器>子选择器{
			
				}
		
	（3）伪类选择器
		* 作用:特殊情况下标签的样式
		语法:
			选择器:伪类{
				css代码
			}
		* 注意:
			hover表示鼠标悬停
			focus：当点击文本框焦点时，标签发生的变化

代码示例：

/**
 	* 伪类选择器之鼠标悬停: 其中#span表示选择器
	 */
	#span1:hover{
		color: red;
		font-size: 30px;
	}

4.当多个选择器给同一个标签设置样式听谁的?

（1）选择器优先级相同
		谁在下面听谁的
		
（2）选择器优先级不同
		谁的优先级高,听谁的（看哪一个选择器描述的更具体）
		优先级:
			内联样式 > id选择器 > class选择器 > 标签选择器 > 统配选择器
		
（3）子代选取器优先级
		- 先看子选择器是否为id选择器,
		 如果其中一个是id选择器,听id选择器的
		 如果没有id选择器或都是id选择器,此时在看父选择器优先级
		 如果父选择器优先级相同,那么在看子选择器优先级

5.文本样式

文本颜色:color
文本大小:font-size
笔画粗细:font-weight
字体样式:font-style
字体:font-family
划线:
行高:line-height 一行字所占高度
文本位置:text-align

代码示例：

<style type="text/css">
			span{
				font-size: 60px;/*字体大小*/
				font-weight: 800;/*笔画粗心*/
				font-style: normal;/*字体样式,italic斜体*/
				font-family: "楷体";/*字体*/
				
				text-decoration: underline;/*划线,underline下划线*/
				line-height: 200px;/*行高,一行字所占高度*/
				text-align: center;/*文本标签中左右的位置*/
				background: red;
			}

height与line-heigh的区别：
height表示元素标签的高度，line-heigh表示元素标签内容（eg:字体）所占的高度；
height：可以使用百分比相对父容器调整其高度，line-heigh：必须使用px描述其元素内高度
eg:
在一个元素标签内包含字体时，默认状态下其位于左上角，不在其中间位置，如果其父类包含其他字体，其会在父容器内处在同一位置，可能会导致子元素无法完美填充父元素,有部分间隙，使用height属性无法解决此问题，只有使用line-heigh才能解决完美填充问题

使用height:
使用line-height:

6.颜色规范

六位调色法（十六进制）:
eg: #FFFFFF（每两位代表一个基础颜色）

	/**
	 * 颜色:
	 * 六位调色法
	 * 	光的三原色:红绿蓝
	 * 	每个颜色的取值区间:0~255(10进制)
	 * 	10进制
	 * 		00,01,02,03,04,05,
	 * 		06,07,08,09,10
	 * 	2进制
	 * 		0,1,10,11
	 * 	8进制
	 * 		0,1,2,3,4,5,6,7,10
	 * 	16进制
	 * 		0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10
	 * 	六位调色法语法:
	 * 		#红色绿色蓝色
	 * /

rgb（十进制）:
eg: rgb(255,255,255)

	 /**
		 * rgb(红色,绿色,蓝色)
		 * 每个颜色取值范围:0~255
	 */

rgba（十进制）:
eg: rgb(0,0,0,0.3)

		/**
		 * rgba(红色,绿色,蓝色,透明度)
		 * 每个颜色取值范围:0~255
		 * 透明度取值范围:0~1,0表示全透明,1不透明
		 */

7.背景样式

（1）背景颜色
	background-color
（2）背景图片
	background-image
	配合属性:
		background-size
		background-repeat
		background-position

示例：

<style type="text/css">
			#p1{
				/**
				 * 背景颜色
				 */
				background-color: #E2E2E2;
			}
			#p2{
				/**
				 * 背景图片
				 */
				background-image:url(img/top.webp);
				/**
				 * 背景大小
				 * 1参:背景宽度,百分比代表占据当前标签的宽度的百分数
				 * 2参:背景高度
				 */
				background-size:20px 20px;
				/**
				 * 背景是否平铺
				 * 默认平铺,no-repeat不平铺
				 */
				background-repeat:no-repeat;
				/**
				 * 背景位置
				 * 1参:左右的位置,取值:数值,百分数,left,center,right
				 * 2参:上下的位置
				 */
				background-position:50% top;
			}
		</style>

8.元素类型

标签有默认的元素类型
	行内元素
		如:span,font,a,b,i...
		* 特点:设置宽高无效
	行内块元素
		如:img,input...
		* 特点:设置宽高有效,但不独占一行
	块元素:
		如:div,p,h1~h6...
		* 特点:设置宽高有效,独占一行

如何修改标签的元素类型:

	通过display属性进行修改
	display的属性值:
		block:块元素
		inline-block:行内块元素
		inline:行内元素
		none:隐藏

9.盒子模型

注意区分： 标准盒子向外扩张，IE盒子向内收缩，注意图二者宽高不同

（1）标准盒子
	标签实际宽/高=宽/高+左/上内边距+右/下内边距+左/上边框+右/下边框+左/上外边距+右/下外边距

标准盒子

（2）IE盒子(当改变边框和内边距大小时，总体上盒子的大小不变)
	标签实际宽/高 = 宽/高+左/上外边距+右/下外边距
	如何设置标签为IE盒子:box-sizing: border-box;

在这里插入图片描述
示例：

<style type="text/css">
			#box01{
				/**(1)
				 * 可以使用定值,如200px,
				 * 也可以使用百分数,指的是父容器的百分数
				 */
				width: 200px;
				height: 200px;
				background: red;
				
				/**(2)
				 * 内边距
				 * 		给四个方向都加内边距
				 */
				padding: 30px;
				/*padding-top: 50px;*/
				
				/**(3)
				 * 边框
				 * 1参:边框宽度
				 * 2参:边框样式
				 * 3参:边框颜色
				 */
				border: 10px solid blue;
				
				/**(4)
				 * 边框角度
				 */
				/*border-radius: 50%;*/
				
				/**(5)
				 * 外边距,默认给4个方向都加
				 */
				margin: 30px;
			}
			#box02{
				width: 200px;
				height: 200px;
				background: green;
				/**
				 * IE盒子(当改变边框和内边距大小时，总体上盒子的大小不变)
				 */
				box-sizing: border-box;
				padding: 50px;
				border: 20px solid red;
				
				/*改变外边距时，从整体上看会变大
				margin: 30px;*/
				
				/**
				 * 阴影
				 */
				box-shadow: -10px 0px 10px black;
			}
		</style>

示例图解析：
盒子模型解析

10.定位

定位的作用： 移动标签的位置,对必须标签的位置进行设定

具体可参照前端项目： 仿百度前端静态页面制作

1.相对定位

相对定位:relative
	作用:相对于标签的原位置进行移动
	特点:会保留标签的原位置
	配合使用的属性有:
		left:相对于标签原位置左边向右移动的距离
		right:相对于标签原位置右边向左移动的距离
		top:相对于标签原位置顶部向下移动的距离
		bottom:相对于标签原位置底部向上移动的距离
		z-index:层级,取值范围-99~99,没有使用定位的标签默认层级为0
	使用情况:
		1,对标签的位置进行微调
		2,对于内部标签使用绝对定位奠定基础（绝对定位是相对于离其最近的父容器进行移动定位）

2.浏览器窗口定位

浏览器窗口定位:fixed
	作用:将指定的标签设置到浏览器的指定位置,参考位置是浏览器窗口
	配合使用的属性有:
		left:距离浏览器窗口左边的距离
		right:距离浏览器窗口右边的距离
		top:距离浏览器窗口顶部的距离
		bottom:距离浏览器窗口底部的距离
		z-index:层级,取值范围-99~99,没有使用定位的标签默认层级为0
	使用情况:让标签恒定于浏览器窗口的某个位置使用该定位

3.绝对定位

绝对定位:absolute
	作用:相对于离其最近一个上层做过定位的父容器的距离
	配合使用的属性有:
		left:相对于最近一个上层做过定位的父容器左边的距离
		right:相对于最近一个上层做过定位的父容器右边的距离
		top:相对于最近一个上层做过定位的父容器顶部的距离
		bottom:相对于最近一个上层做过定位的父容器底部的距离
		z-index:层级
	使用情况:
		将标签移动到父容器的某个位置

11.动画

动画主要包含：动画的定义和动画的使用

* 动画的定义
	语法格式:
		基础语法:
		@keyframes 名称{
			from{
				动画开始时,标签的样式
			}
			to{
				动画结束时,标签的样式
			}
		}
		高级语法:
		@keyframes 名称{
			0%{
				动画开始时,标签的样式
			}
			100%{
				动画结束时,标签的样式
			}
		}
		
* 动画的使用
	语法格式:
	animation: 要执行的动画名称 动画单次执行时间 执行次数 运行速率;
	执行次数使用infinite表示无限重复
	运行速率使用linear表示匀速执行

示例代码：

	#text{
			line-height: 40px;
			background: white;
			width: 80px;
			height: 40px;
			text-align: center;
			display: inline-block;
			position: absolute;
			animation: dong 10s 1 linear;/*引用动画*/
		}
		/*定义动画*/
		@keyframes dong{
			0%{
				left: 0;
			}
			50%{
				left: 320px;
			}
			100%{
				left: 0;
			}
		}

12.浮动

一般情况下不会使用浮动，因为浮动实现的效果使用定位也可以实现

作用:移动标签位置

特点:不会保留标签的原位置

缺点:
	会导致空间塌陷,影响别的标签的位置

防止空间塌陷代码:
	.clear:after{
		content: "123";
		clear: both;
		visibility: hidden;
		display: block;
		height: 0;
	}
	
	使用:
		使用情况:X标签中的子标签使用了浮动,导致了空间塌陷
		使用步骤:
			1,给X标签设置class值为clear
			2,将代码拷贝到css代码中