网页的美容师---CSS

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着html的成长，为了满足前端开发者的需要，html新增很多样式属性，html变得更加杂乱，html越来越臃肿，这时，css诞生了。

CSS初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或**层叠？**样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

选择器 { 属性1:属性值1; 属性2:属性值2}

html中键值对用等号连接，css用冒号

html不同属性用空格连接，css用分号

具体格式如下：

CSS字体样式属性

font-size： 字号大小属性

font-family:字体样式

CSS样式代码为：p{ font-family:“微软雅黑”;}

小贴士：

1. 网页普遍使用14px以上的大小
2. 尽量使用偶数的数字符号，ie6这种老的浏览器支持奇数时有bug
3. 中文字体加引号，英文字体不需要加引号了，当英文字体中有空格，#$的时候需要加引号
4. 尽量用默认字体，保证任何用户的浏览器都能正确显示

CSS Unicode字体

Unicode 统一码，单一码，万国码 是计算机科学领域一项业界标准，包括字符集，编码方案。它为世界上每一种语言的每一个字符都设置了一个同一且唯一的二进制编码，满足了跨语言，跨平台的需求

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
CSS可用的属性值 normal（正常），bold（加粗），lighter（变细），100px-900px(整百)
400px相当normal，700px相当于bold

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
注意！！！

1. 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
2. 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

选择器

标签选择器（元素选择器）：

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
`
格式为：标签名{属性名1:属性值1; 属性名2:属性值2}``

优点：快速为页面中同类型的标签同一样式
缺点：不能设计差异化样式

类选择器：

格式：.类名{属性名1:属性值1; 属性名2:属性值2}

优点：元素设计差异化样式

多类名选择器：
优点：可以给标签指定多个类名，从而达到更多选择的目的4

注意！！！
1.样式的显示效果和类名的先后顺序没有关系，css样式书写的顺序有关系
层叠的概念，也就是说样式会被后来样式覆盖掉
2.类名之间用空格隔开

id选择器：

格式：#id名{属性名1:属性值1; 属性名2:属性值2}

id名就是HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应文档中的某一 个具体的元素，用法和类选择器类似。

通配符选择器：

伪类选择器向某些选择器中添加特殊的效果，可以选择第一个元素，选择第N个元素

类选择器用. 伪类选择器用:

链接伪类选择器：

• link 未访问的连接
• visited 已访问的连接
• hover 鼠标悬停
• active 选定的链接
  注意！（写的时候，顺序不要颠倒，lvha，love hate 爱恨记忆法）