第三章页设计及制作电子样式表入门
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第三章 CSS入门
• CSS核心基础 • CSS文本相关样式
• CSS选择器 • CSS高级特性
CSS核心基础 CSS文本相关样式
CSS高级特性 阶段案例—制作新闻页面
3.1 CSS核心基础
• 3.1.1 CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了
。 – RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
3.2 CSS文本样式
2、letter-spacing:字间距 letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值 ，允许使用负值，默认为normal。
– 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。 – 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
3.1 CSS核心基础
– 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、 Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。
体名必须位于中文字体名之前。 – 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-
family: "Times New Roman";。 – 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3.2 CSS文本样式
3、font-weight:字体粗细 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100 的整数倍）。 4、font-variant:变体 font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用 属性值如下： normal：默认值，浏览器会显示标准的字体。 small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大 写字体的字母与其余文本相比，其字体尺寸更小。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 3.类、名id{选属择性器1:属性值1; 属性2:属性值2; 属性3:属性值3; } id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的 ，只能对应于文档中某一个具体的元素。
3.2 CSS文本样式
6、text-decoration:文本装饰 text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下： – none：没有装饰（正常文本默认值）。 – underline：下划线。 – overline：上划线。 – line-through：删除线。 另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和
3.2 CSS文本样式
• 3.2.2 CSS文本外观属性 1、color:文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： – 预定义的颜色值，如red，green，blue等。 – 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式
3.2 CSS文本样式
3、word-spacing:单词间距 – word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属
性值可为不同单位的数值，允许使用负值，默认为normal。 – word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的
/* 在此还可以存放其他CSS样式*/ </style>
3.1 CSS核心基础
• 3.1.3 CSS基础选择器 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式
规则部分被称为选择器，CSS基础选择器有四种： 1、标记选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS
删除线效果，就可以将underline和line-through同时赋给text-decoration。
3.2 CSS文本样式
7、text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下： – left：左对齐（默认值） – right：右对齐 – center：居中对齐 8、text-indent:首行缩进 text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对
间距，而word-spacing定义的为英文单词之间的间距。
3.2 CSS文本样式
4、line-height:行间距 line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。lineheight常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素 px。
相对长度单位 em px
绝对长度单位 in cm mm pt
说明 相对于当前对象内文本的字体尺寸
像素，最常用，推荐使用 说明 英寸 厘米 毫米 点
3.2 CSS文本样式
2、font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落 文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
3.1 CSS核心基础
2、内嵌式 内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法 格式如下：
<style>标记定义，其基本语法格式如下： <head> <style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 该<语/s法tyl中e>，<style>标记一般位于<head>标记中<title>标记之后，也可以把他放在HTML文档的任何地方 。</head>
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到 找到合适的字体。
p{ font-family:"微软雅黑";}
3.2 CSS文本样式
使用font-family设置字体时，需要注意以下几点： – 各种字体之间必须使用英文状态下的逗号隔开。 – 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字
.2 CSS文本样式
5、font-style:字体风格 font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下： – normal：默认值，浏览器会显示标准的字体样式。 – italic：浏览器会显示斜体的字体样式。 – oblique：浏览器会显示倾斜的字体样式。
样式。其基本语法格式如下：
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异 化样式。
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.1 CSS核心基础
2、类选择器 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
3.1 CSS核心基础
初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如 下：
– CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属 性和值”都采用小写的方式。
– 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增 加新样式最好保留。
3.1 CSS核心基础
3、链入式 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样 式表文件链接到HTML文档中，其基本语法格式如下：
该<语he法ad中>，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三个属性，具体如下 ：<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
3.2 CSS文本样式
6、font:综合设置字体样式 font属性用于对字体样式进行综合设置，其基本语法格式如下：
使选用择f器on{tf属on性t: f时on，t-s必ty须le按fo上nt面-v语ari法an格t 式fon中t-的we顺ig序ht书fo写nt，-s各ize个/li属ne性-h以eig空ht格f隔on开t-f。amily;} 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不 起作用。
3.2 CSS文本样式
5、text-transform:文本转换 text-transform属性用于控制英文字符的大小写，其可用属性值如下： – none：不转换（默认值）。 – capitalize：首字母大写。 – uppercase：全部字符转换为大写。 – lowercase：全部字符转换为小写。
</head>
3.1 CSS核心基础
– href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 – type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式
表。 – rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文
档是一个样式表文件。
3.1 CSS核心基础
4、导入式 导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在<style>标记 内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下：
<style type="text/css" > 该@语i法mp中or，t usrtly(cles标s文记件内路还径可)以;或存@放im其p他or的t "内cs嵌s文样件式路，径@";import语句需要位于其他内嵌样式的上面。
解CSS样式规则，具体格式如下：
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样 选择式器。{其属中性，1:属属性性值和1属; 属性性值2以:属“性键值值2对; 属”性的3形:属式性出值现3，;} 属性是对指定的对象设置的样式属性，例如字 体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区 分。
3.1 CSS核心基础
• 3.1.2 引入CSS样式表 1、行内式 行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值 <标的记书名写s规ty范le=与"属CS性S1样:属式性规值则1相; 属同性，2行:属内性式值只2对; 属其性所3在:属的性标值记3及;">嵌内套容在<其/标中记的名子>标记起作用。
*{ margin: 0; padding: 0;
}
/* 定义外边距*/ /* 定义内边距*/
3.2 CSS文本样式
• 3.2.1 CSS字体样式属性 1、font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相
对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.1 CSS核心基础
4、通配符选择器 通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本 语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
• CSS核心基础 • CSS文本相关样式
• CSS选择器 • CSS高级特性
CSS核心基础 CSS文本相关样式
CSS高级特性 阶段案例—制作新闻页面
3.1 CSS核心基础
• 3.1.1 CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了
。 – RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
3.2 CSS文本样式
2、letter-spacing:字间距 letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值 ，允许使用负值，默认为normal。
– 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。 – 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
3.1 CSS核心基础
– 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、 Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。
体名必须位于中文字体名之前。 – 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-
family: "Times New Roman";。 – 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3.2 CSS文本样式
3、font-weight:字体粗细 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100 的整数倍）。 4、font-variant:变体 font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用 属性值如下： normal：默认值，浏览器会显示标准的字体。 small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大 写字体的字母与其余文本相比，其字体尺寸更小。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 3.类、名id{选属择性器1:属性值1; 属性2:属性值2; 属性3:属性值3; } id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的 ，只能对应于文档中某一个具体的元素。
3.2 CSS文本样式
6、text-decoration:文本装饰 text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下： – none：没有装饰（正常文本默认值）。 – underline：下划线。 – overline：上划线。 – line-through：删除线。 另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和
3.2 CSS文本样式
• 3.2.2 CSS文本外观属性 1、color:文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： – 预定义的颜色值，如red，green，blue等。 – 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式
3.2 CSS文本样式
3、word-spacing:单词间距 – word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属
性值可为不同单位的数值，允许使用负值，默认为normal。 – word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的
/* 在此还可以存放其他CSS样式*/ </style>
3.1 CSS核心基础
• 3.1.3 CSS基础选择器 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式
规则部分被称为选择器，CSS基础选择器有四种： 1、标记选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS
删除线效果，就可以将underline和line-through同时赋给text-decoration。
3.2 CSS文本样式
7、text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下： – left：左对齐（默认值） – right：右对齐 – center：居中对齐 8、text-indent:首行缩进 text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对
间距，而word-spacing定义的为英文单词之间的间距。
3.2 CSS文本样式
4、line-height:行间距 line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。lineheight常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素 px。
相对长度单位 em px
绝对长度单位 in cm mm pt
说明 相对于当前对象内文本的字体尺寸
像素，最常用，推荐使用 说明 英寸 厘米 毫米 点
3.2 CSS文本样式
2、font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落 文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
3.1 CSS核心基础
2、内嵌式 内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法 格式如下：
<style>标记定义，其基本语法格式如下： <head> <style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 该<语/s法tyl中e>，<style>标记一般位于<head>标记中<title>标记之后，也可以把他放在HTML文档的任何地方 。</head>
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到 找到合适的字体。
p{ font-family:"微软雅黑";}
3.2 CSS文本样式
使用font-family设置字体时，需要注意以下几点： – 各种字体之间必须使用英文状态下的逗号隔开。 – 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字
.2 CSS文本样式
5、font-style:字体风格 font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下： – normal：默认值，浏览器会显示标准的字体样式。 – italic：浏览器会显示斜体的字体样式。 – oblique：浏览器会显示倾斜的字体样式。
样式。其基本语法格式如下：
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异 化样式。
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.1 CSS核心基础
2、类选择器 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
3.1 CSS核心基础
初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如 下：
– CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属 性和值”都采用小写的方式。
– 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增 加新样式最好保留。
3.1 CSS核心基础
3、链入式 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样 式表文件链接到HTML文档中，其基本语法格式如下：
该<语he法ad中>，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三个属性，具体如下 ：<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
3.2 CSS文本样式
6、font:综合设置字体样式 font属性用于对字体样式进行综合设置，其基本语法格式如下：
使选用择f器on{tf属on性t: f时on，t-s必ty须le按fo上nt面-v语ari法an格t 式fon中t-的we顺ig序ht书fo写nt，-s各ize个/li属ne性-h以eig空ht格f隔on开t-f。amily;} 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不 起作用。
3.2 CSS文本样式
5、text-transform:文本转换 text-transform属性用于控制英文字符的大小写，其可用属性值如下： – none：不转换（默认值）。 – capitalize：首字母大写。 – uppercase：全部字符转换为大写。 – lowercase：全部字符转换为小写。
</head>
3.1 CSS核心基础
– href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 – type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式
表。 – rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文
档是一个样式表文件。
3.1 CSS核心基础
4、导入式 导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在<style>标记 内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下：
<style type="text/css" > 该@语i法mp中or，t usrtly(cles标s文记件内路还径可)以;或存@放im其p他or的t "内cs嵌s文样件式路，径@";import语句需要位于其他内嵌样式的上面。
解CSS样式规则，具体格式如下：
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样 选择式器。{其属中性，1:属属性性值和1属; 属性性值2以:属“性键值值2对; 属”性的3形:属式性出值现3，;} 属性是对指定的对象设置的样式属性，例如字 体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区 分。
3.1 CSS核心基础
• 3.1.2 引入CSS样式表 1、行内式 行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值 <标的记书名写s规ty范le=与"属CS性S1样:属式性规值则1相; 属同性，2行:属内性式值只2对; 属其性所3在:属的性标值记3及;">嵌内套容在<其/标中记的名子>标记起作用。
*{ margin: 0; padding: 0;
}
/* 定义外边距*/ /* 定义内边距*/
3.2 CSS文本样式
• 3.2.1 CSS字体样式属性 1、font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相
对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.1 CSS核心基础
4、通配符选择器 通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本 语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。