CSS核心基础课件

《CSS核心基础课件》由会员分享，可在线阅读，更多相关《CSS核心基础课件（41页珍藏版）》请在装配图网上搜索。

1、CSS核心基础12020年9月28日复习常用复习常用HTMLHTML标签标签基本基本定义定义HTML文档文档文档的信息文档的信息HTML文档的元信息文档的元信息文档的标题文档的标题文档与外部资源的关系文档与外部资源的关系文档的样式信息文档的样式信息可见的页面内容可见的页面内容注释注释22020年9月28日文本文本.标题字大小（h1h6）.粗体字.粗体字(强调).斜体字.斜体字(强调).下划线.删除线(表示删除)居中文本无序列表有序列表列表项目超链接定义文本字体尺寸、颜色、大小下标上标换行段落32020年9月28日图形图形定义图像水平线42020年9月28日1 构造CSS规则2 基本CSS选择器

2、3 在HTML中使用CSS的方法4 本章小结5主要内容主要内容2020年9月28日CSSCSS层叠样式表HTML标签定义了网页元素内容CSS定义了显示的样式62020年9月28日1 1 构造构造CSSCSS规则规则7张飞身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;2级标题字体:华文云彩;大小:24像素;颜色:红色;装饰:下划线;h2font-family:华文云彩;font-size:24px;color:red;text-decoration:underline;这是定义2级标题CSS样式后的文字效果2020年9月28日初学者在书写CSS样式时，除了要遵循CSS样式

3、规则，还必须注意CSS代码结构中的几个特点，具体如下：CSS样式中的选择器严格区分大小写选择器严格区分大小写，属性和值不区分属性和值不区分大小写大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号引号。为了提高代码的可读性，书写CSS代码时，通常会加上CSSCSS注释注释。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，提高代码的可读性。属性的值和单位之间是不允许出现空格的。82020年9月28日1 标记选择器2 类别选择器3

4、 ID选择器9CSS规则主要由：选择器、属性、属性值规则主要由：选择器、属性、属性值3部分组成。部分组成。2020年9月28日标记选择器是声明哪些HTML标记采取哪种CSS样式2.1 2.1 标记选择器标记选择器h2 font-size:24px;color:red;选择器属性值属性值声明声明102020年9月28日类别选择器的名称可以由用户自定义，声明时在选择器名称前加上“.”符号2.2 2.2 类别选择器类别选择器.c font-size:24px;color:red;选择器属性值属性值声明声明112020年9月28日ID选择器的名称也可以由用户自定义，声明时在选择器名称前加上“#”符号2

5、.3 ID2.3 ID选择器选择器#ID font-size:24px;color:red;选择器属性值属性值声明声明122020年9月28日CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。常用的常用的CSS选择器选择器选择器代码示例代码说明通用选择器*选择所有元素。标签选择器元素名称a、body、p根据标签选择元素。类选择器.beam根据class的值选择元素。id选择器#logo根据id的值选择元素。属性选择器href、attr=”val”根据属性选择元素。并集选择器,em,strong同时匹配多个选择器，取多个选择器的并集。后代选择器.asid

6、eNavli先匹配第二个选择器的元素，并且属于第一个选择器内。子代选择器ulli匹配匹配第二个选择器，且为第一个选择器的元素的后代。兄弟选择器+p+a匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a元素。伪选择器:或:p:first-line、a:hover伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。伪选择器比较特殊，分为两种伪元素和伪类两种。CSS选择器132020年9月28日元素名描述:first-line匹配文本块的首行。如p:first-line表示选中p元素的首行。:first-letter匹配文本内容的首字母。:before在选中元素的内容

7、之前插入内容。:after在选中元素的内容之后插入内容。元素名描述:root选择文档中的根元素，通常返回html。:first-child父元素的第一个子元素。:last-child父元素的最后一个子无素。:only-child父元素有且只有一个子元素。:only-of-type父元素有且只有一个指定类型的元素。:nth-child(n)匹配父元素的第n个子元素。:nth-last-child(n)匹配父元素的倒数第n个子元素。:nth-of-type(n)匹配父元素定义类型的第n个子元素。:nth-last-of-type(n)匹配父元素定义类型的倒数n个子元素。:link匹配链接元素。:v

8、isited匹配用户已访问的链接元素。:hover匹配处于鼠标悬停状态下的元素。:active匹配处于被激活状态下的元素，包括即将点击（按压）。:focus匹配处于获得焦点状态下的元素。:enabled(:disabled)匹配启用（禁用）状态的元素。:checked匹配被选中的单选按钮和复选框的input元素。:default匹配默认元素。:valid(:invalid)根据输入数据验证，匹配有效（无效）的input元素。:in-range(out-of-range)匹配在指定范围之内（之外）受限的input元素。伪类选择器伪元素选择器案例案例代码（详见教材代码（详见教材demo1-1）CS

9、S选择器142020年9月28日3 3 在在HTMLHTML中使用中使用CSSCSS的方法的方法15行内样式嵌入样式链接样式2020年9月28日直接在HTML的标记中使用style属性，然 后将CSS代码直接写在其中。3.1 3.1 行内样式行内样式 页面标题 正文内容1 正文内容2 正文内容3此方式尽量少使用162020年9月28日将CSS样式写在与 之间，并且用和标记进行声明。3.2 3.2 内嵌样式内嵌样式 页面标题 P color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;这是第1行正文内容 这是

10、第2行正文内容（或外部样式表）（或外部样式表）172020年9月28日实际应用中使用频率最高、最实用频率最高、最实用，它将 HTML页面本身与CSS样式分离为两个或多个文件。3.3 3.3 链接样式链接样式页面标题CSS标题这是正文内容CSS标题这是正文内容h2color:#0000FF;pcolor:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;182020年9月28日 页面标题 link href=07-07.css type=text/css p color:blue;p color:blue;styl

11、e=“color:gray;”观察文字的颜色 内嵌式内嵌式行内样式行内样式多重样式表多重样式表192020年9月28日3.5 3.5 各种方式的优先级问题各种方式的优先级问题行内样式嵌入样式链接样式 建议：在网站建设中，最好只使用其中的建议：在网站建设中，最好只使用其中的1-2种，这种，这样既有利于后期的维护和管理，也不会出现各种样式样既有利于后期的维护和管理，也不会出现各种样式“冲突冲突”的情况，便于设计者理顺设计的整体思路的情况，便于设计者理顺设计的整体思路。202020年9月28日伪类和伪元素伪类和伪元素伪类是一种特殊的选择器，用来指定一个或与其相关的选择符的状态。它的最大的用处就是可以

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

13、a:link，a:visited，a:hover，a:actived的顺序书写 222020年9月28日伪元素伪元素 :first-letter 将样式应用到文本的首字符 :first-line 将样式添加到文本的首行 :before 在某个元素前插入内容 :after 在某个元素后插入内容232020年9月28日242020年9月28日（1）font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。具体如下：CSSCSS字体样式属性字体样式属性252020年9月28日1 1、CSSCSS字体样式属性字体样式属性（2 2）font-

14、family:font-family:字体字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。pfont-family:微软雅黑;使用使用font-familyfont-family设置字体时，需要注意以下几点：设置字体时，需要注意以下几点：各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文

15、字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的英文状态下的单引号或双引号，例如font-family:Times New Roman;。尽量使用系统默认字体尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。1 1、CSSCSS字体样式属性字体样式属性（3 3）font-weight:font-weight:字体粗细字体粗细font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100900（100的整数倍）。（4 4）font-variant:font-variant:变体变体font-varian

16、t属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效仅对英文字符有效。其可用属性值如下：normal：默认值，浏览器会显示标准的字体。small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。1 1、CSSCSS字体样式属性字体样式属性（5 5）font-stylefont-style:字体字体风格风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。obli

17、que：浏览器会显示倾斜的字体样式。1、CSS字体样式属性字体样式属性（6）font:综合设置字体样式综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法格式如下：选择器font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。font-face:CSS3的新特性，用于定义服务器的新特性，用于定义服务

18、器字体字体。font-facefont-family:myfont;src:url(font/book.ttf);pfont-family:myfont;font-size:4em;4.CSS4.CSS的继承特性的继承特性当使用当使用css对某个元素设置，该设置会对该元素的对某个元素设置，该设置会对该元素的子元子元素素也会起作用。也会起作用。除非这些子元素又设置了除非这些子元素又设置了不同的格式不同的格式属性。属性。322020年9月28日CssCss的层叠特性的层叠特性层叠：解决样式冲突问题。这是第一行文本这是第二行文本这是第三行文本这是第三行文本 行内样式id样式类别样式标记样式33202

19、0年9月28日CSSCSS选择器选择器1.使用多个元素与多个规则(标记选择器)一个规则用于多个元素一个元素设置多个规则TITLE,AUTHOR,p,pmargin:8pxTITLE,AUTHOR,p,pmargin:8pxTITLE display:blockTITLE display:blockTITLE font-size:12pt;font-weight:boldTITLE font-size:12pt;font-weight:boldTITLE font-size:14pt;font-style:italicTITLE font-size:14pt;font-style:italicP

20、 color:blueP color:blue342020年9月28日CSSCSS属性与属性值属性与属性值1.属性关键字预先定义的属性关键词来设置元素的显示规则2.色彩属性值 1）使用英文彩色名称 2）使用名种RGB表示方式352020年9月28日3.3.尺寸属性值尺寸属性值 1）相对尺寸值 px（像素点）em（当前字体中字符的高度）ex（当前字体中x的高度）2）绝对尺寸值 in（英寸）cm（厘米）mm（毫米）pt（磅）CSSCSS属性与属性值属性与属性值属性与属性值属性与属性值相对和绝对的区别？相对和绝对的区别？相对指有条件相对指有条件的、暂时的、的、暂时的、有限的、特殊有限的、特殊的的绝对

21、指无条件绝对指无条件的、永恒的、的、永恒的、无限的、普遍无限的、普遍的。的。像素（像素（px）与显示器的分辨率）与显示器的分辨率相关。相关。分辨率越高，像素密度越大。分辨率越高，像素密度越大。通常这也意味着字体看上去会通常这也意味着字体看上去会更小。更小。362020年9月28日CSSCSS属性属性 设置设置-字型属性字型属性font-family设置文字的字体font-size设置文字的大小font-style设置文字的字型（是否斜体）font-weight设置文字的粗细font-variant设置文字字母的大小写font字体综合属性设置（font属性是控制字体样式、大小、风格、浓淡等属）注

22、意：字体综合属性注意：字体综合属性(font)写法顺序为：字体风格写法顺序为：字体风格(font-style)、字体变量、字体变量(font-variant)、字体浓淡、字体浓淡(font-weight)、字体大小、字体大小(font-size)、字体名称、字体名称(font-family)、字体颜、字体颜色色(color)372020年9月28日p font:oblique bold 40px Arial;color:green;382020年9月28日CSSCSS属性属性 设置设置-色彩属性色彩属性color设置文字颜色属性background-color 设置背景颜色属性border-color设置边框颜色属性392020年9月28日CSSCSS属性属性 设置设置-边框属性边框属性border-style设置边框四周的样式border-color设置边框颜色属性border-width设置整个边框的宽度border 设置整个边框的样式、颜色和宽度402020年9月28日谢谢您的指导THANK YOU FOR YOUR GUIDANCE.感谢阅读！为了方便学习和使用，本文档的内容可以在下载后随意修改，调整和打印。欢迎下载！汇报人：云博图文日期：20XX年10月10日412020年9月28日