Web前端基础案例 2_第1页
Web前端基础案例 2_第2页
Web前端基础案例 2_第3页
Web前端基础案例 2_第4页
Web前端基础案例 2_第5页
已阅读5页，还剩65页未读， 继续免费阅读

下载本文档

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

文档简介

任务3美化简单学院网站Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）在任务2中使用HTML标记和相应的属性搭建了简单学院网站，可以看出，只使用HTML标记创建的网站并不美观，本任务对简单学院网站进行美化，设置文字的颜色和对齐方式等。通过本任务的实现，掌握CSS3的基本语法、使用方式、选择器以及常用的文本样式属性等。3.1任务描述图3-1网站首页图3-2

学院简介页面对任务2中搭建的简单学院网站进行美化，页面浏览效果如图3-1~3-4所示图3-3学院新闻页面 图3-4新闻详情页面3.1任务描述3.2知识准备CSS常用文本属性043.2.1CSS基本概念3.2.2

CSS使用方式3.2.3常用CSS选择器3.2.4CSS常用文本属性3.2.5

CSS的高级特性3.2.1什么是CSS如果希望网页美观、大方，并且升级轻松、维护方便，有什么好办法吗?3.2.1什么是CSS我们在完成了首页的HTML代码后，需要对网页进行美化，这就需要使用CSS。3.2.1什么是CSSCSS（CascadingStyleSheet），称为层叠样式表不需要编译、可直接由浏览器执行的标记性语言，是用于格式化网页的标准格式扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式由W3C工作组组织负责制定和发布CSS3.2.1什么是CSSCSS3.2.1什么是CSS样式就是格式。对于网页来说，像网页显示的文字的大小和颜色、图片位置、段落和列表等，都是网页显示的样式层叠是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器就按照CSS的样式优先级来应用样式。对于由几百个网页组成的大型网站来说，要使所有的网页样式风格统一，可以定义一个CSS样式表文件，这样几百个网页都调用这个样式表文件即可CSS将样式的定义与HTML文件结构分离如果要修改网页的样式，只需修改CSS样式表文件就可以3.2.1什么是CSSCSS的特点CSS的发展历程1994年提出了CSS的想法2005年12月开始CSS3标准的制定1996年12月发布了CSS1.0规范开始CSS3标准的制定可向网页添加字体、颜色等属性1998年5月发布了CSS2.0规范添加了用于定位的属性还扩展了对其他媒体的显示控制3.2.1什么是CSSCSS样式，用于控制文字的颜色、对齐方式等HTML内容CSS嵌入在HTML文档中，虽然与HTML在同一个文档中，但CSS集中写在HTML文档的头部，符合结构与表现相分离的。3.2.1什么是CSS3.2.2引入CSS样式

行内式也称为内联样式，是通过标记的style属性设置元素的样式，其基本语法格式如下：

<标记style="属性：属性值；属性：属性值；……">内容</标记名>通过style属性设置标记的样式。CSS属性，不同于HTML标记的属性。属性和属性值之间用英文状态下的冒号分隔多个属性之间必须用英文状态下的分号隔开最后一个属性值后的分号可以省略行内样式3.2.2引入CSS样式例3-1：使用行内式设置元素样式

example01.html行内样式行内式由于将表现和内容混在一起，不符合Web标准，所以很少使用。一般需要临时修改某个样式规则时使用。3.2.2引入CSS样式

内部样式表是将所有CSS样式代码写在HTML文档的<head>头部标记中，使用<style>标记定义，其语法格式如下：

......<head><styletype="text/css">

选择器1{属性：属性值；属性：属性值；……}/*注释内容*/

选择器2{属性：属性值；属性：属性值；……}......</style></head>......<style>标记一般位于<head>标记中的<title>标记之后指定CSS样式作用的HTML对象，有标记选择器、类选择器和ID选择器等CSS的注释符号，用于说明该行代码的作用，注释内容不会显示在网页上内部样式表3.2.2引入CSS样式例3-2：使用内部样式表设置网页内容的样式

example02.html内部样式表只对其所在的HTML页面有效网站只有一个页面时，使用内嵌式有多个页面且多个页面使用相同风格的样式时，则应使用外部样式表3.2.2引入CSS样式

将所有的CSS样式放入外部样式表文件（扩展名为css），通常使用<link>标记将外部样式表文件链接到HTML文件中。其语法格式如下：......<head><linkhref="外部样式表文件路径"rel="stylesheet"type="text/css"></head>......<link>标记一般位于<head>标记中的<title>标记之后定义被链接的文件是样式表文件定义所链接的外部样式表文件的URL定义所链接文档的类型为text/css，即CSS文档，该属性可以省略外部样式表3.2.2引入CSS样式外部样式表例3-3：将例3-2实现的效果用外部样式表实现

example03.html（1）搭建页面结构3.2.2引入CSS样式外部样式表（2）创建外部样式表文件

3.2.2引入CSS样式外部样式表（3）编写CSS样式表代码3.2.2引入CSS样式外部样式表（4）链接CSS外部样式表

在<title>标记后，添加<link>语句。<linkhref="css/style.css"rel="stylesheet">

3.2.2引入CSS样式外部样式表同一个CSS样式表可以被多个HTML页面链接使用实际网站制作时一般都是用此种方式该种方式实现了结构与表现的分离，使得网页的前期制作和后期维护都十分方便。3.2.3CSS常用选择器标记选择器

标记选择器即标签选择器（TagSelector），也称为元素选择器（ElementSelector），是最基础且常用的选择器之一。它通过HTML标记名来匹配并选中页面中对应的元素，从而对这些元素应用样式。其语法格式如下。标记名称{属性：属性值；属性：属性值；……}所有的HTML标记都可以作为标记选择器，如body、h1~h6、p、ul、li、strong等标记选择器定义的样式能自动应用到网页中的相应元素上3.2.3CSS常用选择器标记选择器举例：使用p选择器定义HTML页面中所有段落的样式。标签名称属性属性值3.2.3CSS常用选择器标记选择器标记选择器最大的优点是能快速统一页面中同类型标记的样式，同时这也是它的缺点，不能设计差异化样式。3.2.3CSS常用选择器类选择器

类选择器（ClassSelector）是通过元素的class属性值来选择页面元素的选择器，类选择器以英文“.”开头，后面紧跟类名。.类名称{属性：属性值；属性：属性值；……}使用类选择器定义的CSS样式，需要设置元素的class属性值为其指定样式类选择器的最大优势是可以为元素定义相同或单独的样式3.2.3CSS常用选择器类选择器例3-4：使用类选择器定义网页元素的样式

example04.html类选择器可以为页面中相同的标记设置不同的样式，也可以为不同的标记设置相同的样式。一个元素可以同时添加多个类，类名之间用空格分隔。类名的第一个字符不能为数字，且类名严格区分大小写，一般用小写英文字符。3.2.3CSS常用选择器

ID选择器用于对某个元素定义单独的样式，ID选择器以“#”开始，其语法格式如下。#ID名称{属性：属性值；属性：属性值；……}ID名称即为HTML元素的ID属性值，ID名称在一个文档中是唯一的，只对应于页面中的某一个具体元素ID选择器定义的样式能自动应用到网页中的某一个元素上ID选择器3.2.3CSS常用选择器ID选择器

例3-5：使用ID选择器定义网页元素的样式

example05.html

3.2.3CSS常用选择器交集选择器交集选择器由两个选择器构成，表示两个选择器的交集，第一个是标记选择器，第二个是类选择器。两个选择器之间不能有空格。，其语法格式如下。标记名称.类名称{属性:属性值;属性:属性值;...}交集选择器是为了简化样式表代码的编写而采用的选择器。初学者如果不能熟练应用此选择器，则完全可以创建一个类选择器来代替交集选择器。3.2.3CSS常用选择器交集选择器

例3-6：使用交集选择器定义网页元素的样式

example06.html3.2.3CSS常用选择器并集选择器

并集选择器由多个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等）都可以作为并集选择器的一部分。选择器1,选择器2{属性：属性值；属性：属性值；……}3.2.3CSS常用选择器例3-7：使用并集选择器定义网页元素的样式

example07.html并集选择器使用并集选择器定义样式与各个选择器分别定义样式作用相同，但并集选择器的样式代码更简捷。3.2.3CSS常用选择器后代选择器

后代选择器也叫包含选择器，用于控制容器对象中的子对象，其他容器对象中的同名子对象不受影响。选择器1选择器2{属性：属性值；属性：属性值；……}书写后代选择器时，将容器对象写在前面，子对象写在后面，中间用空格分隔若容器对象有多层，则分层依次书写3.2.3CSS常用选择器

例3-8：使用后代选择器控制页面元素的样式

example08.html后代选择器3.2.3CSS常用选择器通配符选择器

通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素，其语法格式如下。*{属性：属性值；属性：属性值；……}例如:*{margin:0;padding:0;}注意：实际网页开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，这样反而降低了代码的执行速度。3.2.4CSS常用文本属性属性说明font-family设置字体font-size设置字号font-weight设置字体的粗细font-style设置字体的倾斜@font-face用于定义服务器字体，是CSS3新增属性text-decoration设置文本是否添加下划线、删除线等color设置文本颜色text-align设置文本的水平对齐方式text-indent设置段落的首行缩进line-height设置行高text-shadow设置文字的阴影效果，是CSS3新增属性text-overflow设置元素内溢出文本的处理，是CSS3新增属性表3-1常用文本属性3.2.4CSS常用文本属性font-family设置字体p{font-family:"微软雅黑";}body{font-family:"华文彩云","宋体","黑体";}3.2.4CSS常用文本属性各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：p{font-family:"TimesNewRoman";}尽量使用系统默认字体，以保证在任何用户的浏览器中都能正确显示。font-family3.2.4CSS常用文本属性font-size设置字号，一般以像素（px）为单位表示字号大小。p{font-size:12px;}最适合显示网页正文的字号大小一般为12px左右。对于标题或其他需要强调的地方可以适当设置较大的字号。页脚和辅助信息可以用小一些的字号。3.2.4CSS常用文本属性font-weight定义字体的粗细。p{font-weight:bold;}/*设置段落文本为粗体显示*/h2{font-weight:normal;}/*设置标题文本为正常显示*/3.2.4CSS常用文本属性font-style定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下。normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。p{font-style:italic;}/*设置段落文本为斜体显示*/h2{font-style:oblique;}/*设置标题文本为倾斜显示*/3.2.4CSS常用文本属性@font-faceCSS3新增属性，用于定义服务器字体。通过该属性，开发者可以在网页中使用任何喜欢的字体，而不管用户计算机是否安装这些字体。定义服务器字体的基本语法格式如下。@font-face{font-family:字体名称;src:字体文件路径;}font-family用于指定服务器字体的名称，该名称由自己定义src属性用于指定该字体文件的路径。3.2.4CSS常用文本属性@font-face

例3-9：使用@font-face属性定义服务器字体。example09.html3.2.4CSS常用文本属性text-decoration设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下。none：没有装饰（默认值）underline：下划线overline：上划线line-through：删除线a{text-decoration:none;}/*设置超链接文字不显示下画线*/a:hover{text-decoration:underline;}/*设置鼠标悬停在超链接文字上时显示下画线*/3.2.4CSS常用文本属性color定义文本的颜色，常用的取值方式有如下4种：预定义的颜色值表示：例如，black、red、green、blue等十六进制数表示：例如，#FF0000，#29D794等rgb函数表示：例如，rgb(255,0,0)或rgb(100%,0%,0%)表示红色rgba函数表示：例如，rgba(255,0,0,0.5)表示采用半透明的红色3.2.4CSS常用文本属性text-align用于设置文本内容的水平对齐。其可用属性值如下：left：

左对齐（默认值）。right：

右对齐。center：居中对齐。justify：两端对齐。h1{text-align:center;}3.2.4CSS常用文本属性text-indent设置首行文本的缩进，其属性值可为不同单位的数值。一般建议使用em（1em等于一个中文字符）作为设置单位。p{text-indent:2em;}/*设置段落缩进2个中文字符*/3.2.4CSS常用文本属性line-height段落中两行文字之间的垂直距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距，属性值一般以px像素为单位。p{line-height:25px;}/*设置行高为25px*/3.2.4CSS常用文本属性text-shadow设置文本的阴影效果。常用语法格式如下：选择器{text-shadow:水平阴影距离，垂直阴影距离，模糊半径，阴影颜色;}阴影距离可以是正值，也可以是负值，正负值表示阴影的方向不同。3.2.4CSS常用文本属性text-shadow

例3-10：给文字设置阴影效果。example10.html3.2.4CSS常用文本属性text-overflow设置元素内文本溢出时如何处理。基本语法格式如下：选择器{text-overflow:clip|ellipsis;}clip：修剪元素内溢出的文本，使溢出的文本不显示，也不显示省略标记“…”。Ellipsis：在元素文本末尾用省略标记“…”标示被修剪的文本。3.2.4CSS常用文本属性

例3-11：使用属性text-overflow设置溢出的文本。example11.htmltext-overflow3.2.4CSS常用文本属性设置省略标记表示溢出文本的步骤如下：（1）为包含文本的元素定义宽度。（2）设置元素的white-space属性值为nowrap，强制文本不能换行。（3）设置元素的overflow属性值为hidden，使溢出文本隐藏。（4）设置text-overflow属性值为ellipsis，显示省略标记。text-overflow3.2.5CSS的高级特性CSS是层叠样式表的简称，层叠性和继承性是其基本特征。对于Web开发工程师来说，应该深刻理解和灵活运用这两种特性。另外，当对元素定义了多个样式规则时，其样式应用的优先级也遵循一定的规则，下面分别进行介绍。3.2.5CSS的高级特性所谓层叠性是指多种CSS样式的叠加。

例如，当使用内嵌式CSS样式定义<p>标记字号大小为12像素，外部样式表定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。57

层叠性3.2.5CSS的高级特性层叠性例3-12：设置层叠样式

example12.html。第一行文本同时应用了标记p的样式、类选择器.special定义的样式和id选择器#one定义的样式，显示为微软雅黑、24px和红色，即三个选择器定义的样式进行了叠加。3.2.5CSS的高级特性继承性是指书

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

温馨提示

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

最新文档

评论

0/150

提交评论