css第二节第2天

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()  来得到

css第二节第2天_第1张图片

1.4字体系列

西方国家字母体系分为两类:serif以及sans serif。

serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans serif就没有这些额外的装饰,而且笔画的粗细差不多。

为了更安全的设置:

font-famliy:  tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

前面的字体都查找失败后,在系统中找一种sans-serif字体作为默认字体。

注意顺序,如果把sans-serif放前面去,后面的都失效了


css第二节第2天_第2张图片

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;

你可能感兴趣的:(css第二节第2天)