CSS 思维导图模板_ProcessOn思维导图、流程图

内联式

内嵌式

嵌入式css样式写在<head></head>之间

外部式

html：<link href=''base.css" rel="stylesheet" type="text/css"/>

css样式: span{color.red}

rel="stylesheet" type="text/css"是固定写法不可修改

选择器

标签选择器

p {color : red}

类选择器

. p { color : red }

div . p { color : red }

需要同时满足两个条件

ID选择器

#one { color : red }

类选择器与ID选择器区别

类选择器可多次使用

可以用类选择器词列表方法为【一个元素】同时设置多个样式。如.one{ ~} .two {~} <h1 class="one two"></h1>

ID选择器可且仅可使用一次

子选择器

food>li{~} 即">"用于选择指定标签元素的第一代元素

包含选择器

first span{~} 即加入空格，用于指定标签元素下的后辈元素

通用选择器

*{~} 作用于html下所有标签

分组选择符

h1,h2,h3{~} 用于较多标签共用部分样式

伪类选择符

允许给html不存在的标签（标签的某种状态）设置样式。例：鼠标滑过超链接变换颜色，a:hover{~}

被点击过的超链接样式。例：点击超链接过后颜色改变，a:visited{~}

在超链接上单击时，即“当前激活”时超链接的样式。例：点击超链接时颜色改变，a:active{~}

样式

字体

font-style

文本的字体样式

font-size

字体的大小

font-family

什么字体

font-weight

文本的粗细

颜色

color

文本的颜色

opacity

颜色的透明度

背景

background-color

背景颜色

background-image

背景图片

background-repeat

背景图片是否重复

background-size

背景图片的大小

background-attachment

背景图片是否随内容滚动

边框

border-color

设置四条边框的颜色

border-width

设置四条边框的宽度

border-style

设置四条边框的样式

border-left

设置左边框的属性，其他边框同样

border-left-color

设置左边框的颜色，其他边框同样

border-left-style

设置左边框的样式，其他边框同样

border-left-width

设置左边框的宽度，其他边框同样

基本属性

尺寸

width

min-width

max-width

min-height

max-height

文本

overflow：hidden

多出后隐藏

text-overflow

文本溢出

text-align：center

文本居中

text-transform

设置对象中的文本的大小写

text-decoration

文本有无装饰

text-indent

首行文本缩进

line-height

对象的行高

letter-spacing

字的间距

vertical-align

对象内容的垂直对齐方式

word-wrap

超过容器边界是否换行

列表

list-style-image

列表项标记的图像

list-style-position

列表项如何根据文本排列

list-style-type

定义列表项符号

表格

border-collapse

设置是否把表格边框合并为单一边框

border-spacing

设置分割单元格边框的距离

caption-side

设置表格标题的位置

empty-cells

设置是否显示表格中的空单元格

CSS3

新增选择器

属性选择器

E[att^="val"] 属性att的值以"val"开头的元素

E[att￥="val"] 属性att的值以"val"结尾的元素

E[att*="val"] 属性att的值包含"val"字符串的元素

结构伪类选择器

：root

选择匹配文档的根元素

E:nth-chlild(n)

选择所有在其父元素中第n个位置的匹配E的 子元素

E:nth-last-child(n)

选择所有在其父元素中倒数第n个位置的 匹配E的子元素

E:nth-of-type(n)

选择所有在其父元素中同类型第n个位置 的匹配E的子元素

E:nth-last-of-type(n)

选择所有在其父元素中同类型倒数第n个位置 的匹配E的子元素

E:last-child

选择位于其父元素中最后一个位置，且匹配E的子元素

E:first-of-type

选择在其父元素中匹配E的第一个同类型子元素

E:last-of-type

选择在其父元素中匹配E的最后一个同类型子元素

E:only-type

选择在其父元素只包含一个子元素，且该子元素匹配E

E:only-of-type

选择在其父元素只包含一个同类型的子元素，且该子元素匹配E

E:empty

选择匹配E的元素，且该元素不包含子元素

UI伪类选择器

E:enabled

选择匹配E的所有可用UI元素

E:disabled

选择匹配E的所有不可用UI元素

E:checked

选择匹配E的所有可用UI元素

E:read-write

选择匹配可读及可写的元素

E:read-only

选择匹配设置“readonly”（只读）属性的元素

E:selection

匹配元素中被用户选中或处于高亮状态的部分

E:out-of-range

用于标签的值在指定区间之外时显示的样式

E:in-range

用于标签的值在指定区间之内时显示的样式

E:optional

用于匹配可选的输入元素

E:required

用于匹配设置了“required”属性的元素

E:valid E:invalid

用于匹配输入值为合法、非法的元素

其他CSS3选择器

E~F

通用兄弟元素选择器。选择匹配F的所有元素，且匹配元素 位于匹配E的元素后面

E:not(s)

否定伪类选择器。选择匹配E的所有元素，且过滤掉匹配s选择 符的任意元素。E:not(s)选择器相当于二次过滤，是和精确选择元素

E:target

目标伪类选择器类型。选择器匹配E的所有元素，且匹配元素 被相关URL指向。该选择器是动态选择器，只有当存在的URL 指向该匹配的元素时，样式效果才能够起效

边框

border-radius

这个属性允许你为元素添加圆角边框

border-image

这个属性允许你为元素添加边框背景

source 定义边框的背景图片源。

slice 定义如何裁剪背景图像

width 定义边框背景图像显示大小（即边框显示大小）

outset 定义边框背景图像的偏移位置（不支持）

repeat 定义重复性，重复（repeated）、拉伸（stretched）、平铺（rounded）

box-shadow

设置一个或多个下拉阴影的框

h-shadow:必需的。水平阴影的位置，允许负值。

v-shadow：必需的。垂直阴影的位置，允许负值。

blur：可选。模糊距离

spread：可选。阴影的大小

color：可选。阴影的颜色

背景

background-origin

用来定义背景图像的定位区域

语法：background-origin：padding-box|border-box|content-box

background-clip

用来定义背景图像的裁剪区域

background-size

用来定义背景图像的大小

文本属性

text-shadow

用于定义文本阴影或模糊效果

text-overflow

用来定义省略文本的处理方式

word-wrap

用来定义文本超过指定容器的边界时是否断开转行

常用颜色

RGBA颜色值

HSL颜色值

HSLA颜色值

使用颜色值translate

2D变形

transform

translate()

XY轴移动

scale()

改变宽度、高度

rotate()

旋转

skew()

倾斜

transform-origin

动画设计

transition

简写属性

transition-property

规定应用过度的CSS属性的名称

transition-duration

定义过度效果花费的时间。默认0

transition-timing-function

规定过渡效果的时间曲线。默认“ease”

transition-delay

规定过渡效果何时开始。默认0

animations动画

animation-name

规定@keyframes动画的名称

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认0

animation-timing-function

规定动画的速度曲线。默认“ease”

animation-delay

规定动画何时开始。默认0

animation-iteration-count

规定动画被播放的次数。默认1

animation-direction

规定动画是否在下一周期逆向地播放/默认是“normal”

animation-play-state

规定动画是否正在运行或暂停。默认“running”

animation

除animation-play-state属性外所有动画属性的简写

渐变效果

线性渐变 Linear Gradients

三个参数。 1、表示渐变方向 2、表示起点颜色 3、表示终点颜色

径向渐变 Radial Gradients

盒子模型

盒模型

由content、padding、border、margin组成

border

边框

color

width

style

padding

内边距

用于控制content与border之间的距离

设置padding属性时为顺时针方向

margin

外边距

指元素与元素之间的距离

当设置为负数时，会使得块向反方向移动，甚至覆盖在另外的块上

当块是父子关系时，margin可以设置为负数，使得子块与父块进行分离

浮动与定位

float

left

right

none

clear

left

right

both

position

fixed

绝对定位，相对于浏览器窗口

absolute

绝对定位，相对于static定位外的第一个父元素

relative

相对定位，相对于自身在父块的原先位置进行定位

static

默认值，无定位

z-index

用于调整定位时重叠块的上下位置

当块设置了position属性时，该值便可设置各块之间的重叠高低关系

默认值为0

display

none 隐藏对象

inline 设为内联元素，不可设置宽高

block 设为块级元素

inline-block 设为内联块元素，像行内元素一样，可设置宽高

table-cell 设为表格单元格

flex弹性盒模型

概述

设置display：flex属性可以把块级元素在一排显示

默认为从左往右依次排列，且和父元素左边没有间隙

flex需要添加在父元素上，改变子元素的排列顺序

给子元素设置flex属性，可以设置子元素相对于父元素的占比

flex属性的值只能是正整数，表示占比多少

给子元素设置了flex之后，其宽度属性会失效

justify-content

竖轴上属性

flex-start

默认值，左对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

baseline

项目的第一行文字的基线对齐

stretch

默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

横轴上属性

flex-start

交叉轴的起点对齐

flex-end

右对齐

center

居中

space-between

两端对齐，项目之间的间隔都相等

space-around

每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

grid布局

网格容器

属性

display

声明，当元素设置了网格布局，column、float、clear、vertical-align属性无效

grid

生成块级网格

inline-grid

生成行内网格

subgrid

如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小

目前所有浏览器都不兼容

grid-templete

使用以空格分隔的多个值来定义网格的列和行

属性

track-size

可使用css长度、百分比或用分数（fr）

line-name

可选择任何名字

grid-templete-areas

对网格取名时，用空格隔开，一个 . 代表空

grid-template-rows

grid-templete-columns

gap

指网格线的大小

gird-column-gap

列网格线

gird-row-gap

行网格线

items

属性值

start

内容与网格区域的左端对齐

end

内容位于网格区域的右端对齐

center

内容位于网格区域的中间位置

stretch

内容宽度占据整个网格取域空间

align-items

属性值

start

内容与网格区域的左端对齐

end

内容位于网格区域的右端对齐

center

内容位于网格区域的中间位置

stretch

内容宽度占据整个网格取域空间

place-items

属性值

start

内容与网格区域的左端对齐

end

内容位于网格区域的右端对齐

center

内容位于网格区域的中间位置

stretch

内容宽度占据整个网格取域空间

content

justify-content

设置网格容器内的网格沿着行轴对齐网格的对齐方式

属性值

start

内容与网格区域的左端对齐

end

内容位于网格区域的右端对齐

center

内容位于网格区域的中间位置

stretch

内容宽度占据整个网格取域空间

space-around

在grid item之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

space-between

在grid item之间设置均等宽度空白间隙，其外边缘无间隙

space-evenly

在每个grid item之间设置均等宽度的空白间隙，包括外边缘

align-content

设置网格容器内的网格沿着竖轴对齐网格的对齐方式

属性值

start

内容与网格区域的左端对齐

end

内容位于网格区域的右端对齐

center

内容位于网格区域的中间位置

stretch

内容宽度占据整个网格取域空间

space-around

在grid item之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

space-between

在grid item之间设置均等宽度空白间隙，其外边缘无间隙

space-evenly

在每个grid item之间设置均等宽度的空白间隙，包括外边缘

grid-auto

grid-auto-columns/rows

指定自动生成的网格轨道（又名隐式网格轨道）的大小

隐式网格轨道在显式的定位超出指定网格范围的行或列时被创建

属性值

row

告诉自动布局算法依次填充每行，根据需要添加新行

column

告诉自动布局算法依次填充每列，根据需要添加新列

dense

告诉自动布局算法，如果后面出现较小的grid item，则尝试在网格中填充空洞

grid

所有属性的简写

none

将所有子属性设置为初始值

网格项