Web都会的CSS总结(回顾必备)

目录

选择器

background(背景)

font(字体样式)

文本格式化

链接样式

border(边框样式)

table(表格样式)

list-style(列表样式)

margin(外边距)

padding(内边距)

outline(轮廓)

overflow(滚动条样式)

计数器

visibility(元素可见性)

display(元素显示类型)

position(定位)

z-index(元素堆叠顺序)

float(浮动)

伪类选择器

伪元素

opacity(透明度)

常规规则

嵌套规则

border-*-radius(圆角)

border-image(边框图片)

渐变色

阴影效果

过渡效果

动画效果

多列布局


选择器

通用 *

标签 标签名

ID #标签的id名

.标签的class名

后代 父标签名 空格 后代标签名

父标签 > 子标签

相邻兄弟 相邻标签1 + 相邻标签2

通用兄弟 同父级标签1 ~ 同父级标签2

分组 标签1,标签2,标签3

属性 标签[属性]

background(背景)

background-color:设置元素的背景颜色;
background-image:设置元素的背景图像;
background-repeat:控制背景图像是否重复;
background-attachment:控制背景图像是否跟随窗口滚动;
background-position:控制背景图像在元素中的位置;
background-size:设置背景图像的尺寸;
background-origin:设置 background-position 属性相对于什么位置来定位背景图像;
background-clip:设置背景图像的显示区域;
background:背景属性的缩写,可以在一个声明中设置所有的背景属性

font(字体样式)

font-family:设置字体;
font-style:设置字体的风格,例如倾斜、斜体等;
font-weight:设置字体粗细;
font-size:设置字体尺寸;
font-variant:将小写字母转换为小型大写字母;
font-stretch:对字体进行伸缩变形(使用较少,并且主流浏览器都不支持);
font:字体属性的缩写,可以在一个声明中设置多个字体属性

文本格式化

text-align:设置文本的水平对齐方式;
text-decoration:设置文本的装饰;
text-transform:设置文本中英文的大小写转换方式;
text-indent:设置文本的缩进方式;
line-height:设置行高;
letter-spacing:设置字符间距;
word-spacing:设置单词与单词之间的间距(对中文无效);
text-shadow:设置文本阴影;
vertical-align:设置文本的垂直对齐方式;
white-space:设置文本中空白的处理方式;
direction:设置文本方向

链接样式

:link:定义普通或未访问链接的样式;
:visited:定义已经访问过链接的样式;
:hover:定义当鼠标经过或悬停在链接上时的样式;
:active:定义点击链接时的样式

border(边框样式)

border-style:设置边框的样式,例如实线、虚线等;
border-width:设置边框的宽度(厚度);
border-color:设置边框的颜色;
border:上面三个边框属性的缩写

table(表格样式)

table-layout:设置表格的布局算法,布局算法有两种,分别为固定表格布局算法和自动表格布局算法;
border-collapse:设置表格中单元格的边框是合并在一起还是按照标准的 HTML 样式分开;
border-spacing:设置当表格边框分开时,相邻两个边框在横向和纵向上的间距;
caption-side:设置表格标题相对于表格的位置;
empty-cells:设置当表格的单元格中没有内容时,是否显示该单元格的边框

list-style(列表样式)

list-style-type:设置列表项前面标记的形状(外观);
list-style-position:设置标记和列表中文本之间的距离;
list-style-image:使用图像代替默认的标记;
list-style:统一设置上面的三个属性

margin(外边距)

margin-top:设置元素上方的外边距;
margin-bottom:设置元素下方的外边距;
margin-right:设置元素右侧的外边距;
margin-left:设置元素左侧的外边距;
margin:外边距的简写属性,可以同时设置元素四个方向(上下左右)的外边距

padding(内边距)

padding-top:设置元素内容区上方的内边距;
padding-right:设置元素内容区右侧的内边距;
padding-bottom:设置元素内容区下方的内边距;
padding-left:设置元素内容区左侧的内边距;
padding:内边距属性的缩写形式,可以同时设置上下左右四个方向上的内边距

outline(轮廓)

outline-color:设置轮廓的颜色;
outline-style:设置轮廓的样式;
outline-width:设置轮廓的宽度;
outline:轮廓的简写属性,可以使用 outline 属性中同时设置上面的三个轮廓属性;
outline-offset:设置轮廓与边框之间的距离

overflow(滚动条样式)

visible 默认值,对溢出的内容不做处理,内容会在元素内容区之外显示
hidden 隐藏溢出元素内容区的内容
scroll 隐藏溢出元素内容区的内容,并在元素的左侧和下方分别创建一个滚动条,通过滑动滚动条可以查看元素中的所有内容
auto 如果出现内容溢出,则会在元素左侧创建一个滚动条,通过滑动滚动条可以查看元素中的全部内容
inherit 从父元素继承 overflow 属性的值

计数器

counter-reset:创建或者重置计数器;
counter-increment:递增变量;
content:插入生成的内容;
counter() 或 counters():将计数器的值添加到元素

visibility(元素可见性)

visible 默认值,表示元素是可见的
hidden 隐藏元素
collapse 主要用来隐藏表格的行和列,隐藏的行或列所占的空间可以被其他表格内容使用;如果在其他元素上使用,其效果等同于“hidden”
inherit 从父元素继承 visibility 属性的值

display(元素显示类型)

none 隐藏元素
block 将元素设置为块级元素
inline 将元素设置为内联元素
list-item 将元素设置为列表项目
inline-block 将元素设置为行内块元素
table 将元素设置为块元素级的表格(类似


inline-table 将元素设置为内联元素级的表格(类似

table-caption 将元素设置为表格的标题(类似

table-row-group 将元素设置为表格的内容部分(类似

table-column 将元素设置为表格的列(类似

table-column-group 将元素设置为表格中一个或多个列的分组(类似

table-header-group 将元素设置为表格的头部(类似

table-footer-group 将元素设置为表格的脚(类似

box CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最老版本)
inline-box CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最老版本)
flexbox CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的过渡版本)
inline-flexbox CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的过渡版本)
flex CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最新版本)
inline-flex CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最新版本)
run-in 根据上下文来决定将元素设置为块级元素或内联元素
inherit 从父元素继承 display 属性的值

position(定位)

static 默认值,静态定位,表示没有定位,元素会按照正常的位置显示,此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative 相对定位,即相对于元素的正常位置进行定位,您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量,在此过程中不会对其它元素造成影响。
absolute 绝对定位,相对于第一个非 static 定位的父级元素进行定位,可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素,则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed 固定定位,相对于浏览器的创建进行定位,可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky 粘性定位,它是 relative 和 fixed 的结合体,能够实线类似吸附的效果,当滚动页面时它的效果与 relative 相同,当要滚动到屏幕之外时则会自动变成 fixed 的效果

z-index(元素堆叠顺序)

auto 默认值,堆叠顺序与父元素相等
number 使用具体数值(整数)设置元素的堆叠顺序
inherit 从父元素继承 z-index 属性的值

float(浮动)

left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动
inherit 从父元素继承 float 属性的值

伪类选择器

:active a:active 匹配被点击的链接
:checked input:checked 匹配处于选中状态的 元素
:disabled input:disabled 匹配每个被禁用的 元素
:empty p:empty 匹配任何没有子元素的

元素
:enabled input:enabled 匹配每个已启用的 元素
:first-child p:first-child 匹配父元素中的第一个子元素

必须是父元素中的第一个子元素
:first-of-type p:first-of-type 匹配父元素中的第一个

元素
:focus input:focus 匹配获得焦点的 元素
:hover a:hover 匹配鼠标悬停其上的元素
:in-range input:in-range 匹配具有指定取值范围的 元素
:invalid input:invalid 匹配所有具有无效值的 元素
:lang(language) p:lang(it) 匹配每个 lang 属性值以 "it" 开头的

元素
:last-child p:last-child 匹配父元素中的最后一个子元素

必须是父元素中的最后一个子元素
:last-of-type p:last-of-type 匹配父元素中的最后一个

元素
:link a:link 匹配所有未被访问的链接
:not(selector) :not(p) 匹配每个非

元素的元素
:nth-child(n) p:nth-child(2) 匹配父元素中的第二个子元素


:nth-last-child(n) p:nth-last-child(2) 匹配父元素的倒数第二个子元素


:nth-last-of-type(n) p:nth-last-of-type(2) 匹配父元素的倒数第二个子元素


:nth-of-type(n) p:nth-of-type(2) 匹配父元素的第二个子元素


:only-of-type p:only-of-type 匹配父元素中唯一的

元素
:only-child p:only-child 匹配父元素中唯一的子元素


:optional input:optional 匹配不带 "required" 属性的 元素
:out-of-range input:out-of-range 匹配值在指定范围之外的 元素
:read-only input:read-only 匹配指定了 "readonly" 属性的 元素
:read-write input:read-write 匹配不带 "readonly" 属性的 元素
:required input:required 匹配指定了 "required" 属性的 元素
:root root 匹配元素的根元素,在 HTML 中,根元素永远是 HTML
:target #news:target 匹配当前活动的 #news 元素(单击包含该锚名称的 URL)
:valid input:valid 匹配所有具有有效值的 元素
:visited a:visited 匹配所有已经访问过的链接

伪元素

::after p::after 在每个

元素之后插入内容
::before p::before 在每个

元素之前插入内容
::first-letter p::first-letter 匹配每个

元素中内容的首字母
::first-line p::first-line 匹配每个

元素中内容的首行
::selection p::selection 匹配用户选择的元素部分
::placeholder input::placeholder 匹配每个表单输入框(例如 )的 placeholder 属性

opacity(透明度)

opacity: number

其中 number 为一个 0~1 之间的浮点数(小数),用来表示元素的透明度,值越小则越透明(0 表示完全透明,1 表示完全不透明)

  • 常规规则

  • 设置字符编码
  • @charset
  • 导入其它样式文件
  • @import
  • 指定命名空间
  • @namespace
  • 嵌套规则

  • 媒体查询与设备匹配
  • @media
  • 打印文档时修改部分属性
  • @page
  • 检查浏览器是否支持某个特性
  • @supports
  • 用于从远程服务器或者用户本地加载指定的字体
  • @font-face
  • border-*-radius(圆角)

  • border-top-left-radius:为元素左上角设置圆角效果;
    border-top-right-radius:为元素右上角设置圆角效果;
    border-bottom-right-radius:为元素右下角设置圆角效果;
    border-bottom-left-radius:为元素左下角设置圆角效果;
    border-radius:上面四个属性的简写形式,可以同时为元素的四个角设置圆角效果
  • border-image(边框图片)

  • border-image-source:定义边框图像的路径;
    border-image-slice:定义边框图像从什么位置开始分割;
    border-image-width:定义边框图像的厚度(宽度);
    border-image-outset:定义边框图像的外延尺寸(边框图像区域超出边框的量);
    border-image-repeat:定义边框图像的平铺方式
  • 渐变色

  • 线性渐变
  • background:linear-gradient
  • 径向渐变
  • background:radial-gradient
  • 圆锥渐变
  • background:conic-gradient
  • 阴影效果

  • 为文本添加阴影效果
  • text-shadow
  • 为HTML元素添加阴影效果
  • box-shadow
  • 过渡效果

  • transition-property:设置元素中参与过渡的属性;
    transition-duration:设置元素过渡的持续时间;
    transition-timing-function:设置元素过渡的动画类型;
    transition-delay:设置过渡效果延迟的时间,默认为 0;
    transition:简写属性,用于同时设置上面的四个过渡属性
  • 动画效果

  • animation-name:设置需要绑定到元素的动画名称;
    animation-duration:设置完成动画所需要花费的时间,单位为秒或毫秒,默认为 0;
    animation-timing-function:设置动画的速度曲线,默认为 ease;
    animation-fill-mode:设置当动画不播放时(动画播放完或延迟播放时)的状态;
    animation-delay:设置动画开始之前的延迟时间,默认为 0;
    animation-iteration-count:设置动画被播放的次数,默认为 1;
    animation-direction:设置是否在下一周期逆向播放动画,默认为 normal;
    animation-play-state:设置动画是正在运行还是暂停,默认是 running;
    animation:所有动画属性的简写属性
  • 多列布局

  • column-count 指定元素应该分为几列
    column-fill 指定如何填充每个列
    column-gap 指定列与列之间的间隙
    column-rule 所有 column-rule-* 属性的简写形式
    column-rule-color 指定列与列之间边框的颜色
    column-rule-style 指定列与列之间边框的样式
    column-rule-width 指定列与列之间边框的宽度
    column-span 指定元素应该横跨多少列
    column-width 指定列的宽度
    columns column-width 与 column-count 属性的简写属性

你可能感兴趣的:(后端,开发,css,css3,前端)


table-cell 将元素设置为表格的单元格(类似

table-row 将元素设置为表格的行(类似