html怎么设置字号7,重学前端CSS篇7颜色、单位、字体、命名规范、书写顺序

颜色

单位绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的，常用于打印方面

相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。注意：此处的相对指当前元素的字号(font-size)或者视口(viewport)尺寸。

(1)绝对单位

px：像素 (计算机屏幕上的一个点)，1px = 1/96in

pt：磅 (Points)，1 pt = 1/72 in

pc：12 点活字(Picas)，1pc = 12pt = 1/6in

in：英寸(Inches)，1in = 96px = 2.54cm

cm：厘米(Centimeters)，1cm = 96/2.54px

mm：毫米(Millimeters)，1mm = 1/10cm

q：Quarter-millimeters，1q = 1/4mm

(2)相对单位

%：百分比，相对于父元素的宽度或者字体大小

em：相对于当前对象内文本字体的大小，1em = 当前字体的大小，2em = 2 * 当前字体的大小

rem：root em，相对于html标签的字体大小

ex：当前字体环境中x字母的高度，一个 ex 是一个字体的 x-height (x-height 通常是字体尺寸的一半。)

ch：当前字体环境中0数字的高度

vw：1%视口(浏览器可视区域)的宽度

vh：1% 视口(浏览器可视区域)的高度

vmin：1% 视口(浏览器可视区域)宽度和高度中较小的尺寸

vmax：1% 视口(浏览器可视区域)宽度和高度中较大的尺寸

(3)单位详解

任意浏览器的默认字体高都是16px

所有未经调整的浏览器都符合:

100% = 1rem = 1em = 16px = 12pt; =>

1 / 16 = 0.0625; =>

10px = 0.625em;

手机端常用简化计算：

css的body中声明：font-size: 62.5%;

1em = 16px * 62.5% = 10px，比如12px = 1.2em;

开发的时候用：原单位(px) / 10 + 单位(em)；

字体font-family：有空格字体或中文需要用双引号，其余都可以不加

window和mac显示一样的字体：

font-family: "Hiragino Sans GB","Microsoft Yahei",Arial,\5b8b\4f53,"Helvetica Neue",Helvetica,"Heiti SC",sans-serif

命名规范1、属性缩写，如padding、margin、font、border、background

2、去掉小数点前面的“0”

3、16进制颜色如果三种颜色值每种对应字符想到就缩写

4、所有样式命名英文小写，采用中横线连接

5、JS钩子ID，使用复核单词和下划线连接，首字母大写区分

6、结构化命名，不要直观命名法

书写顺序显示属性：display, position, float, clear, z-index、overflow

自身属性：width, height, margin, paddig, boder, background

文字样式：font-family, font-size, font-weight, color

文本属性：text-align, vertical-align, whitespace

其他：bacground, opacity, cursor

CSS3：content, box-shadow, border-radius, transform