选择器
盒模型

前端开发笔记本

Table of Contents generated with DocToc

文本

See the Pen FEND_Fonts by Li Xinyang (@li-xinyang) on CodePen.

字体

改变字号

font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

  • <absolute-size> 有 small large medium
  • <relative-size> 有 smaller larger
div
  font-size 12px
  p#sample0
    font-size 16px
  p#sample1
    font-size 2em
  p#sample2
    font-size 200%

NOTE：以上两值在开发中并不常用。2em 与 200% 都为父元素默认大小的两倍（参照物为父元素的字体大小 12px）。

改变字体

font-family: [ <family-name> | <generic-family> ]#

<generic-family> 可选选项，但具体使用字体由浏览器决定

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
font-family: arial, Verdana, sans-serif;

NOTE：优先使用靠前的字体

加粗字体

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight: normal;
font-weight: bold;
倾斜字体

font-style: normal | italic | oblique | inherit

italic 使用字体中的斜体，而 oblique 在没有斜体字体时强制倾斜字体。

更改行距

line-height: normal | <number> | <length> | <percentage>

normal 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右）

/* length 类型 */
line-height: 40px;
line-height: 3em;
/* percentage 类型 */
line-height: 300%;
/* number 类型 */
line-height: 3;

NOTE：当line-height为 number 类型时，子类直接继承其数值（不计算直接继承）。 而当为 percentage 类型时，子类则会先计算再显示（先计算后继承）。

字间距（字母间距）

letter-spacing: normal | <length>

其用于设置字间距或者字母间距，此属性适用于中文或西文中的字母。 如果需要设置西文中词与词的间距或标签直接的距离则需要使用 word-spacing。

word-spacing: normal | <length>

font shorthand

font: [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar

font: 30px/2 "Consolas", monospace;
font: italic bold 20px/1.5 arial, serif;
font: 20px arial, serif;

NOTE：当其他值为空时，均被设置为默认值。

改变文字颜色

color: <color>

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }

/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }

对齐方式

文字居中

text-align: start | end | left | right | center | justify | match-parent | start end

NOTE：默认为文本左对齐。

文本垂直对齐

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

NOTE：<percentage>的参照物为line-height

文本缩进

text-indent: <length> | <percentage> && [ hanging || each-line ]

NOTE：缩进两个字可使用 text-indent: 2em;

格式处理

保留空格格式

white-space: normal | pre | nowrap | pre-wrap | pre-line

pre 行为同 <pre> 一致。

  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
文字换行

word-wrap: normal | break-word

NOTE：允许长单词自动换行。

word-break: normal | break-all | keep-all

NOTE：break-all 单词中的任意字母间都可以换行。

文本装饰

文字阴影

text-shadow:none | <shadow-t># 或 text-shadow:none | [<length>{2,3}&&<color>?]#

p {
  text-shadow: 1px 1px 1px #000,
               3px 3px 5px blue;
}
  1. value = The X-coordinate X 轴偏移像素
  2. value = The Y-coordinate Y 轴偏移像素
  3. value = The blur radius 阴影模糊半径
  4. value = The color of the shadow 阴影颜色（默认为文字颜色）
文本装饰（下划线等）

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

高级设置

省略字符

text-overflow: [ clip | ellipsis | <string> ]{1,2}

/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止换行 */
更换鼠标形状

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit

常用属性

cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

  • <uri> 图片资源地址代替鼠标默认形状
  • <default> 默认光标
  • <none> 隐藏光标
  • <pointer> 手型光标
  • <zoom-in>
  • <zoom-out>
  • <move>
cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 当 uri 失效时或者则会起作用 */
强制继承

inherit 会强制继承父元素的属性值。

font-size: inherit;
font-family: inherit;
font-weight: inherit;
...
word-wrap: inherit;
work-break: inherit
text-showdow: inherit

NOTE：具体在使用时可查询文档

书籍推荐