CSS样式

welkinz
265 阅读6分钟

文本样式

文本字体

text-decoration

设置文字划线样式。

text-decoration: none/underline/overline/line-through;

text-transform

改变字母的大小写。

text-transform: none/uppercase/lowercase/capitalize;
uppercase 转为大写
lowercase 转为小写
capitalize 转为首字母大写

*text-shadow

设置文字阴影。

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色 ;

*text-overflow

未显示的溢出内容信号

  • clip 在内容区域的极限处截断文本，即可能在字符中间发生截断，默认值。
  • ellipsis 省略号表示被截断的文本

实例：jsbin.com/fuyavenoxi/…

文本布局

direction

用来设置文本、表列水平溢出的方向。

ltr 
rtl

jsbin.com/kapedavuku/…

text-align

文字对齐方式。

text-align: left/center/right/justify;
justify  文字向两侧对齐，对最后一行无效。

实例：jsbin.com/bimuzir/edi…

vertical-align

行内元素和表格单元格垂直对齐方式。

  • top 使元素及其后代元素的顶部与整行的顶部对齐。
  • middle 使元素的中部与父元素的基线加上父元素x-height的一半对齐
  • bottom 使元素及其后代元素的底部与整行的底部对齐。
  • sub 使元素的基线与父元素的下标基线对齐。
  • super 使元素的基线与父元素的上标基线对齐

实例：jsbin.com/xituweriyu/…

line-height

设置行高。

元素高度和行高一致可使单行文本垂直居中

无单位数字 (推荐) 值为无单位数字乘以该元素字体大小（自身字体大小）
例：1.5 即1.5*16px=25px 
长度
百分比 给定的百分比值乘以元素计算出的字体大小（继承父元素字体大小）

区别

  • line-height: 2和line-height: 200%有什么区别?
    • 父元素设置line-height: 200%；其所有子元素的行高都是一个具体的值，即他们父元素字体大小的200%。如果父元素的字体大小时16px，则子元素继承的行高为32px。先换成px,子元素再继承。
    • 父元素设置line-height: 2;其所有子元素继承的行高都是自身字体大小的2倍。即子元素的字体大小不同，行高也会不同。先继承,再换成px。即64px。

实例：jsbin.com/bumejog/edi…

text-indent

设置首行文本的缩进。

text-indent: 
长度
百分比

实例：jsbin.com/zejasil/edi…

letter-spacing

设置文字/字母的间距。

实例：jsbin.com/zejasil/edi…

扩展

white-space

处理元素中的空白

white-space:
            空白/制表符      换行符     文字换行
normal          合并          合并        转行
nowrap          合并          合并        不转行
pre             保留          保留        不转行
pre-wrap        保留          保留        转行
pre-line        合并          保留        转行

实例：jsbin.com/gugatiyujo/…

word-spacing

单词间距。

jsbin.com/cehicaweto/…

*word-break

单词内断行

normal
break-all 对non-CJK文本可在任意字符断行
keep-all CJK文本不断行
break-word 强制断行

*overflow-wrap

一个不能分开的字符串断行

normal
break-word

颜色

透明度比较

opacity 将元素中的所有内容全部透明，即子元素可以继承父元素的透明效果
rgba() 只作用于元素的颜色或其背景色

实例：jsbin.com/nokipuveza/…

*渐变

线性渐变

background-image: linear-gradient(direction/angel,color,color...)

jsbin.com/wayivutoto/…

径向渐变

background: radial-gradient(direction,color,color...)
关键字
closest-side  渐变边缘形状与容器距离渐变中心点最近的一边相切
closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交
farthest-side 渐变边缘形状与容器距离渐变中心点最圆的一边相切
farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交

实例：jsbin.com/rozazibozu/…

重复渐变

background: repeating-linear/radial-gradient(direction,color,color...)

实例：jsbin.com/qevowijiha/…

列表样式

li元素的祖先可能是li,但父元素不可能是li

list-style

list-style-type:
list-style-image:
list-style-position:

链接样式

:link
:visited
:hover
:active
:focus

背景样式

background

background: color image repeat position;

background-attachment

决定背景图像的位置是在视口内固定的还是随着包含它的区块滚动。

background-attachment: 
fixed 背景对于视口固定
scroll 背景相对于元素本身固定，而不随着它的内容滚动
local 背景相对于元素内容固定,若有滚动机制背景将会随着元素内容滚动

出现的问题：

之前未写oveflow：scroll; 误将浏览器滚动条当作div区块的滚动条，实践过程中local与scroll状态无区别才发现问题。

实例：jsbin.com/gaposumegi/…

*background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框下面

background-clip:
border-box 背景延伸至边框外沿
padding-box  背景延伸至内边距外沿
content-box 背景延伸至内容区外沿
text(尽量不用) 背景被裁剪成文字的前景色

实例：jsbin.com/rusakewale/…

*background-size

设置背景图片大小。

background-size:
contain 图像不会被压缩，铺满背景区可能会重复
cover 完全覆盖背景区，保持宽高比例

实例：jsbin.com/zedijafure/…

background-repeat

定义背景图像的重复方式。

background-repeat:
repeat 重复，最后一个若大小不合适会被裁剪
space 重复不裁剪，若不能完整铺满，则第一个和最后一个图像固定在边上，图像中间空白均匀分布
round 缩放来进行铺满
no-repeat 不重复

实例：jsbin.com/guwibocuri/…

*background-origin

背景图像位置区域

border-box
padding-box
content-box

实例：jsbin.com/lizeroyasa/…

filter

滤镜

  • blur

模糊

  • brightness

明暗

  • contrast

对比度

  • drop-shadow

阴影

rayscale

灰度

  • hue-rotate

色相旋转

  • invert

反转输入图像

  • saturate

图像饱和度

  • sepia

转换为深褐色

  • opacity

透明程度

  • 复合函数

实例：jsbin.com/wequsuzimu/…

边框样式

border

简写
border: width style color;

*border-radius

设置元素的外边框圆角。

实例：jsbin.com/qumaliqaxu/…

border-style

border-style: none/solid / dashed / dotted/ double/grrove/ridge/inset/outset;

*border-image

border-image: src slice(上右下左) width outset repeat/stretch;
border-image-slice: 上 右 下 左；
border-image-repeat：repeat/stretch/round/space;

实例：jsbin.com/pusumeride/…

*box-shadow

水平偏移 垂直偏移 模糊半径 color

表格样式

表格

<table>
<tr>
<th>
<td>

border-collapse

设置表格边框是否合并

border-collapse:
collapse 合并
separate 分离

实例：jsbin.com/yabudafawe/…

border-spacing

设置表格间距

实例：jsbin.com/muwidigosu/…

*转换

2D转换

transform

  • translate
  • rotate

角度

  • scale

增减

  • skew

X轴和Y轴的倾斜角度

  • matrix

六个参数值，旋转，缩放，移动（平移）和倾斜功能。

实例：jsbin.com/bidosohuri/…

3D转换

实例：jsbin.com/xamudiseru/…

*过渡

- transition
    - transition-property 过渡属性的名称
    - transition-duration  过渡所需的时间
    - transition-timing-function 加速曲线
        - linear 恒速
        - ease 先慢后超快再减速
        - ease-in 先慢后快
        - ease-out 先慢后快再减速
        - ease-in-out 慢
    - transtion-delay 过渡效果开始前需等待的时间

实例： jsbin.com/dazebikexu/…

*动画

- animation
    - animation-name
    - animation-delay
    - animation-duration
    - animation-play-state
        - running
        - paused
    - animation-timing-function
    - animation-direction 动画播放方向
        - alternate
        - reverse
        - alternate-reverse
    - animation-fill-mode
        - forwards
        - backwords
        - both

div {
position: relative;
  width: 200px;
  height: 200px;
  background: yellow;
  <!--使用简写属性把 animation 绑定到一个<div> 元素：-->
  animation: mydiv 5s;
}
@keyframes mydiv {
  0% {background: yellow; left: 0px; top: 0px;}
  25% {background: lightgreen; left: 200px; top: 0px;}
  50% {background: lightblue; left: 200px; top: 200px;}
  75% {background: pink; left: 0px; top: 200px;}
  100% {background: yellow; left: 0px; top: 0px;}
}

实例：jsbin.com/huqogeqoco/…

*多列

- columns
    - column-width
    - column-count
- column-gap
- column-rule 两列之间边框样式
- column-span

实例：jsbin.com/nikobiwefo/…

avatar
文章
阅读
粉丝