外观 html和外观css,CSS学习笔记——字体样式和外观样式

1.CSS概念

CSS：Cascading Style Sheets，层叠样式表或者级联样式表，主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等等外观样式。

2.CSS样式规则

选择器 {属性:值}

注意：属性和属性值是以键值对的形式出现，属性与属性值之间用英语的":“隔开，多个键值对之间用英语的”;"隔开。

3.CSS的字体样式

font-size ：设置字体的字号，属性值单位常用的是px，也可以使用绝对的长度单位，比如：cm,mm,pt,in等等。

font-family： 设置字体，网页中常用的字体有宋体，微软雅黑，黑体等等，使用css样式可以设置字体的类型。如果需要设置多个字体，中间用逗号隔开，表示浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

Unicode字体： 在CSS中设置字体，直接使用中文名称即可，但是在文件编码不匹配的时候会产生乱码的错误，这个时候可以采用英文名称或Unicode字体。

常用字体的英文名称和Unicode编码

宋体 SimSun \5B8B\4F53

黑体 NSimSun \65B0\5B8B\4F53

微雅软黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1

字体的英文名称和Unicode编码可以在CSS手册中查询。

font-weight：设置字体的粗细，字体加粗除了可以使用b和strong标签之外，还可以使用CSS来实现，但是CSS是没有语义的。

font-weight的属性值：normal，bold,bolder,lighter,100-900中100的整数。

font-style 字体风格，字体倾斜除了使用i和em标签外，还可以使用font-style来实现。

font-style的三个属性值 normal italic oblique，font-style可以使用normal属性将斜体字体改为普通模式。

font属性对字体的综合设置

选择器{font:font-style(斜体) font-weight(粗体) font-size(字体大小)/line-height(行高) font-family}

注意：使用font属性必须按照上面的格式和顺序，不能更换顺序，各个属性使用空格隔开，斜体和粗体可以省略，但是必须保留font-size和font-family，否则font属性不起作用。

4.字体样式使用技巧

1.网页中的字体大小普遍使用14px++；

2.设置字体大小的时候，尽量使用偶数，奇数有些浏览器可能会出现bug。

3.字体类型使用英文时不用加上英文的双引号，但是使用带有空格、#、$的英文、中文或者Unicode编码需要使用英文状态的双引号。

4.尽量使用系统默认的字体，微雅软黑或者宋体。

5.页面字体尽量少用斜体，会影响阅读，通常使用font-style:normal;将字体改为普通模式。

5.外观属性

color：文本颜色，取值方式：预定义的颜色值(颜色的英文单词)、十六进制、RGB, 通常采用十六进制,可以使用在线取色器查找相关颜色的十六进制。

line-height ：行间距 使用最多的单位是px，一般情况下，行距比字号大7,8个像素即可。

text-align ：文本内容的水平对齐方式 ，属性值：left，center，right。

text-indent： 首行缩进 对文本内容设置首行缩进，使用单位通常为em，1em就是一个字的宽度，1em就是一个汉字的宽度。

letter-spacing ：字间距，就是字符与字符之间的空白。

word-spacing： 单词间距，定义英文单词之间的间距，对中文字符无效。

颜色半透明 color:rgba(r,g,b,a)  a:alpha 透明的意思，取值范围在0-1之间 r,g,b只能取值为RGB代码0-255 不能为十六进制。

文字阴影 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 其中水平位置和垂直位置是必需属性，不可省略。