最全css样式表

最新推荐文章于 2024-03-08 14:14:04 发布

Torres-圣君

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量1.2k

点赞数 3

分类专栏： web前端笔记文章标签： css

本文链接：https://blog.csdn.net/qq_44091819/article/details/114777862

版权

web前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<！DOCTYPE html>
<html lang = "en">
<head>
    <meat charset = "UTF-8">
    <title></title>
    //外部css
    <link rel="stylesheet" type="text/css" href="路径">
    //内部css
    <style>
        选择器 {
        	属性名称；属性对应值；
        }
    </style>
</head>
<body>
	//行内css
	<h1 style="color:red;">行内css</h1>
</body>
</html>

文字属性相关

文字样式
- font-style:样式
文字粗细
- font-weight:粗细
文字大小
- font-size:大小
文字字体
- font-family:字体,备选字体
合并简写：
- font: 样式粗细大小字体

文本属性相关

文本缩进
- text-indent:缩进距离
文本对齐
- text-align:对齐方向
文本居中
- text-align: center
文本划线
- text-decoration:划线
文本颜色
- color:颜色

图片边框属性相关

边框宽度
- border-width: 宽度px
边框样式
- border-style: 样式
边框颜色
- color: 颜色
边框圆角
- border-radius:大小px

选择器

标签选择器

标签 {
    属性:值;
}

ID选择器

#ID名称 {
    属性:值;           //配合id = "xxx"使用
}

类选择器

.类名 {
    属性:值;           //配合class = "xxx"使用
}

后代选择器

#ID名称 .类名1 .类名2··· {
    属性:值;             //同上
}

子元素选择器

div>标签>标签>··· {
    属性:值;             //">"是指地址
}

交集选择器

标签名.类名 {
    属性:值;
}

并集选择器

ID名称,.类名 {
    属性:值;
}

相邻兄弟选择器

标签1 + 标签2 {
    属性:值;
}

通用兄弟选择器

标签1 ～ 标签2 {
    属性:值;
}

序选择器相关

选中同级别中的第一个标签

标签:first-child {
    属性:值;
}

选中同级别中的最后个标签

标签:last-child {
    属性:值;
}

选中同级别中的第n个标签

标签:nth-child(n) {
    属性:值;
}

选中同级别中的倒数第n个标签

标签:nth-last-child(n) {
    属性:值;
}

选中父元素中唯一的元素

标签:only-child {
    属性:值;
}

选中父元素中唯一类型的某个标签

标签:conly-of-type {
    属性:值;
}

选中同级别中同类型的第一个标签

标签:first-of-type {
    属性:值;
}

选中同级别中同类型的最后一个标签

标签:last-of-type {
    属性:值;
}

选中同级别中同类型的第n个标签

标签:nth-of-type(n) {
    属性:值;
}

选中同级别中同类型的倒数第n个标签

标签:nth-last-of-type(n) {
    属性:值;
}

选中同级别中的所以奇数

标签:nth-child（odd）{
    属性:值;
}

选中同级别中的所以偶数

标签:nth-child（oven）{
    属性:值;
}

选中自定义的标签

标签:nth-child（xn+y）{
    属性:值;
}

属性选择器相关

根据指定属性找到对应的标签

标签[id] {
    属性:值;
}

根据class标签找到指定的属性

标签[class ="xxx"] {
    标签:值;
}

属性的值是以什么开头的

标签[alt ^="xxx"] {
    属性:值;
}

属性取值是以什么结尾的

标签[alt $="xxx"] {
    属性:值;
}

属性取值是否包含某个特定的值

标签[alt *="xxx"] {
    属性:值;
}

选中全文的标签设置属性

* {
    属性:值;
}

优先级相关

提升直接选中标签的优先性

直接选中的标签 {
    属性:值!important;
}

直接选中标签的权重问题
- 优先级：id> 类> 标签> 继承> 默认
- 计算优先级得权重
- 只有font color text line开头的属性才可以继承

div和span标签

div标签 – 容器级标签（可以嵌套所有的标签）
- 作用：完成网页的基本布局
- 注意点：div标签独占一行
- 格式：

<div class="xxx">
    标签属性
</div>

span标签 – 文本级标签（只能嵌套文字，图片和超链接）
- 作用：修改文本的局部信息
- 注意点：span标签不会独占一行
- 格式：

<span>内容</span>

显示模式的转换

转换为块级元素
- 块级元素是在容器级标签的基础上多了p标签
- 注意点：块级元素独占一行，可以控制宽高
- 格式：

display:block;

转换为行内元素
- 行内级元素是在文本级标签的基础上少了p标签
- 注意点：行内元素不会独占一行，不能控制宽高
- 格式：

display:inline;

转换为块级行内元素
- 不独占一行，并且可以控制宽高
- 格式：

display:inline-block;

背景属性

设置背景颜色

background-color: 颜色;

设置背景图片

background-image: url(图片地址);

页面背景图片

body {
    background-image: url(图片地址);
}

图片平铺属性

background-repeat: repeat-x;    //x轴平铺
background-repeat: repeat-y;    //y轴平铺
background-repeat: no-repeat;   //不平铺

图片关联方式

background-attachment: fixed; //页面动图不动

背景图片定位

background-position: 方向 方向;
//水平方向：left，center，right
//垂直方向：top，center，bottom

背景属性缩写

background: 颜色 图片 平铺 关联 定位;

盒模型属性css

边框属性
- 格式：

border-top: 宽度 样式 颜色;       //上边框
border-left: 宽度 样式 颜色;      //左边框
border-right: 宽度 样式 颜色;     //右边框
border-botom: 宽度 样式 颜色;     //下边框

border: 宽度 样式 颜色;       //四条边都相等
例：border: 1px solid #000;
//虚线样式：dashed
border-width: 上 右 下 左;
border-style: 上 右 下 左;   //一步设置四条边
border-color: 上 右 下 左;

内边距属性

padding-top: 宽度;
padding-left: 宽度;
padding-right: 宽度;
padding-bottom: 宽度;

padding: 上，右，下，左;   //四条边的内边距宽度

外边距属性

margin-top: 宽度;
margin-left: 宽度;
margin-right: 宽度;
margin-bottom: 宽度;

margin: 上，右，下，左; //四条边的外边距宽度
margin: 上 auto;      //auto：只可水平方向居中

盒子模型计算

内容宽高 = width或height
外边距：margin
内边距：padding
元素宽高  = 边框 + 内边距 + `内容高度`或`宽度`
边框：border
元素空间宽高 = 外边框 + 边框 + 内边距 + `内容高度`或`宽度`

盒子box-sizing属性
- 作用：
  - 保证元素宽高不变的情况下，添加padding和margin属性时超过了元素宽高的值时，自动改变内容的宽高
- 格式：

box-sizing: border-box;

水平居中

text-align: center;  和  margin: 0 auto; 的区别

text-align: center; -> 边框内部的内容居中
margin: 0 auto; -> 盒子边框整体居中

清空默认的外边距

* {               //范围太广比较不实用
	padding: 0;
	margin: 0;
} 

body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, tex tarea, p, blockquote, th, td {
	//用于大项目的开发时
	padding: 0;
	margin: 0;
}

边框内的行高
- 作用：
  - 设置行高的高度等于边框的高度时，可以使单行文字在边框中垂直居中显示(只适用于一行文字)，如果有多行文字则应使用padding来垂直居中
- 格式：

line-height: 高度;

浮动流

浮动流的基本概念
- 注意点：
  - float中不能使用center居中，也不能使用margin: 0 auto进行距中
- 好处：
  - 无论是块级元素/行内元素/块级行内元素都可以进行水平排版、都可以进行设置宽高
- 格式：

float: left;           //左对齐
float: right;           //右对齐

浮动的排版规则
- 从外向内，从上向下；
- 在浮动流中，浮动的元素不能撑起父元素的高度。
清除浮动
- 注意点：
  - 当使用clean后margin将会失效。
- 格式：clean: both; //清除左右浮动
- 格式：overflow: hidden;
- 作用：
  - 可将超出标签范围的内容截剪掉；
  - 如果在盒子里设置了margin-top，则可以让外面的盒子不会掉下来

伪元素选择器

格式（div内容之前）：

div::before {
	content: "内容";         //添加子元素内容
	width: 宽度;               //添加内容的宽度
	height: 高度;              //添加内容的高度
	background-color: 背景颜色;
	display: block;          //转换为块级元素
	visibility: hidden;     //隐藏添加的内容
}

格式（div内容之后）：

div::after {
	content: "内容";        //添加子元素内容
	width: 宽度;               //添加内容的宽度
	height: 高度;              //添加内容的高度
	background-color: 背景颜色;
	display: block;          //转换为块级元素
	visibility: hidden;      //隐藏添加的内容
}

定位流

标准定位
- 注意点：
  - 标准定位流不会脱离标准流的空间，只能在标准流内进行上右下左的移动
- 格式：

position: relative;
top: 大小px;          //相当于上外边距
right:  大小px;       //相当于右外边距
bottom: 大小px;       //相当于下外边距
left: 大小px;         //相当于左外边距

绝对定位
- 注意点：
  - 主要是祖先关系的定位流都可以实现绝对定位，那个定位流离它最近就在那里定位
- 格式：

position: absolute;
top: 大小px;           //相当于上外边距
right:  大小px;        //相当于右外边距
bottom: 大小px;        //相当于下外边距
left: 大小px;          //相当于左外边距

子绝父相：
- 将子元素是绝对定位，将父元素是相对定位
水平居中：

left: 50%;
margin-left: 元素宽度的一半;

a标签伪类选择器

格式：

//修改从来被访问过状态下的样式
选择器标签:link {
	color: 颜色;
}

//修改被访问过的状态下的样式
选择器标签:visited {
	color: 颜色;
}

//修改鼠标悬停状态下的样式
选择器标签:hover {
	color: 颜色;
}

//修改鼠标长按状态下的样式
选择器标签:aetive {
	color: 颜色;
}

注意点：
- 如果四种同时出现，则必须按照爱恨原则排序love hate，如果需要修改访问过和未访问过的颜色一样时，则可以简写为：

a {
	color: 颜色;
}

过度模块

基本格式

transition-property: 变化的标签,变化的标签;
transition-duration: 秒数,秒数;
transition-delay: 延时时间s;

选择器标签:hover {
	//变化的宽度,高度,内外边距大小，颜色
	例：margin: 100px;
	例：width: 100px;
	例：background-color: red;
}

控制模块移动速度
- 格式：

选择器标签:nth-child(序数) 标签 {
transition-timing-function: 速度;
	linear：匀速
	ease：慢慢变慢
	ease-in：由慢变快
	ease-out：由快变慢
	ease-in-out：由慢变快再变慢
}

合并连写

transition:过渡属性 过渡时长 运动速度 延时时间;

2D转换模式

2D图形旋转

transform: rotate(度数deg);

2D图形移动

transform: translate(水平px,垂直px);

2D图形缩放

transform: scale(水平,垂直);

形变中心点

transform: origin(xxx%,xxx%);

旋转轴向.默认是X

transform: rotate X/ Y/ Z(度数deg);

透视属性.近大远小

perspective: 大小px;

动画模块

动画三要素

animation-name: xxx;
animation-duration: 时间;
@keyframs xxx {
	from {
		属性: 值;
	}
	to {
		属性: 值;
	}
}

动画延时

animation-delay: 延迟;

动画速度

animation-timing-function: 同上;

动画次数

animation-iteration-count: 次数;

动画往返

animation-direction: alternate;

悬停暂停

animation-play-start: paused;

连写格式

animation: 动画名字 动画时长 运动速度 延时时间 执行次数 是否往返;

Torres-圣君

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
最全css样式表

<！DOCTYPE html><html lang = "en"><head> <meat charset = "UTF-8"> <title></title> <style> 标签名称；属性名称；属性对应值； ...... </style></head><body></body>&l
复制链接

扫一扫