CSS速记

只想睡觉111

已于 2023-06-05 19:53:08 修改

阅读量135

点赞数

文章标签： css html css3

于 2023-06-04 01:15:34 首次发布

本文链接：https://blog.csdn.net/qq_44199379/article/details/131027608

版权

简单记录一下CSS相关知识，方便后续查阅。

一、CSS引入方式

1.1 内联方式（行内样式）

 例如
<p style="background:red; font-size:24px;"></p>

1.2 内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。

<head>
	<style>
		h1 {
			background: red;
		}
	</style>
</head>

1.3 外部样式表

当样式需要应用于很多页面时，外部样式表是最好的选择。在使用外部样式表的情况下，你可以通过一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签定义在（文档的）头部。

<link rel="stylesheet" type="text/css" href="xxx.css">

二、CSS选择器

2.1 标签选择器

选择器优先级为：行内样式>id选择器>类选择器>元素选择器>通用选择器
同级别的选择器，写在后边的选择器会覆盖写在前边的选择器的效果。

类别	符号	描述
ID选择器	#	针对某一个特定的标签来使用，只能使用一次
类选择器	.	同一个标签的可以使用多个类选择器，用空格隔开
元素选择器	标签名	-
通用选择器	*	-

2.2 关系选择器

类别	符号	描述
后代选择器	E F{}	选择所有被E包含的F元素，中间用空格隔开
子代选择器	E>F{}	选择所有作为E元素的直接子元素F，对更深层的元素不起作用，用>表示
相邻兄弟选择器	E+F{}	选择紧跟E元素之后的F元素，用+表示，仅选择其后的一个元素
通用兄弟选择器	E~F{}	选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

三、各个类别的属性

类别	属性	描述
字体属性	color	字体颜色
-	font-size	字体大小，一般以像素为单位
-	font-weight	字体粗细，100-900表示，400为正常，700为加粗，700-900无效果
-	font-family	元素字体，“微软雅黑”、“SimHei”、“Simsun”等
-	font-style	字体样式，normal表示正常，italic表示斜体
背景属性	background-color	设置背景颜色
-	background-image	设置背景图片
-	background-position	设置背景图片显示位置
-	background-repeat	设置背景图片如何填充，cover为充满裁剪填充，contain为充满不裁剪填充
-	background-size	设置背景图片大小属性
文本属性	text-align	指定元素的水平对其方式
-	text-decoration	规定添加到文本的修饰，underline是下划线，overline是上划线，line-through是删除线
-	text-transform	控制文本的大小写，capitalize定义每个单词开头大写，uppercase定义全部字母大写，lowercase定义全部字母小写
-	text-indent	规定文本块中首行文本的缩进，单位为px
表格属性	border	边框，例如border：1px solid black
-	border-collapse	设置表格的边框是否被折叠成一个单一的边框
-	width	表格宽度
-	height	表格高度
-	text-align	设置水平对齐方式
-	vertical-aling	设置垂直对齐方式
-	padding	表格填充宽度
-	color	字体颜色
-	background-color	背景颜色
布局属性	display	flex设置盒子为弹性容器
-	flex-direction	指定弹性子元素在父容器中的排列方式，可取row、row-reverse、column、column-reverse
-	justify-content	设置盒子元素在主轴上的对其方式，可取flex-start、center、flex-end
-	align-items	设置盒子元素在侧轴上的对其方式，可取flex-start、center、flex-end
-	flex	根据弹性盒子元素所设置的拓展因子作为比率来分配剩余空间
浮动属性	float	设置元素为浮动的，相当于新建了一个图层，以与标准流区分，可取left、right
-	clear	清除浮动效果，用于解决浮动带来的副作用，可取left、right、both
-	overflow	清除浮动效果，和clear同时使用，用于父级元素不能指定高度时，可取hidden
-	after	伪标签，用法例如.container::after{content:“”;display:block:clear:both;}
定位属性	position	可取relative、fixed、absolute，设置后可使用四个方向关键词调整元素位置。absolute每个元素都会新建一个图层。
-	z-index	设置图层优先级，数值越大越靠上
CSS3新特性	-	-
阴影	border-radius	设置圆角矩形，数值（px）为圆的半径
-	box-shadow	可取h-shadow、v-shadow、blur(模糊度)、color
动画	@keyframes name{百分比1{样式1}，百分比2{样式2}}
-	animation	见下图
媒体查询	-	用于不同设备的显示设置
-	@media screen and (屏幕像素){样式}

在这里插入图片描述

四、盒子模型

经典盒子模型
html的任何一个元素都是一个盒子，从外到内一次为margin（外边距）、border（边框）、padding（内边距）、content（内容）。在设置块级元素时，设置的宽度是content的宽度。
弹性盒子模型
弹性盒子模型是CSS3的一种新的布局样式。弹性盒子由弹性容器和弹性子元素组成。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性容器通过设置display属性的值为flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素。