【CSS3】第3章 CSS3入门

学习目标

  • 了解CSS的功能和作用,能够列举CSS的应用示例。

  • 熟悉CSS的发展历史,能够厘清CSS1、CSS2和CSS3三者的关系

  • 掌握CSS的样式规则,能够按照CSS样式规则正确书写CSS样式。

  • 掌握CSS样式表的引入方式,能够在网页中引入CSS样式。

  • 掌握CSS基础选择器的用法,能够使用CSS基础选择器设置差异化的网页样式。

  • 掌握字体样式属性的用法,能够在网页中设置不同的字体样式。

  • 掌握文本外观属性的用法,能够在网页中设置不同的文本样式。

  • 熟悉列表样式属性的用法,能够清除网页中默认的列表项目符号。

  • 了解CSS层叠性和继承性的特点,能够运用CSS层叠性和继承性优化网页代码结构。

  • 掌握CSS优先级的特点,能够对CSS基础选择器进行优先级排序。

随着网页制作技术的不断发展,仅仅依靠HTML属性设置的样式已经无法满足网页设计的需求。CSS能够在不改变原有HTML结构的情况下实现更加丰富的样式效果,例如更多样的字体、更绚丽的图形动画等,这极大地满足了网页设计的需求。本章将主要讲解CSS3的基础知识。

3.1 CSS概述

3.1.1 认识CSS

CSS以HTML为基础,提供了丰富的样式效果,例如,字体、颜色、背景的控制以及网页整体的布局和排版等。

【CSS3】第3章 CSS3入门_第1张图片

CSS非常灵活,既可以嵌入在HTML文件中,也可以是一个独立的外部文件。如果是独立的文件,则必须以.css为后缀名。

【CSS3】第3章 CSS3入门_第2张图片

3.1.2 CSS的发展历史

20世纪90年代初,HTML语言的诞生,各种形式的修饰样式也随之出现。CSS发展至今主要出现了4个版本。

【CSS3】第3章 CSS3入门_第3张图片

3.2 CSS基础

3.2.1 CSS样式规则

要想熟练地使用CSS对网页进行修饰,需要遵循CSS样式规则。

CSS样式规则具体格式:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

在上面的样式规则中,选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。其中,属性和属性值以“键值对”的形式出现,用英文“:”连接,多个“键值对”之间用英文“;”进行区分。

【CSS3】第3章 CSS3入门_第4张图片

h1:表示CSS样式作用的HTML对象为

标签。

CSS代码结构的特点:

CSS样式中的选择器严格区分大小写,而声明不区分大小写,按照书写习惯一般采用小写书写选择器、声明。

多个声明之间必须用英文分号隔开,最后一个声明后的英文分号可以省略,但是为了便于增加新样式最好保留最后一个声明后的英文分号。

如果属性值由多个单词组成且中间包含空格,则必须为这个属性值添加英文引号。

p{font-family:"Times New Roman";}

可使用注释语句对CSS代码进行注释。CSS代码注释也不会显示在浏览器窗口中。

p{font-family:"Times New Roman";}
/* 这是CSS注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中 */

在CSS代码中空格是不被解析的,大括号以及分号前后的空格可有可无。因此可以使用Tab键、回车键对CSS代码进行排版,即所谓的格式化CSS代码,这样可以提高代码的可读性。

h1{ 
color:green;                     /* 定义颜色属性  */
font-size:14px;                 /* 定义字号属性  */
}

CSS代码的属性值和单位之间是不允许出现空格的,否则浏览器解析网页代码时会出错。

3.2.2 引入CSS样式表

要想使用CSS修饰网页,就需要在HTML文件中引入CSS样式表。引入CSS样式表的方式有4种,分别为行内式、内嵌式、链入式和导入式。

【CSS3】第3章 CSS3入门_第5张图片

1.行内式

行内式也被称为内联样式,是通过标签的style属性来设置标签的样式。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容




    
    
    
    行内式


    

古之学者必有师。师者,所以传道受业解惑也 。

【CSS3】第3章 CSS3入门_第6张图片

2.内嵌式

内嵌式是将CSS代码集中写在HTML文件的头部标签中,并且用

《劝学》片段

青,取之于蓝,而青于蓝;冰,水为之,而寒于水。木直中绳,以为轮,其曲中规。虽有槁暴,不复挺者,使之然也。故木受绳则直,金就砺则利,君子博学而日参省乎己,则知明而行无过矣。

【CSS3】第3章 CSS3入门_第8张图片

内嵌式CSS样式只对其所在的HTML页面有效,因此,仅设计一个页面时,使用内嵌式CSS样式是个不错的选择。但如果制作一个网站,则不建议使用内嵌式CSS样式,因为它不能充分发挥CSS代码的重用优势。

3.链入式

链入式也叫外链式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标签将外部样式表文件链接到HTML文件中。

【CSS3】第3章 CSS3入门_第9张图片

标签的三个属性

href:定义所链接外部样式表文件的路径。文件路径可以是相对路径,也可以是绝对路径。

type:定义所链接文件的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表。

rel:定义当前文件与被链接文件之间的关系,在这里需要指定为“stylesheet”,表示被链接的文件是一个样式表文件。

style03.css

h2{ text-align:center;}
p{                                                 /*定义文本修饰样式*/
font-size:16px; 
color:red; 
text-decoration:underline;
}   



    
    
    
    链入式
    


    

《师说》片段

人非生而知之者,孰能无惑?惑而不从师,其为惑也,终不解矣。生乎吾前,其闻道也固先乎吾,吾从而师之;生乎吾后,其闻道也亦先乎吾,吾从而师之。

【CSS3】第3章 CSS3入门_第10张图片

链入式最大的优势是同一个CSS样式表可以被不同的HTML文件链接使用,同时一个HTML文件也可以通过多个标签链接多个CSS样式表。 在实际网页制作中,链入式是使用频率较高,也较实用的引入方式。它将HTML代码与CSS代码分离为两个或多个文件,实现了结构和样式的完全分离,使得网页的前期制作和后期维护都十分方便。

4.导入式

导入式与链入式相同,都能够引入外部样式表文件。在HTML头部应用

二级标题文本

段落一文本内容

段落二文本内容

段落三文本内容

【CSS3】第3章 CSS3入门_第13张图片

一个标签也可以应用多个class类,来设置差异化的样式。在HTML标签中多个类名之间需要用空格隔开。

注意:类名的第一个字符不能使用数字,并且严格区分大小写,一般采用小写的英文字符。

3.id选择器

id选择器使用“#”进行标识,后面紧跟id名。

id选择器基本语法格式:#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

Id名即为HTML标签的id属性值,大多数HTML标签都可以定义id属性,标签的id名是唯一的,只能对应文件中某一个具体的标签。




    
    
    
    id选择器
    
    
    
    

段落1:id="bold",设置粗体文字。

段落2:id="font24",设置字号为24px。

段落3:id="font24",设置字号为24px。

段落4:id="bold font24",同时设置粗体和字号24px。

【CSS3】第3章 CSS3入门_第14张图片

同一个id名也可以应用于多个标签,浏览器并不报错,但是这种做法是不被允许的。因为JavaScript等脚本语言调用id名时会因为重复的id名而出错。此外,最后一行没有应用任何CSS样式,这意味着id选择器不可以像类选择器那样定义多个值,类似“id="bold font24"”的写法是错误的。

4.通配符选择器

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的标签。

通配符选择器基本语法格式:*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

{ margin: 0; / 定义外边距/ padding: 0; / 定义内边距*/ }

在实际网页开发中不建议使用通配符选择器设置HTML标签样式,因为通配符选择器设置的样式对所有的HTML标签都生效,不管标签是否需要该样式,这样反而降低了代码的执行效率。

5.交集选择器

交集选择器也被称为标签指定式选择器,可以为某些标签单独指定样式,由两个选择器构成,其中第一个为标签选择器,第二个为类选择器或id选择器。交集选择器的两个选择器之间不能有空格。

例如:h3.special或者p#one




    
    
    
    交集选择器
    


    

段落文本(银灰色)

段落文本(灰色)

标题文本(黑色)

【CSS3】第3章 CSS3入门_第15张图片

6.并集选择器

并集选择器可以为多个标签统一设置相同的样式,从而避免代码的冗余。并集选择器也是一个复合选择器,是各个选择器通过逗号连接而成的。任何形式的选择器(包括标签选择器、类选择器以及id选择器等),都可以作为并集选择器的一部分。如果不同标签包含相同的样式,可以使用并集选择器对这些相同的样式进行统一设置。




    
    
    
    并集选择器
    


    

2级标题文本

3级标题文本

段落文本1

段落文本2

段落文本3

【CSS3】第3章 CSS3入门_第16张图片

使用并集选择器也能实现标签选择器、类选择器、id选择器定义的样式效果,并且使用并集选择器书写的CSS代码更简洁、直观。

7.后代选择器

后代选择器可以用来控制内部嵌套标签的样式。后代选择器的写法就是把外层标签写在前面,内层标签写在后面,外层标签和内层标签之间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。




    
    
    
    后代选择器
    


    

天下难事,必作于易。

天下大事,必作于细。

【CSS3】第3章 CSS3入门_第17张图片

后代选择器数量不受限制,如果需要加入更多的选择器,只需在选择器之间加上空格,按序排列即可。

3.3 字体样式属性

3.3.1 font-size:字号

font-size属性用于设置字号,该属性的属性值可以为像素值、百分比、倍率等。

font-size属性常用的属性值单位

单位 说明
em 倍率单位,指相对当前文本的倍率
px 像素单位,是网页设计中常用的单位
% 百分比单位,指相对于当前文本的百分比

推荐使用像素单位——px

例如:p{font-size:12px;}

3.3.2 font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

例如:将网页中所有段落文本的字体设置为微软雅黑

p{font-family:"微软雅黑";}

可以同时指定多个字体,各字体之间以逗号隔开。如果浏览器不支持第一种字体,则会尝试选择下一种,直到匹配到合适的字体。

body{font-family:"华文彩云","宋体","黑体";}

使用font-family设置字体时的注意事项

【CSS3】第3章 CSS3入门_第18张图片

3.3.3 font-weight:字体粗细

font-weight属性用于定义文字的粗细。

font-weight属性的属性值

属性值 描述
normal 默认属性值。定义标准样式的文字
bold 定义粗体文字
bolder 定义更粗的文字
lighter 定义更细的文字
100~900(100的整数倍) 定义由细到粗的文字。其中400等同于normal,700等同于bold,数值越大字体越粗
3.3.4 font-variant:变体

font-variant属性用于设置英文字符的变体,用于定义小型大写字体,该属性仅对英文字符有效。

font-variant属性的常用属性值

normal:默认值,浏览器会显示标准的字体。 small-caps:浏览器会显示小型大写的字体,即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母和其余文本相比,字体尺寸更小。

【CSS3】第3章 CSS3入门_第19张图片

3.3.5 font-style:字体风格

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体。

font-style属性的可用属性值

【CSS3】第3章 CSS3入门_第20张图片

3.3.6 font:综合设置字体样式

font属性用于对字体样式进行综合设置。

font属性的基本语法格式:选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开

在设置字体样式属性时,不需要设置的属性可以省略(取默认值),但必须保留font-size属性和font-family属性,否则font属性将不起作用。




    
    
    
    font综合设置字体样式
    


    

段落1:把做好每件事情的着力点放在每一个环节、每一个步骤上,不心浮气躁,不好高骛远。

段落2:把做好每件事情的着力点放在每一个环节、每一个步骤上,不心浮气躁,不好高骛远。

【CSS3】第3章 CSS3入门_第21张图片

3.3.7 @font-face规则

@font-face是CSS3的新增规则,用于定义服务器字体。使用@font-face规则定义服务器字体的基本语法格式:

【CSS3】第3章 CSS3入门_第22张图片




    
    
    
    @font-face规则
    


    

为莘莘学子改变命运而讲课

为千万学生少走弯路而著书

【CSS3】第3章 CSS3入门_第23张图片

【CSS3】第3章 CSS3入门_第24张图片

3.4文本外观属性

使用HTML可以对文本外观进行简单的控制,但是效果并不理想。为此CSS提供了一系列的文本外观属性,用于设置更为丰富的文本外观样式。

3.4.1 color:文本颜色

color属性用于定义文本的颜色。

color属性的属性值:

预定义的颜色值,如red,green,blue等。 十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。 RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

注意:如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

十六进制颜色值是由#开头的6位十六进制数值组成,每2位数值为一个颜色分量,分别表示颜色的红、绿、蓝3个颜色分量。当3个颜色分量的2位十六进制数值都相同时,可使用CSS缩写。例如,#FF6600可缩写为#F60,#FF0000可缩写为#F00,#FFFFFF可缩写为#FFF。

3.4.2 letter-spacing:字间距

letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白距离。

letter-spacing属性的属性值:

letter-spacing属性的属性值可为不同单位的数值。例如,像素单位px、倍率单位em。 定义字间距时,允许使用负数,表示缩小字间距,字间距默认属性值为normal。

例如:分别为

标签和

标签定义不同的字间距

h2{letter-spacing:20px;} h3{letter-spacing:-0.5em;}

3.4.3 word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距,对中文字符无效。word-spacing属性的属性值可为不同单位的数值。定义单词间距时允许使用负值,表示缩小单词间距,默认属性值为normal。

word-spacing和letter-spacing属性的区别

letter-spacing定义的为字母之间的间距

word-spacing定义的为英文单词之间的间距




    
    
    
    word-spacing属性和letter-spacing属性
    


    

letter spacing(字母间距)

word spacing word spacing(单词间距)

【CSS3】第3章 CSS3入门_第25张图片

3.4.4 line-height:行间距

line-height属性用于设置行间距,所谓行间距就是行与行之间的距离,即字符的垂直间距。

line-height属性的属性值单位推荐使用像素单位px。




    
    
    
    line-height
    


      

岂曰无衣?与子同袍。王于兴师,修我戈矛。与子同仇。

岂曰无衣?与子同泽。王于兴师,修我矛戟。与子偕作。

岂曰无衣?与子同裳。王于兴师,修我甲兵。与子偕行。

【CSS3】第3章 CSS3入门_第26张图片

3.4.5 text-transform:文本转换

text-transform属性用于控制英文字符的大小写转换。

text-transform属性的属性值:

none:不进行转换(默认值)。 capitalize:将首字母转换为大写。 uppercase:将全部字符转换为大写。 lowercase:将全部字符转换为小写。

3.4.6 text-decoration:文本装饰

text-decoration属性用于设置文本的下划线,上划线,删除线等装饰效果。

text-decoration属性的属性值:

none:没有文本装饰,为默认值。 underline:用于设置下划线效果。 overline:用于设置上划线效果。 line-through:用于设置删除线效果。

text-decoration属性可以添加多个属性值,用于给文本添加多种显示效果。




    
    
    
    text-decoration
    


    

设置下划线(underline)

设置上划线(overline)

设置删除线(line-through)

同时设置下划线和删除线(underline line-through)

【CSS3】第3章 CSS3入门_第27张图片

3.4.7 text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐,和HTML中的align对齐属性类似。

text-align属性的属性值:

left:左对齐(默认值)。 right:右对齐。 center:居中对齐。

3.4.8 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值。

text-indent属性的属性值单位:推荐使用倍率单位——em




    
    
    
    text-indent
    


    

段落1:真正有价值的一生,总是需要你行动,去做无数件别人不屑尝试的小事。那些一直在一步一步往前走的人,终会收获更好的人生。

段落2:真正有价值的一生,总是需要你行动,去做无数件别人不屑尝试的小事。那些一直在一步一步往前走的人,终会收获更好的人生。

【CSS3】第3章 CSS3入门_第28张图片

3.4.9 white-space:空格处理

使用HTML制作网页时,不论源代码中有多少个空格,在浏览器中只会显示一个空格。在CSS中,使用white-space属性可设置空格的处理方式。

white-space属性的属性值:

normal:常规显示(默认值),文本中的空格、换行无效,只显示一个空格,文本满行(指到达模块区域边界)后自动换行。 pre:按文件的书写格式保留空格、换行,文本将按照原格式显示。 nowrap:空格、换行无效,强制文本不能换行,除非使用换行标签 。若超出浏览器边界,浏览器会自动增加滚动条。




    
    
    
    white-space
    


    

段落1:这个 段落中 有很多 空格。

段落2:这个 段落中 有很多 空格。此段落应用white-space:pre;。

段落3:这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。

【CSS3】第3章 CSS3入门_第29张图片

3.4.10 text-shadow:阴影效果

text-shadow是CSS3新增属性,使用该属性可以为页面中的文本添加阴影效果。

text-shadow属性的语法格式:

【CSS3】第3章 CSS3入门_第30张图片




    
    
    
    text-shadow
    


    

Hello CSS3

【CSS3】第3章 CSS3入门_第31张图片

注意:阴影的水平距离或垂直距离参数可以设为负值,但阴影的模糊半径参数只能设置为正值,并且数值越大阴影向外模糊的范围也就越大。

text-shadow属性能够给文字添加多个阴影,从而产生阴影叠加的效果。设置阴影叠加的效果方法很简单,只需为文本设置多组阴影参数,中间用逗号隔开即可。

例如:设置红色和绿色阴影叠加的效果

P{ font-size:32px; text-shadow:10px 10px 10px red,20px 20px 20px green; /红色和绿色的阴影叠加/ }

3.4.11 text-overflow: 处理溢出的文本

text-overflow属性同样为CSS3的新增属性,该属性用于处理溢出的文本。

text-overflow属性的语法格式:选择器{text-overflow:属性值;}

text-overflow属性的属性值:

clip:修剪溢出文本,不显示省略符号“…”。 ellipsis:用省略符号“…”替代被修剪文本,省略符号插入的位置在最后一个字符处。




    
    
    
    text-overflow
    


    

把从一段很长的文本溢出的内容隐藏,出现“…”符号

【CSS3】第3章 CSS3入门_第32张图片

设置省略标签标示溢出文本的步骤

【CSS3】第3章 CSS3入门_第33张图片

3.4.12 word-wrap属性

word-wrap属性是CSS3的新增属性,该属性用于实现长单词和URL地址的自动换行。

word-wrap属性的取值

属性值 描述
normal 只在允许的断字点换行(浏览器保持默认处理)
break-word 在长单词或URL地址内部进行换行



    
    
    
    word-wrap
    


    word-wrap:normal;
    

网页平面UI设计学院http://icd.XXXXXXX.cn/

word-wrap:break-word;

网页平面UI设计学院http://icd.XXXXXXXXX.cn/

【CSS3】第3章 CSS3入门_第34张图片

3.5 列表样式属性

定义无序或有序列表时,可以通过标签的属性控制列表项目符号,但该方式不符合结构与样式相分离的网页设计原则,为此CSS提供了一系列的列表样式属性,来单独控制列表项目符号,本节将对这些列表样式属性进行详细地讲解。

3.5.1 list-style-type属性

在CSS中,list-style-type属性用于控制列表项显示符号的类型,其取值有多个同。

list-style-type属性的取值:

属性值 描述 属性值 描述
disc 实心圆(无序列表使用) none 不使用项目符号(无序列表和有序列表通用)
circle 空心圆(无序列表使用) cjk-ideographic 简单的表意数字(有序列表使用)
square 实心方块(无序列表使用) georgian 传统的乔治亚编号方式(有序列表使用)
decimal 阿拉伯数字(有序列表使用) decimal-leading-zero 以0开头的阿拉伯数字(有序列表使用)
属性值 描述 属性值 描述
lower-roman 小写罗马数字(有序列表使用) upper-roman 大写罗马数字(有序列表使用)
lower-alpha 小写英文字母(有序列表使用) upper-alpha 大写英文字母(有序列表使用)
lower-latin 小写拉丁字母(有序列表使用) upper-latin 大写拉丁字母(有序列表使用)
hebrew 传统的希伯来编号方式(有序列表使用) armenian 传统的亚美尼亚编号方式(有序列表使用)



    
    
    
    list-style-type
    


    

红色

  • 大红
  • 朱红
  • 嫣红

蓝色

  1. 群青
  2. 普蓝
  3. 湖蓝

【CSS3】第3章 CSS3入门_第35张图片

注意:由于各个浏览器对list-style-type属性的解析不同。因此,在实际网页制作过程中不推荐使用list-style-type属性。

3.5.2 list-style-image属性

使用list-style-image属性可以为各个列表项设置图像符号,使列表的样式更加美观,属性值为图像的url。




    
    
    
    list-style-image
    


    

认真严谨

  • 从小事做起
  • 从细节做起
  • 从平凡做起

【CSS3】第3章 CSS3入门_第36张图片

list-style-image属性对列表项目图像的控制能力不强。因此,实际工作中不建议使用list-style-image属性,常通过为

  • 标签设置背景图像的方式实现列表项目图像。

    3.5.3 list-style-position属性

    在CSS中,list-style-position属性用于控制列表项目符号的位置,其取值有inside和outside2个。

    inside:列表项目符号位于列表文本以内。 outside:列表项目符号位于列表文本以外(默认值)。

    
    
    
        
        
        
        list-style-position
        
    
    
        

    中秋节

    • 中秋节,又称月夕、秋节、仲秋节。
    • 中秋节在农历八月十五。
    • 2008年,中秋节被列为国家法定节假日。
    • 端午节
    • 除夕
    • 清明节
    • 重阳节

    【CSS3】第3章 CSS3入门_第37张图片

    3.5.4 list-style属性

    在CSS中,列表样式也是一个复合属性,可以将列表相关的样式都综合定义在一个复合属性list-style中。

    使用list-style属性综合设置列表样式的语法格式:list-style:列表项目符号 列表项目符号的位置 列表项目图像;

    
    
    
        
        
        
        list-style
        
    
    
        
    • 永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。
    • 群贤毕至,少长咸集。
    • 此地有崇山峻岭,茂林修竹,又有清流激湍,映带左右,引以为流觞曲水,列坐其次。

    【CSS3】第3章 CSS3入门_第38张图片

    在实际网页制作过程中,为了更高效地控制列表项目符号,通常将list-style的属性值定义为none,然后通过为

  • 设置背景图像的方式实现不同的列表项目符号。

    
    
    
        
        
        
        通过设置背景图像的方式来添加列表图像
        
    
    
        

    熊猫

    黑眼圈
    肥胖腰
    圆滚滚

    【CSS3】第3章 CSS3入门_第39张图片

    3.6 CSS层叠性和继承性

    层叠性和继承性是CSS的基本特征。在网页制作中,合理利用CSS的层叠性和继承性能够简化代码结构,提升网页代码的运行速度。下面将对CSS的层叠性和继承性进行详细讲解。

    3.6.1 层叠性

    层叠性是指CSS样式具有相互叠加的特性。

    当使用内嵌式CSS样式表定义

    标签字号为12像素,链入式CSS样式定义

    标签颜色为红色,那么段落文本将显示字号为12像素,颜色为红色,也就是说这两种样式产生了叠加。

    
    
    
        
        
        
        CSS层叠性
        
    
    
        

    离离原上草,一岁一枯荣。

    野火烧不尽,春风吹又生。

    【CSS3】第3章 CSS3入门_第40张图片

    3.6.2 继承性

    继承性是指子标签会继承父标签的某些样式。

    定义主体标签的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为页面其他的标签都嵌套在标签中,是标签的子标签。这些子标签继承了父标签的属性。

    p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;} 等价于 body{color:black;}

    恰当地使用CSS继承性可以简化代码。但是在网页中如果所有的元素都大量继承样式,判断样式的来源就会很困难。所以,在实际工作中,网页中通用的全局样式可以使用继承。例如,字体、字号、颜色、行距等可以在标签选择器中统一设置,通过继承性控制文档中的文本。其他标签可以使用CSS基础选择器单独设置。

    【CSS3】第3章 CSS3入门_第41张图片

    注意:标题标签不会采用标签设置的字号,是因为标题标签自带默认字号样式,如果标签设置字号过小,就会被标题标签覆盖。

    3.7 CSS优先级

    定义CSS样式时,经常出现多个样式规则应用在同一标签上的情况。此时CSS就会根据样式规则的权重,优先显示权重最高的样式。

    CSS优先级

    CSS优先级指的就是CSS样式规则的权重。在网页制作中,CSS为每个基础选择器都指定了不同的权重,方便我们添加样式代码。

    【CSS3】第3章 CSS3入门_第42张图片

    可以通过虚拟数值的方式为这些选择器匹配权重。假设标签选择器具有权重为1,类选择器具有权重则为10,id选择器具有权重则为100。这样id选择器“#header”就具有最大的优先级,因此文本显示为蓝色。

    对于由多个选择器构成的复合选择器(并集选择器除外),其权重可以理解为这些基础选择器权重的叠加。

    【CSS3】第3章 CSS3入门_第43张图片

    在考虑权重时,还需要注意的一些特殊情况

    继承样式的权重为0。 行内样式优先。 权重相同时,CSS遵循就近原则。 使用“!important”命令的标签会被赋予最高的优先级。

    复合选择器的权重为组成它的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和。

    
    
    
        
        
        
        复合选择器权重的叠加
        
    
    
        
    文本的样式

    【CSS3】第3章 CSS3入门_第44张图片

    3.8 阶段案例—宣传软文

    【CSS3】第3章 CSS3入门_第45张图片

    1.结构分析 效果图所示的宣传软文由1个标题、多个段落构成,可以使用标题标签

    、段落标签

    进行定义。同时,为了设置页面中需要特殊显示的文本,还需要在文本中嵌套不同类名的标签对其进行单独控制。 2.样式分析 仔细观察效果图,可以发现页面中使用了多种字体,这就需要预先下载字体,并使用@font-face规则定义服务器字体,然后应用字体样式属性,控制段落文本的字号、粗细和颜色等样式。需要注意的是最后一行文本中有省略号标示溢出文本的效果,可以使用text-overflow:ellipsis;样式来实现。

    
    
    
        
        
        
        宣传软文
        
    
    
        

    NO.1Attitude

    注重细节科学严谨

    态度决定一切

    认真的工作态度

    做事情要认真严谨,把做好每件事情的着力点放在每一个环节、每一个步骤上,不心浮气躁,不好高骛远,从最简单、最平凡、最普通的事情做起。

    @charset "utf-8";
    /* CSS Document */
    *{margin:0; padding:0;}
    @font-face{font-family:ONYX; src:url(font/ONYX.TTF);}
    @font-face{font-family:TCM; src:url(font/TCCM____.TTF);}
    @font-face{font-family:BOOM; src:url(font/BOOMBOX.TTF);}
    @font-face{font-family:LTCH; src:url(font/LTCH.TTF);}
    .one .a{font-family:ONYX; font-size:48px; color:#333;}
    .one .b{font-family:TCM; font-size:58px; color:#4c9372;}  
    .two .a{font-family:BOOM; font-size:24px; font-weight:bold; font-style:oblique; color:#333;}
    .two .b{font-family:BOOM; font-size:36px; font-weight:bold; color:#333;}
    h2 .a{font-family:BOOM; font-size:60px;}
    h2 .b{font-family:LTCH; font-size:50px; color:#e1005a;}
    .three{font-family:"微软雅黑"; font-size:36px;}
    .three strong{color:#e1005a;}
    .four{width:500px; font-family:"微软雅黑"; font-size:14px; color:#747474;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

    本章小结

    本章首先介绍了CSS的发展史、CSS样式规则、引入方式以及CSS基础选择器,然后讲解了常用的字体样式属性、文本外观属性、列表样式属性、层叠性、继承性以及优先级,最后通过CSS修饰文本,制作出了一个宣传软文页面。 通过本章的学习,读者能够充分理解CSS所实现的结构与样式相离的特性以及CSS样式的优先级规则,可以熟练地使用CSS控制页面中的字体和文本外观样式。

  • 你可能感兴趣的:(web前端,css3,前端,css)