CSS核心基础的学习课件.pptxVIP

CSS核心基础的学习课件;CSS核心基础;复习常用HTML标签;;;1 构造CSS规则 2 基本CSS选择器 3 在HTML中使用CSS的方法 4 本章小结;CSS;1 构造CSS规则;初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下： CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。 为了提高代码的可读性，书写CSS代码时，通常会加上CSS注释。 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，提高代码的可读性。 属性的值和单位之间是不允许出现空格的。 ;1 标记选择器 2 类别选择器 3 ID选择器;标记选择器是声明哪些HTML标记采取哪种CSS样式;类别选择器的名称可以由用户自定义，声明时在选择器名称前加上“.”符号;ID选择器的名称也可以由用户自定义，声明时在选择器名称前加上“#”符号 ;CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 ;元素名; ;直接在HTML的标记中使用style属性，然 后将CSS代码直接写在其中。;将CSS样式写在head与/head 之间，并且用style和/style标记进行声明。;实际应用中使用频率最高、最实用，它将 HTML页面本身与CSS样式分离为两个或多个文件。;html head title页面标题/title link href=07-07.css type=text/css rel=stylesheet style type=“text/css” p{ color:blue;} /style head body p style=“color:gray;”观察文字的颜色/p /body /html ;3.5 各种方式的优先级问题;伪类和伪元素;W3C组织定义的标准伪类;伪元素;;（1）font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。具体如下：;1、CSS字体样式属性 （2）font-family:字体 font-family??性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码： 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。 ;使用font-family设置字体时，需要注意以下几点： 各种字体之间必须使用英文状态下的逗号隔开。 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: Times New Roman;。 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 ;1、CSS字体样式属性 （3）font-weight:字体粗细 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。 （4）font-variant:变体 font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下： normal：默认值，浏览器会显示标准的字体。 small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 ;1、CSS字体样式属性 （5）font-style:字体风格 font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下： normal：默认值，浏览器会显示标准的字体样式。 italic：浏览器会显示斜体的字体样式。 oblique：浏览器会显示倾斜的字体样式。;1、CSS字体样式属性 （6）font:综合设置字体样式 font属性用于对字体样式进行综合设置，其基本语法格式如下： 选择器{font: font-style font-variant font-weight font-size/line-height font-family;} 使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。 其中不需要设置的属性可以省略（取