前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式
注:三种方式间没有优先级
1.三种方式协同布局:
2.不重复的属性一定为唯一位置的唯一值
3.重复的属性采用覆盖赋值,保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
2.长度及颜色单位
1.长度单位
-
px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
-
mm:毫米
-
cm:厘米
-
in:英寸
-
pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;
-
em:相当长度,通常1em=16px,应用于流式布局
2.颜色单位
-
rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)
-
rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)
-
hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)
-
hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)
-
#AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc
3.常用样式
1、字体样式
font-family: "STSong", "Arial";
-
font-size:字体大小(font-size: 20mm;)
-
font-style: 字体风格 normal | italic(斜体) | oblique(斜体)
-
font-weight:字体重量 normal | bold(加粗) | lighter(变细) | 100~900(900最粗)
-
line-height:行高(line-height:20mm;)
-
font:字重 风格 大小/行高 字族
2、文本样式
-
color:文本颜色
-
text-align:横向排列
left 居左 | center 居中 | right 居右
-
vertical-align:纵向排列
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
-
text-indent:字体缩减
-
text-decoration:字划线
-
letter-spacing:字间距
-
word-spacing:词间距
-
word-break:自动换行
normal:默认换行规则
break-all:允许在单词内换行