3、CSS核心基础

1、CSS核心基础,1,复习常用HTML标签,基本 ,定义HTML文档 文档的信息HTML文档的元信息 文档的标题文档与外部资源的关系文档的样式信息可见的页面内容注释,文本 .标题字大小（h1h6）.粗体字.粗体字(强调).斜体字.斜体字(强调).下划线.删除线(表示删除)居中文本无序列表有序列表列表项目超链接 定义文本字体尺寸、颜色、大小下标上标换行段落,图形 定义图像水平线,1 构造CSS规则 2 基本CSS选择器 3 在HTML中使用CSS的方法 4 本章小结,5,主要内容,CSS,层叠样式表 HTML标签定义了网页元素内容 CSS定义了显示的样式,1 构造CSS规则,7,张飞 身高:185

2、cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; ,2级标题 字体:华文云彩; 大小:24像素; 颜色:红色; 装饰:下划线; ,h2 font-family:华文云彩; font-size:24px; color:red; text-decoration:underline; ,这是定义2级标题CSS样式后的文字效果,初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下： CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 如果属性的值由多个单词组成且中间包含空格，

3、则必须为这个属性值加上英文状态下的引号。 为了提高代码的可读性，书写CSS代码时，通常会加上CSS注释。 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，提高代码的可读性。 属性的值和单位之间是不允许出现空格的。,1 标记选择器 2 类别选择器 3 ID选择器,9,CSS规则主要由：选择器、属性、属性值3部分组成。,标记选择器是声明哪些HTML标记采取哪种CSS样式,2.1 标记选择器,h2 font-size:24px; color:red; ,选择器,属性,值,属性,值,声明,声明,类别选择器的名称可以由用户自定

4、义，声明时在选择器名称前加上“.”符号,2.2 类别选择器,.c font-size:24px; color:red; ,选择器,属性,值,属性,值,声明,声明,ID选择器的名称也可以由用户自定义，声明时在选择器名称前加上“#”符号,2.3 ID选择器,#ID font-size:24px; color:red; ,选择器,属性,值,属性,值,声明,声明,CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。,常用的CSS选择器,伪选择器比较特殊，分为两种伪元素和伪类两种。,CSS选择器,伪类选择器,伪元素选择器,案例代码（详见教材demo1-1）,CSS

5、选择器,3 在HTML中使用CSS的方法,15,行内 样式,嵌入 样式,链接样式,直接在HTML的标记中使用style属性，然 后将CSS代码直接写在其中。,3.1 行内样式, 页面标题 正文内容1 正文内容2 正文内容3 ,此方式尽量少使用,将CSS样式写在与 之间，并且用和标记进行声明。,3.2 内嵌样式, 页面标题 P color:#0000FF; text-decoration:underline; font-weight:bold; font-size:25px; 这是第1行正文内容 这是第2行正文内容 ,（或外部样式表）,实际应用中使用频率最高、最实用，它将 HTML页面本身与CS

6、S样式分离为两个或多个文件。,3.3 链接样式, 页面标题 CSS标题 这是正文内容 CSS标题 这是正文内容 ,h2 color:#0000FF; p color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px; , 页面标题 p color:blue; 观察文字的颜色 ,内嵌式,行内样式,多重样式表,3.5 各种方式的优先级问题,行内 样式,嵌入 样式,建议：在网站建设中，最好只使用其中的1-2种，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路。,伪类和伪

7、元素,伪类是一种特殊的选择器，用来指定一个或与其相关的选择符的状态。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 结构如下： 选择器：伪类属性：值 如：a.two:linkcolor:red; 注意：这里的伪类不是任意用户定义的字符；而是已经预先定义好的。,W3C组织定义的标准伪类,：link 未被访问过的链接 ：visited 已访问过的链接 ：hover 鼠标经过时对对象元素表现的样式 ：active :focus 为焦点元素加上指定样式 :first-child 将特殊的样式添加到元素的第一个子元素 :lang 定义指定的元素中使用的语言,注意：按照a:link， a:v

8、isited， a:hover， a:actived的顺序书写,伪元素,:first-letter 将样式应用到文本的首字符 :first-line 将样式添加到文本的首行 :before 在某个元素前插入内容 :after 在某个元素后插入内容,（1）font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。具体如下：,CSS字体样式属性,1、CSS字体样式属性 （2）font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使

9、用如下CSS样式代码： 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。,p font-family:微软雅黑;,使用font-family设置字体时，需要注意以下几点： 各种字体之间必须使用英文状态下的逗号隔开。 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: Times New Roman;。 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。,1、

10、CSS字体样式属性 （3）font-weight:字体粗细 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100900（100的整数倍）。 （4）font-variant:变体 font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下： normal：默认值，浏览器会显示标准的字体。 small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。,1、CSS字体样式属性 （5）font-s

11、tyle:字体风格 font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下： normal：默认值，浏览器会显示标准的字体样式。 italic：浏览器会显示斜体的字体样式。 oblique：浏览器会显示倾斜的字体样式。,1、CSS字体样式属性 （6）font:综合设置字体样式 font属性用于对字体样式进行综合设置，其基本语法格式如下： 选择器font: font-style font-variant font-weight font-size/line-height font-family; 使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔

12、开。 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。,font-face: CSS3的新特性，用于定义服务器字体。,font-facefont-family:myfont; src:url(font/book.ttf); pfont-family:myfont; font-size:4em;,4.CSS的继承特性,当使用css对某个元素设置，该设置会对该元素的子元素也会起作用。除非这些子元素又设置了不同的格式属性。,Css的层叠特性,层叠：解决样式冲突问题。 这是第一行文本 这是第二行文本 这是第三行文本 这是第

13、三行文本 行内样式id样式类别样式标记样式,CSS选择器,1.使用多个元素与多个规则(标记选择器) 一个规则用于多个元素 一个元素设置多个规则,TITLE,AUTHOR,p,pmargin:8px,TITLE display:block TITLE font-size:12pt;font-weight:bold TITLE font-size:14pt;font-style:italic P color:blue,CSS属性与属性值,1.属性关键字 预先定义的属性关键词来设置元素的显示规则 2.色彩属性值 1）使用英文彩色名称 2）使用名种RGB表示方式,3.尺寸属性值,1）相对尺寸值 px（

14、像素点） em（当前字体中字符的高度） ex（当前字体中x的高度） 2）绝对尺寸值 in（英寸） cm（厘米） mm（毫米） pt（磅）,CSS属性与属性值,相对和绝对的区别？,相对指有条件的、暂时的、有限的、特殊的,绝对指无条件的、永恒的、无限的、普遍的。,像素（px）与显示器的分辨率相关。 分辨率越高，像素密度越大。通常这也意味着字体看上去会更小。,CSS属性 设置-字型属性,font-family设置文字的字体 font-size设置文字的大小 font-style设置文字的字型（是否斜体） font-weight设置文字的粗细 font-variant设置文字字母的大小写 font字体综合属性设置（font属性是控制字体样式、大小、风格、浓淡等属 ）,注意：字体综合属性(font)写法顺序为：字体风格(font-style)、字体变量(font-variant)、字体浓淡(font-weight)、字体大小(font-size)、字体名称(font-family)、字体颜色(color),p font:oblique bold 40px Arial; color:green; ,CSS属性 设置-色彩属性,color设置文字颜色属性 background-color设置背