《第三章CSS入门》由会员分享，可在线阅读，更多相关《第三章CSS入门（44页珍藏版）》请在金锄头文库上搜索。
1、让IT教学更简单，让IT学习更有效厚德和谐砺学创新第三章CSS入门CSS核心基础CSS文本相关样式CSS选择器CSS高级特性 主讲教师：计算机学院桑红燕 2016.3-2016.7 厚德和谐砺学创新目录22024/7/29计算机学院 WEB基础3.13.1CSS核心基础3.23.2CSS文本相关样式3.33.3CSS高级特性3.43.4阶段案例制作新闻页面厚德和谐砺学创新32024/7/29计算机学院 WEB基础3.1CSS核心基础3.1.1 CSS样式规则样式规则 选择器属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 选择器选择器用于指定CSS样式作用的HTML对象对象，花括号内
2、是对该对象设置的具体样式。其中，属性和属性值以“键值对键值对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区分。厚德和谐砺学创新42024/7/29计算机学院 WEB基础3.1CSS核心基础注意CSS代码结构中的几个特点，具体如下：CSS样式中的选择器严格区分大小写选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写小写的方式。多个属性之间必须用英文状态下的分号分号隔开，最后一个属性后的分号可以省略但是，为了便于增加新样式最好保留。 如果属性的值由多个单词组成
3、且中间包含空格属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文英文状态下的引号状态下的引号。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。 /* */HTML中注释标记厚德和谐砺学创新52024/7/29计算机学院 WEB基础3.1CSS核心基础在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化格式化CSS代码代码，这样可以提高代码的可读性。厚德和谐砺学创新62024/7/29计算机学院 WEB基础3.1CSS核心基础3.1.2 引入引入CSS样式表样式表1、行内式、行内
4、式行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下： 内容 该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中行内式只对其所在的标记及嵌套在其中的子标记起作用。的子标记起作用。example 01厚德和谐砺学创新72024/7/29计算机学院 WEB基础a)使用CSS行内式为页面元素引入样式。b)按照CSS样式规则为3号标题设置成微软雅黑、蓝色、26px字体c)按照CSS样式规则为段落设置成微软雅黑、红色、28px字体。案例1厚德和谐砺学创
5、新82024/7/29计算机学院 WEB基础3.1CSS核心基础2、内嵌式、内嵌式内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义，其基本语法格式如下：标记定义，其基本语法格式如下：选择器 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 该语法中，标记一般位于标记中标记中标记之后标记之后，也可以把他放在HTML文档的任何地方。example 1.1，02厚德和谐砺学创新92024/7/29计算机学院 WEB基础3.1CSS核心基础3、链入式、链入式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中
6、，其基本语法格式如下： 该语法中，标记需要放在头部标记中头部标记中，并且必须指定标记的三个属性，具体如下：厚德和谐砺学创新102024/7/29计算机学院 WEB基础3.1CSS核心基础href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。rel：定义当前文档与被链接文档之间的关系当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。example 03链入式使用最多，可以实现结构和表现的分离。厚德
7、和谐砺学创新112024/7/29计算机学院 WEB基础3.1CSS核心基础4、导入式、导入式导入式与链入式相同，都是针对外部样式表文件外部样式表文件的。对HTML头部文档应用style标记，并在标记内的开头处使用import语句，即可导入外部样式表文件。其基本语法格式如下：import url(css文件路径);或 import css文件路径;/* 在此还可以存放其他CSS样式*/ 该语法中，style标记内还可以存放其他的内嵌样式，import语句需要位于其他内嵌样式的上面。example 03 导入式和链入式功能基本相同，加载时间和顺序不同。厚德和谐砺学创新122024/7/29计算机
8、学院 WEB基础3.1CSS核心基础3.1.3 CSS基础选择器基础选择器 将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器选择器，CSS基础选择器有四种：标记名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。1、标记选择器、标记选择器 指用HTML标记名称作为选择器标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：厚德和谐砺学创新132024/7/29计算机学院 WEB基础a
9、)新建两个外部样式表red.css、blue.css。b)使用导入式引入CSS样式表。c)在外部样式表red.css中，通过标记选择器分别设置标题1号标题、作者2号标题为30px字体、红色、居中效果d)在外部样式表blue.css中，通过标记选择器设置段落为16px字体、蓝色、居中效果。案例2厚德和谐砺学创新142024/7/29计算机学院 WEB基础3.1CSS核心基础2、类选择器、类选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：.类名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 类选择器最大的优势是可以为元素对象定义单独或相同的样式。exam
10、ple 04类名第一个字符不能使用数字，严格区分大小写，一般采用小写英文字符，一般采用小写英文字符，多个类名中间用空格空格分隔。厚德和谐砺学创新152024/7/29计算机学院 WEB基础1、 使用内嵌式引入CSS样式表。2、 使用类选择器定义元素。（1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体；第二个字母“o”设置为红色、加粗、60px字体；第三个字母“o”设置为黄色、加粗、60px字体；第四个字母“g”设置为蓝色、加粗、60px字体。（2）剩余字母“le”按默认样式输出。案例3厚德和谐砺学创新162024/7/29计算机学院 WEB基础3.1CSS核心基础3、
11、 id选择器选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：#id名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 该语法中，id名即为HTML元素的元素的id属性值属性值，大多数HTML元素都可以定义id属性元素的id值是唯一的，只能对应于文档中某一个具体的元素。example 05 同一个同一个id不可应用于多个标记不可应用于多个标记，id选择器选择器不能定义多个值不能定义多个值厚德和谐砺学创新172024/7/29计算机学院 WEB基础3.1CSS核心基础4、通配符选择器、通配符选择器通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页
12、面中所有的元素。其基本语法格式如下：*属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。* margin: 0; /* 定义外边距*/padding: 0; /* 定义内边距*/厚德和谐砺学创新182024/7/29计算机学院 WEB基础3.2.1 CSS字体样式属性字体样式属性1、font-size:字号大小字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：3.2CSS文本
13、样式相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点厚德和谐砺学创新192024/7/29计算机学院 WEB基础2、font-family:字体字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：3.2CSS文本样式p font-family:微软雅黑;可以同时指定多个字体，中间以逗号逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。厚德和谐砺学创新202024/7/29计算机学院 WE
14、B基础使用使用font-family设置字体时，需要注意以下几点：设置字体时，需要注意以下几点：各种字体之间必须使用英文状态下的逗号英文状态下的逗号隔开。中文字体中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单英文状态下的单引号或双引号引号或双引号，例如font-family: Times New Roman;。example 4尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。3.2CSS文本样式厚德和谐砺学创新212024/7/29计算机学院 WEB基
15、础3、font-weight:字体粗细字体粗细font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100900（100的整数倍）。example 063.2CSS文本样式4、font-variant:变体变体font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效仅对英文字符有效。其可用属性值如下：normal：默认值，浏览器会显示标准的字体。small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。exam
16、ple 07厚德和谐砺学创新222024/7/29计算机学院 WEB基础5、font-style:字体风格字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。example 083.2CSS文本样式厚德和谐砺学创新232024/7/29计算机学院 WEB基础6、font:综合设置字体样式综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法格式如下：3.2CSS文本样式选择器font: font-styl
17、e font-variant font-weight font-size/line-height font-family;使用font属性时，必须必须按上面语法格式中的顺序顺序书写，各个属性以空格空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留必须保留font-size和font-family属性，否则font属性将不起作用。example 09厚德和谐砺学创新242024/7/29计算机学院 WEB基础a)使用标记搭建页面结构，并为每个标记定义不同的类。b)为页面中不同的类设置不同的字体效果，如颜色、字体、字号、字体粗细、变体、字体风格。c)最后一个类，使用font综合属性设置
18、字体样式。案例4厚德和谐砺学创新252024/7/29计算机学院 WEB基础3.2.2 CSS文本外观属性文本外观属性1、color:文本颜色文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。可简写可简写RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。3.2CSS文本样式厚德和谐砺学创新262024
19、/7/29计算机学院 WEB基础2、letter-spacing:字间距字间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。3.2CSS文本样式example 10厚德和谐砺学创新272024/7/29计算机学院 WEB基础3、word-spacing:单词间距单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing和letter-spa
20、cing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。3.2CSS文本样式example 11厚德和谐砺学创新282024/7/29计算机学院 WEB基础4、line-height:行间距行间距line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。3.2CSS文本样式example 12厚德和谐砺学创新292024/7/29计算机学院 WEB基础5、t
21、ext-transform:文本转换文本转换text-transform属性用于控制英文字符的大小写，其可用属性值如下：none：不转换（默认值）。capitalize：首字母大写。uppercase：全部字符转换为大写。lowercase：全部字符转换为小写。3.2CSS文本样式厚德和谐砺学创新302024/7/29计算机学院 WEB基础6、text-decoration:文本装饰文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-thr
22、ough：删除线。另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。example 133.2CSS文本样式厚德和谐砺学创新312024/7/29计算机学院 WEB基础7、text-align:水平对齐方式水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐center：居中对齐8、text-indent:首行缩进首行缩进te
23、xt-indent属性用于设置首行文本的缩进首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。example 143.2CSS文本样式厚德和谐砺学创新322024/7/29计算机学院 WEB基础9、white-space:空白符处理空白符处理使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。 在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。pre：
24、预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。example 153.2CSS文本样式厚德和谐砺学创新332024/7/29计算机学院 WEB基础案例51、使用标记选择器控制页面元素。、使用标记选择器控制页面元素。2、设置所有文本为宋体、设置所有文本为宋体、12像素、绿色字体，像素、绿色字体，“春天春天”字体颜色设为红色。字体颜色设为红色。3、设置、设置h2标题标题“春天在哪里春天在哪里”为为16像素、红色、加粗、居中、上划线的效果。像素、红色、加粗、居中、上划线
25、的效果。4、设置文本首行缩进、设置文本首行缩进2个字符。个字符。厚德和谐砺学创新342024/7/29计算机学院 WEB基础案例61、综合使用标记选择器、综合使用标记选择器、id选择器及类选择器控制元素。选择器及类选择器控制元素。2、设置所有文本为宋体、设置所有文本为宋体、14像素，行高为像素，行高为18像素。像素。3、设置、设置h1标题标题“朋友朋友”为为18像素、紫色、加粗、居中的效果。像素、紫色、加粗、居中的效果。4、设置第一段文本为红色、居中对齐。、设置第一段文本为红色、居中对齐。5、设置第二段文本为蓝色、首行缩进、设置第二段文本为蓝色、首行缩进2个字符、字间距为个字符、字间距为16像
26、素。像素。6、设置第三段文本为绿色、加粗、斜体。、设置第三段文本为绿色、加粗、斜体。7、设置第四段文本为紫色、删除线效果。、设置第四段文本为紫色、删除线效果。厚德和谐砺学创新352024/7/29计算机学院 WEB基础3.3 CSS高级特性3.3.1 CSS复合选择器复合选择器复合选择器是由两个或多个两个或多个基础选择器，通过不同的方式组合而成的，1、标签指定式选择器、标签指定式选择器标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器标记选择器，第二个为class选择器或选择器或id选择器选择器，两个选择器之间不不能有空格能有空格，如h3.special或p#one。ex
27、ample 16。2、后代选择器、后代选择器后代选择器用来选择元素或元素组的后代元素或元素组的后代，其写法就是把外层标记写在外层标记写在前面，内层标记写在后面前面，内层标记写在后面，中间用空格空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。example 17厚德和谐砺学创新362024/7/29计算机学院 WEB基础3、并集选择器、并集选择器并集选择器是各个选择器通过各个选择器通过逗号逗号连接而成的连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义
28、相同的CSS样式。example 183.3 CSS高级特性厚德和谐砺学创新372024/7/29计算机学院 WEB基础3.3.2 CSS层叠性和继承性层叠性和继承性1、层叠性、层叠性所谓层叠性是指多种多种CSS样式的叠加样式的叠加。example 193.3 CSS高级特性厚德和谐砺学创新382024/7/29计算机学院 WEB基础 “猜猜我是什么颜色” 分别给同一标记设置两种不同的颜色，第一种使用标记选择器设为蓝色，第二种使用类选择器设为红色。案例7厚德和谐砺学创新392024/7/29计算机学院 WEB基础2、继承性、继承性所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，
29、如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。3.3 CSS高级特性厚德和谐砺学创新402024/7/29计算机学院 WEB基础3.3.3 CSS优先级优先级定义CSS样式时，经常出现两个或
30、更多规则应用在同一元素上，这时就会出现优先级的问题。标记选择器权重：标记选择器权重：1；类选择器权重：；类选择器权重：10；id选择器权重：选择器权重：100继承样式的权重为继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。行内样式优先。应用行内样式优先。应用style属性的元素属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 3.3 CSS高级特性厚德和谐砺学创新412024/7/29计算机学院 WEB基础权重相同时，权重相同时，CSS遵循就近原则遵循
31、就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。CSS定义了一个定义了一个!important命令命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。复合选择器的权重无论为多少个标记选择器的叠加，其权重不会高于复合选择器的权重无论为多少个标记选择器的叠加，其权重不会高于类选择器。类选择器。复合选择器的权重无论为多少个类选择器和标记选择器的叠加，其权复合选择器的权重无论为多少个类选择器和标记选择器的叠加，其权重都不会高于重都不会高于id选择器。选择器。example 203.3 CSS高级特性厚德和谐砺学
32、创新422024/7/29计算机学院 WEB基础3.4阶段案例效果图如下：厚德和谐砺学创新432024/7/29计算机学院 WEB基础案例81、使用行内式引入、使用行内式引入CSS样式。样式。2、设置所有文本为微软雅黑、设置所有文本为微软雅黑、14像素、黑色字体。像素、黑色字体。3、设置、设置“新浪新浪”、“新浪网新浪网”为红色字体，为红色字体，“博客首页博客首页”为蓝色字体，网址及日期为为蓝色字体，网址及日期为 绿色字体。绿色字体。4、设置标题为、设置标题为16像素、左对齐、下划线的效果。像素、左对齐、下划线的效果。5、设置文本、设置文本“-百度快照百度快照-评价评价”为灰色、下划线的效果。为灰色、下划线的效果。厚德和谐砺学创新442024/7/29计算机学院 WEB基础本章小结本章首先介绍了CSS样式规则，引入方式，以及CSS基础选择器。然后讲解了常用的CSS文本样式属性，CSS复合选择器，CSS的层叠性、继承性以及优先级，最后通过CSS修饰文本，制作出了一个常见的新闻页面。通过本章的学习，应该能够充分理解CSS所实现的结构与表现的分离，以及CSS样式的优先级规则，能够熟练地使用CSS控制页面中的字体和文本外观样式。
