任务3 美化简单学院网站_第1页
任务3 美化简单学院网站_第2页
任务3 美化简单学院网站_第3页
任务3 美化简单学院网站_第4页
任务3 美化简单学院网站_第5页
已阅读5页，还剩94页未读， 继续免费阅读

下载本文档

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

文档简介

任务3美化简单学院网站Web前端开发案例教程HTML5+CSS3微课版在任务2中使用HTML标记和相应的属性搭建了简单学院网站，可以看出，只使用HTML标记创建的网站并不美观，本任务对简单学院网站进行美化，设置文字的颜色和对齐方式等。通过本任务的实现，掌握CSS3的基本语法、使用方式、选择器以及常用的文本样式属性等。任务3美化简单学院网站任务3任务效果图3-1网站首页图3-2

学院简介页面对任务2中搭建的简单学院网站进行美化，页面浏览效果如图3-1~3-4所示任务效果图3-3学院新闻页面 图3-4新闻详情页面知识点

CSS基本概念01CSS使用方式02常用CSS选择器03CSS常用文本属性04CSS高级特性05任务3美化简单学院网站任务33.2.1什么是CSS在任务2中搭建了简单学院网站如果希望网页美观、大方，并且升级轻松、维护方便有什么好办法吗?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="属性：属性值；属性：属性值；……">内容</标记名>标记的属性，实际上任何HTML标记都拥有style属性，通过该属性可以设置标记的样式。CSS属性，不同于HTML标记的属性。属性和属性值书写时不区分大小写，按照书写习惯一般采用小写的形式属性和属性值之间用英文状态下的冒号分隔多个属性之间必须用英文状态下的分号隔开最后一个属性值后的分号可以省略行内样式3.2.2引入CSS样式例3-1使用行内式设置元素样式在HBuilderX中新建项目chapter03，选择模板类型：“基本HTML项目”，该项目下包含css、img和js目录，分别用于存放样式表文件、图像文件和脚本文件。在项目内新建html文件example01.html行内样式3.2.2引入CSS样式行内式由于将表现和内容混在一起，不符合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使用内部样式表设置网页内容的样式（1）在项目chapter03中新建网页文件example02.html。内部样式表3.2.2引入CSS样式内部样式表（2）使用<style>标记创建内部样式3.2.2引入CSS样式内部样式表只对其所在的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实现的效果用外部样式表实现（1）在项目chapter03中新建网页文件example03.html3.2.2引入CSS样式外部样式表（2）创建外部样式表文件

在项目chapter03中的css目录上右击，选择“新建”|“css文件”命令，在“新建CSS文件”对话框中输入文件名称：“style.css”，单击“创建”按钮。3.2.2引入CSS样式外部样式表（3）编写CSS样式表代码3.2.2引入CSS样式外部样式表（4）链接CSS外部样式表

在例3-3的example03.html中<title>标记后，添加<link>语句。<linkhref="css/style.css"rel="stylesheet"type="text/css">

3.2.2引入CSS样式外部样式表同一个CSS样式表可以被多个HTML页面链接使用实际网站制作时一般都是用此种方式该种方式实现了结构与表现的分离，使得网页的前期制作和后期维护都十分方便。3.2.3CSS常用选择器标记选择器标记选择器是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式，其语法格式如下标记名称{属性：属性值；属性：属性值；……}所有的HTML标记都可以作为标记选择器，如body、h1~h6、p、ul、li、strong等3.2.3CSS常用选择器标记选择器例，使用p选择器定义HTML页面中所有段落的样式。标签名称属性属性值3.2.3CSS常用选择器标记选择器标记选择器最大的优点是能快速统一页面中同类型标记的样式，同时这也是它的缺点，不能设计差异化样式。3.2.3CSS常用选择器类选择器类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下类名称{属性：属性值；属性：属性值；……}说明使用类选择器定义的CSS样式，需要设置元素的class属性值为其指定样式类选择器的最大优势是可以为元素定义相同或单独的样式3.2.3CSS常用选择器类选择器例3-4使用类选择器定义网页元素的样式（1）在项目chapter03中网页文件example04.html3.2.3CSS常用选择器类选择器（2）定义类选择器.text3.2.3CSS常用选择器类选择器多个标记可以使用同一个类名，使不同的标记指定相同的样式类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写英文字母表示3.2.3CSS常用选择器

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

例3-5使用ID选择器定义网页元素的样式（1）在项目chapter03中新建网页文件example05.html3.2.3CSS常用选择器ID选择器（2）定义ID选择器#p1和#p23.2.3CSS常用选择器ID选择器ID选择器只能用在唯一元素上3.2.3CSS常用选择器交集选择器交集选择器表示两个选择器的交集，其语法格式如下选择器1选择器2{属性：属性值；属性：属性值；……}说明选择器1是标记选择器选择器2是类选择器两个选择器之间不能有空格3.2.3CSS常用选择器交集选择器

例3-6使用交集选择器定义网页元素的样式（1）在项目chapter03中新建网页文件example06.html3.2.3CSS常用选择器交集选择器（2）定义标记选择器p和类选择器.special3.2.3CSS常用选择器交集选择器（3）给元素设置类选择器.special3.2.3CSS常用选择器交集选择器（4）添加交集选择器3.2.3CSS常用选择器交集选择器交集选择器是为了简化样式表代码的编写而采用的选择器初学者如果不能熟练应用此选择器，完全可以创建一个类选择器来代替交集选择器3.2.3CSS常用选择器并集选择器并集选择器表示两个选择器的并集，其语法格式如下选择器1,选择器2{属性：属性值；属性：属性值；……}说明选择器1和2是任何形式的选择器（标记选择器、类选择器、ID选择器等）两个选择器之间是逗号3.2.3CSS常用选择器并集选择器例3-7使用并集选择器定义网页元素的样式。（1）例3-7在项目chapter03中新建网页文件example07.html，3.2.3CSS常用选择器并集选择器（2）定义并集选择器3.2.3CSS常用选择器并集选择器使用并集选择器定义样式与各个选择器分别定义样式作用相同，但并集选择器的样式代码更简捷。3.2.3CSS常用选择器后代选择器

后代选择器也叫包含选择器，用于控制容器对象中的子对象，使其他容器对象中的同名子对象不受影响，其语法格式如下选择器1选择器2{属性：属性值；属性：属性值；……}说明选择器1是容器对象选择器2是子对象两个选择器之间用空格分隔3.2.3CSS常用选择器后代选择器

例3-8使用后代选择器控制页面元素的样式。（1）在项目chapter03中新建网页文件example08.html3.2.3CSS常用选择器后代选择器（2）定义后代选择器3.2.3CSS常用选择器后代选择器后代选择器使其他容器对象中的同名子对象不受影响3.2.3CSS常用选择器通配符选择器

通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素，其语法格式如下。*{属性：属性值；属性：属性值；……}3.2.3CSS常用选择器通配符选择器例如，设置页面中所有元素的外边距和内边距属性代码如下*{margin:0;padding:0;}实际网页开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，这样反而降低了代码的执行速度。3.2.4CSS常用文本属性在任务2中介绍了常用的HTML文本标记。为了更好地控制文本标记显示的样式，CSS提供了相应的文本设置属性。CSS常用文本属性见表3-1所示。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常用文本属性font-family（1）各种字体之间必须使用英文状态下的逗号隔开。（2）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。（3）如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：p{font-family:"TimesNewRoman";}（4）尽量使用系统默认字体，以保证在任何用户的浏览器中都能正确显示。3.2.4CSS常用文本属性font-size用于设置字号，一般以像素（px）为单位表示字号大小。例如：p{font-size:12px;}最适合显示网页正文的字号大小一般为12px左右。对于标题或其他需要强调的地方可以适当设置较大的字号。页脚和辅助信息可以用小一些的字号。3.2.4CSS常用文本属性font-weight用于定义字体的粗细。常用的属性值为normal和bold，用来表示正常或加粗显示的字体。 例如：p{font-weight:bold;}/*设置段落文本为粗体显示*/h2{font-weight:normal;}/*设置标题文本为正常显示*/3.2.4CSS常用文本属性font-style定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下。（1）normal：默认值，浏览器会显示标准的字体样式。（2）italic：浏览器会显示斜体的字体样式。（3）oblique：浏览器会显示倾斜的字体样式。例如：p{font-style:italic;}/*设置段落文本为斜体显示*/h2{font-style:oblique;}/*设置标题文本为倾斜显示*/3.2.4CSS常用文本属性text-decorationtext-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-through：删除线。a{text-decoration:none;}/*设置超链接文字不显示下画线*/a:hover{text-decoration:underline;}/*设置鼠标悬停在超链接文字上时显示下画线*/3.2.4CSS常用文本属性colorcolor属性用于定义文本的颜色，常用的取值方式有如下4种：（1）预定义的颜色值表示：用相应的颜色值表示。例如，black、red、green、blue等（2）十六进制数表示：采用#RRGGBB的形式，RR表示红色的分量值，GG表示绿色的分量值，BB表示蓝色的分量值，每组分量值的取值范围为：00~FF。例如，#FF0000，#FF6600，#29D794等。3.2.4CSS常用文本属性color（3）rgb函数表示：例如，红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。（4）rgba函数表示：rgba函数是在rgb函数的基础上增加了控制alpha透明度的参数。透明度的取值介于0~1之间。例如，h3{color:rgb(255,0,0,0.5);}表示采用半透明的红色。3.2.4CSS常用文本属性text-align用于设置文本内容的水平对齐。其可用属性值如下：left：左对齐（默认值）。right：右对齐。center：居中对齐。justify：两端对齐。h1{text-align:center;}3.2.4CSS常用文本属性text-indenttext-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-9给文字设置阴影效果。（1）在项目chapter03中新建网页文件example9.html3.2.4CSS常用文本属性text-shadow（2）设置阴影效果样式3.2.5CSS的高级特性CSS是层叠样式表的简称，层叠性和继承性是其基本特征。对于Web开发工程师来说，应该深刻理解和灵活运用这两种特性。另外，当对元素定义了多个样式规则时，其样式应用的优先级也遵循一定的规则，下面分别进行介绍。3.2.5CSS的高级特性所谓层叠性是指多种CSS样式的叠加。

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

例3-10设置层叠样式。（1）在项目chapter03中新建网页文件example10.html3.2.5CSS的高级特性751.层叠性（2）设置样式3.2.5CSS的高级特性76层叠性（3）设置样式第一行文本同时应用了标记p的样式、类选择器.special定义的样式和id选择器#one定义的样式，显示为微软雅黑、24px和红色，即三个选择器定义的样式进行了叠加。3.2.5CSS的高级特性继承性是指书写CSS样式表时，子元素会继承父元素的某些样式，如文本颜色和字号等。例如，定义页面主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他元素都是body元素的子元素。恰当地使用继承可以简化代码，降低CSS样式的复杂性。77继承性3.2.5CSS的高级特性并不是所有的CSS属性都可以继承，譬如边框属性、外边距属性、内边距属性、背景属性、定位属性、布局属性、元素宽高属性等。78继承性当为body元素设置字号属性时，标题文本不会采用这个样式，因为标题标记h1～h6有默认的字号大小。3.2.5CSS的高级特性定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级问题。根据规定，样式表的优先级别从高到低为：行内样式>嵌入式>外部样式表也就是最接近目标元素的样式优先级越高，即就近原则。79

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

温馨提示

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

最新文档

评论

0/150

提交评论