网页设计与制作（三）

CSS核心基础

CSS样式规则
使用HTML时，需要遵从一定的规范。CSS样式规则具体格式如下：
选择器{属性1：属性值1;属性2：属性值2；属性3：属性值3；}
1
在上面的样式规则中，选择器用于指定样式CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性与属性值以**“键值对”*的形式出现，属性是指对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性与属性值之间用英文“：”连接，多个“键值对”之间用英文“；”进行区分。
下面通过CSS对标题标记进行控制，具体如下：
h2{font-size:20px;color:red;}
1
这个代码就是一个完整的CSS样式。
同时，我们还需要注意一下CSS代码结构中的几个特点：
1.CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写的习惯一般将“选择器、属性和值”都采用小写的方式。
2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
3.如果属性的值由多个单词组成切中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：
p{font-family:“Time New Roman”;}
1
4.在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，例如：
/这是注释文本不会显示在浏览器窗口中/
1
5.CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使空格键、Tab键、Enter键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。例如：
h1{font-size:20 px;color:red;} (注意20与px之间有空格）
1
和
h1{
font-size:20 px; /定义字体大小属性/
color:red; /定义颜色属性/
}
1234
引入CSS样式表
1.行内式
行内式也称内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：
<标记名 style="属性1；属性值1；属性2：属性值2；>内容
1
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中，属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。
2.内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用

3.链入式 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。其基本语法如下： 123 4.导入式 导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在

CSS基础选择器
1.标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一个类标记指定统一的CSS样式，其基本语法如下：
标记名{属性1：属性值1；属性2：属性值2；}
1
该语法中，所有的HTML标记名都可以作为标记选择器。用该选择器定义的样式对页面中的该类型的所有标记都有效。
例如，可以使用p选择器定义HTML页面中所有段落的样式。示例代码如下：
p{font-size:12 px;color:#666; font-family:“微软雅黑”;}
1
2.类选择器
类选择器使用"."(英文点号）进行标识，后面紧跟类名。如下：
类名（属性1：属性值1；属性2：属性值2；}
CSS文本相关样式*
CSS字体样式属性
1.font-size:字号大小
属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，
CSS长度单位：
em 相对于当前对象内文本的字体尺寸
px 像素 最常用 推荐使用
in 英寸
cm 厘米
mm 毫米
pt 点
2.font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS代码：
p{ font-family:“华文彩云”,“宋体”,“黑体”;}
1
【各种字体之间必须使用英文状态下的引号，英文字体一般不需要加引号。】
【当需要设置英文字体时，英文字体名必须位于中文字体名之前。】
【如果字体名中包含空格、#、$、等符号，则该字体必须加英文状态下的单引号或双引号】
【尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示】
3.font-weight:字体粗细
可用属性值如下：
normal 默认值，定义标准的字符
bold 定义粗体的字符
bolder 定义更粗的字符
lighter 定义更细的字符
100~900（100的整数倍） 定义由细到粗的字符。其中，400等同于normal，700等同于bold，值越大字体越粗
4.font-variant：变体
属性用于设置字体变化，一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下：
normal：默认值，浏览器会显示标准的字体
small-caps:浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是，所有使用小型大写字体的字母均与其余文本相比，其字体尺寸更小。
5.font-style：字体风格
属性用于定义字体风格，如设置斜体、倾斜或正常的字体
6.font：综合设置字体样式
选择器{font: font-style font-variant font-weight font-size/line-height font-family;}
1
使用font属性时，必须按上面语法格式中的顺序写，各个属性以空格隔开。