1.CSS的颜色表示
命名颜色
red、black、white、purple、green、yellow、silver、gray、teal、blue、navy....[备注]
p { color: red;}
RGB颜色表示法
RGB模式表示色彩,R:red,G:green,B:blue,三种颜色组合叠加可以产生自然界中所有的颜色,也是计算机常用模式。
RGB 颜色值是这样规定的:rgb(red, green, blue).
每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。
p { color: rgb(255,255,0); };
p { color: rgb(100%,100%,0%); };
十六进制颜色值
由于RGB模式书写非常不方便,三个255值直接用3个十六进制数表示。
十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
取值范围 #000000 ~ #FFFFFF (黑色到白色)
其实就是RGB模式的另外一种写法,所有浏览器都兼容。
p { color: #c0c0c0; } p { color: #c09; } 三个数字的复制扩展成六个 #c09=>#cc0099。
1.2CSS的长度单位
绝对长度单位:
cm:厘米,mm:毫米,in:英寸,pc:派卡(Picas),相当于我国新四号铅字的尺寸。都不常用,了解即可。
相对长度单位:
px:像素点,像素就是显示器显示的一个点。
em:1em 等于当前的字体大小,例如:当前元素的字体大小为16px,那么1em = 16px。
单位之间的关系:1in = 2.54cm = 25.4 mm = = 96px
p { width: 1in; height:20px; }
1.3CSS字体样式属性
1、font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。
其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger
一般页面中:12px 14px 12cm
1em
例如:
p { font-size: 32px; }
1.3.2、font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。如果字体名称包含空格或中文,则应使用引号括起
例如:font-family:Verdana, Arial, '宋体';
使用font-family设置字体时,需要注意以下几点:
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示
使用font-family设置字体时,需要注意以下几点:
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。
可以通过escape() 来得到
1.4字体系列
西方国家字母体系分为两类:serif以及sans serif。
serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans serif就没有这些额外的装饰,而且笔画的粗细差不多。
为了更安全的设置:
font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
前面的字体都查找失败后,在系统中找一种sans-serif字体作为默认字体。
注意顺序,如果把sans-serif放前面去,后面的都失效了
1.4.2、font-weight:字体粗细
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍),有继承性。
400 : Normal
700:bold
字体的加粗跟字体有关,比如:一种字体只有两种粗细程度的变化,那么normal 到bold 和到bolder都是一样的效果。
1.4.3、font-style:字体风格
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会使用斜体的字体样式显示,如果字体没有斜体,那么正常显示字体。
oblique:浏览器会让文字倾斜显示。
1.4.4、font:综合设置字体样式
font属性用于对字体样式进行综合设置,其基本语法格式如下:
使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
淘宝的字体设置:font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;