网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第3章 运用CSS3设置网页样式_第1页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第3章 运用CSS3设置网页样式_第2页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第3章 运用CSS3设置网页样式_第3页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第3章 运用CSS3设置网页样式_第4页
网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第3章 运用CSS3设置网页样式_第5页
已阅读5页，还剩60页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章运用CSS3设置网页样式《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》学习目标/Target了解CSS和CSS3，能够归纳CSS和CSS3的概念以及区别了解CSS样式规则，能够说出其组成部分熟悉CSS的层叠性和继承性，能够归纳CSS的层叠性和继承性熟悉CSS优先级，能够归纳CSS优先级学习目标/Target熟悉CSS3新增的选择器，能够归纳这些选择器的基本使用掌握CSS的引入方式，能够将CSS应用于HTML文档掌握基础选择器的使用方法，能够通过基础选择器选择要改变样式的元素掌握字体样式属性和文本外观属性的用法，能够设置字体、文本的样式章节概述/Summary随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。本章将对CSS3的基础知识进行详细讲解。目录/Contents3.13.2认识CSS和CSS3CSS核心基础3.3CSS文本样式3.4CSS三大特性目录/Contents3.53.6CSS3新增选择器阶段案例：制作新闻页面3.7动手实践：制作认真严谨网页认识CSS和CSS33.13.1认识CSS和CSS3什么是CSS？3.1认识CSS和CSS3CSS英文全称为cascadingstylesheet，中文译为“串联样式表”。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。3.1认识CSS和CSS3CSS3是CSS技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS3的语法是建立在CSS原始版本基础上的，因此旧版本的CSS属性在CSS3版本中依然适用。CSS核心基础3.23.2.1CSS样式规则CSS样式的书写规则是什么？CSS样式修饰的网页随处可见网上购物热门游戏热点新闻3.2.1CSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内部是一条或多条声明。每条声明由一个属性和属性值组成，以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。3.2.2引入CSS引入CSS样式表的方式有哪些？3.2.2引入CSS行内式也称内联样式，是通过标签的style属性来设置标签的样式，其基本语法格式如下:行内式行内式内嵌式链入式<标签名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>3.2.2引入CSS内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，其基本语法格式如下:内嵌式行内式内嵌式链入式<head><style>选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style></head>3.2.2引入CSS链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：链入式行内式内嵌式链入式<head><linkhref="CSS文件的路径"rel="stylesheet"></head>3.2.3CSS基础选择器要想将CSS样式应用于特定的HTML标签，首先需要找到该目标标签。在CSS中，执行这一任务的样式规则部分称为选择器。选择器又分为标签选择器、类选择器、id选择器、通配符选择器、标签指定式选择器、后代选择器和并集选择器。3.2.3CSS基础选择器标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择器标签选择器通配符选择器类选择器id选择器3.2.3CSS基础选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：类选择器.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择器类选择器id选择器通配符选择器3.2.3CSS基础选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}id选择器标签选择器类选择器id选择器通配符选择器3.2.3CSS基础选择器通配符选择器用“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：通配符选择器*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择器类选择器id选择器通配符选择器3.2.3CSS基础选择器标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。后代选择器用来选择某标签的后代标签，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、类选择器以及id选择器等）都可以作为并集选择器的一部分。标签指定式选择器后代选择器并集选择器CSS文本样式3.33.3CSS文本样式学习HTML时，可以使用文本样式标签及其属性控制文本的显示样式，但是这种方式烦琐且不利于代码的共享和移植。为此，CSS提供了相应的文本设置属性。为什么使用CSS文本样式？3.3CSS文本样式1font-size属性用于设置字号2font-family属性用于设置字体3font-weight属性用于定义字体的粗细4

font-style属性用于定义字体风格5

font综合属性用于综合设置字体样式6@font-face属性用于定义服务器字体7word-wrap属性用于实现长单词和URL地址的自动换行3.3.1字体样式属性font-size属性font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示：font-size属性相对长度单位说明em相对于当前对象内文本的字体尺寸%相对于‌父元素‌的百分比绝对长度单位说明px像素，最常用，推荐使用in英寸cm厘米mm毫米3.3.1字体样式属性font-family属性font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。font-family属性p{font-family:"微软雅黑";}例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：3.3.1字体样式属性font-weight属性font-weight属性用于定义字体的粗细，其可用属性值如下表所示：font-weight属性属性值描述normal默认值。定义标准的字符bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100~900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗3.3.1字体样式属性font-style属性font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：font-style属性normal：默认值，浏览器会显示标准的字体样式italic：浏览器会显示斜体的字体样式oblique：浏览器会显示倾斜的字体样式3.3.1字体样式属性font综合属性font属性用于对字体样式进行综合设置，其基本语法格式如下：font属性选择器{font:font-stylefont-weightfont-size/line-heightfont-family;}3.3.1字体样式属性@font-face规则@font-face规则是CSS3的新增规则，用于定义服务器字体。通过@font-face规则，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。@font-face属性@font-face{ font-family:字体名称;

src:字体路径;}3.3.1字体样式属性word-wrap:属性word-wrap属性用于实现长单词和URL地址的自动换行。word-wrap:属性选择器{word-wrap:属性值;}normal：只在允许的断字点换行（浏览器保持默认处理）。break-word：在长单词或URL地址内部进行换行。3.3.2文本外观属性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligncolor属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色名，如red，green，blue等。十六进制，如#FF0000，#FF6600，#66CC00等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。3.3.2文本外观属性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-alignletter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。letter-spacing属性的属性值可为不同单位的数值，允许使用负值，默认为normal。3.3.2文本外观属性word-spacing属性用于定义英文单词之间的间距，对中文字符无效。word-spacing属性用于定义英文单词之间的间距，和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。colorword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceline-heighttext-alignletter-spacingletter-spacing3.3.2文本外观属性line-height属性用于设置行间距。所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为px（像素）、em（相对值）和%（百分比），实际工作中使用最多的是px（像素）。colorline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spacetext-alignletter-spacingletter-spacingword-spacingword-spacing3.3.2文本外观属性text-transform属性用于控制英文字符的大小写。其可用属性值如下：none：不转换（默认值）。capitalize：首字母大写。uppercase：全部字符转换为大写。lowercase：全部字符转换为小写。colortext-aligntext-transformtext-decorationtext-indentwhite-spacetext-decorationtext-indentwhite-spacetext-alignletter-spacingletter-spacingword-spacingword-spacingline-heightline-height3.3.2文本外观属性text-decoration属性用于设置文本的下画线，上画线，删除线等装饰效果。其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下画线。overline：上画线。line-through：删除线。colortext-aligntext-decorationtext-indentwhite-spacetext-indentwhite-spacetext-alignletter-spacingletter-spacingword-spacingword-spacingline-heightline-heighttext-transformtext-transform3.3.2文本外观属性text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。colortext-aligntext-indentwhite-spacetext-indentwhite-spaceletter-spacingletter-spacingword-spacingword-spacingline-heightline-heighttext-transformtext-transformtext-decorationtext-decoration3.3.2文本外观属性text-indent属性用于设置首行文本的缩进。其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。colortext-indentwhite-spacewhite-spaceletter-spacingletter-spacingword-spacingword-spacingline-heightline-heighttext-transformtext-transformtext-decorationtext-decorationtext-aligntext-align3.3.2文本外观属性white-space属性用于设置空白符的处理方式。其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。pre：预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签<br>。内容超出标签的边界也不换行，若超出浏览器页面则会自动增加滚动条。colorwhite-spaceletter-spacingletter-spacingword-spacingword-spacingline-heightline-heighttext-transformtext-transformtext-decorationtext-decorationtext-aligntext-aligntext-indent3.3.2文本外观属性CSS3新增文本外观属性text-shadowtext-overflow3.3.2文本外观属性CSS3新增文本外观属性text-shadowtext-overflowtext-overflow使用text-shadow属性可以为页面中的文本添加阴影效果。选择器{ text-shadow:h-shadowv-shadowblurcolor;}3.3.2文本外观属性text-overflow属性用于标示对象内文本的溢出。选择器{text-overflow:属性值;}text-overflow属性的常用取值有两个：clip：修剪溢出文本，不显示省略标签“…”。ellipsis：用省略标签“…”标示被修剪文本，省略标签插入的位置是最后一个字符。CSS3新增文本外观属性text-shadowtext-overflow3.3.2文本外观属性设置省略标签标示溢出文本的具体步骤如下：1为包含文本的对象定义宽度。2应用“white-space:nowrap;”样式强制文本不能换行。3应用“overflow:hidden;”样式隐藏溢出文本。4应用“text-overflow:ellipsis;”样式显示省略标签。3.3.2文本外观属性多学一招：设置多个阴影叠加效果可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用逗号隔开。CSS三大特性3.43.4.1CSS层叠性和继承性层叠性是指多种CSS样式的叠加。层叠性继承性是指书写CSS时，子标签会继承父标签的某些样式，如文本颜色和字号。继承性3.4.1CSS层叠性和继承性并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：

边框属性

内/外边距属性背景属性定位属性布局属性元素宽高属性3.4.2CSS优先级网页制作时，对统一元素，应用不同的背景，会出现什么情况？思考background-color:pink;background-color:blue;background-color:red;【结论】定义CSS样式时，经常出现两个或更多规则应用在同一标签上，这时就会出现优先级的问题。3.4.2CSS优先级来看一个例子：<pclass="father"id="header"> <strongclass="blue">文本的颜色</strong></p>pstrong{color:black}/*权重为:1+1*/strong.blue{color:green;}/*权重为:1+10*/.fatherstrong{color:yellow}/*权重为:10+1*/p.fatherstrong{color:orange;}/*权重为:1+10+1*/p.father.blue{color:gold;}/*权重为:1+10+10*/#headerstrong{color:pink;}/*权重为:100+1*/#headerstrong.blue{color:red;}/*权重为:100+1+10*/用数字模拟权重值：3.4.2CSS优先级继承样式的权重为0。行内样式优先。权重相同时，CSS遵循就近原则。CSS定义了一个!important命令，该命令被赋予最大的优先级。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：CSS3新增选择器3.53.5CSS3新增选择器CSS3是CSS的最新版本，在CSS3中增加了许多新的选择器。运用这些选择器可以简化网页代码的书写，让文档的结构更加简单。CSS3新增的选择器主要分为属性选择器、关系选择器、结构化伪类选择器、伪元素选择器。CSS3有哪些新增选择器？3.5CSS3新增选择器属性选择器可以根据网页标签的属性及属性值来选择标签。属性选择器一般是一个标签后紧跟中括号“[]”，中括号内部是属性或者属性表达式。知识点讲解3.5CSS3新增选择器属性选择器举例说明E[att^=value]div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div标签E[att$=value]div[id$=section]表示匹配包含id属性，且id属性值是以“section”字符串结尾的div标签E[att*=value]div[id*=s

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论