下载文档原格式
⽹页设计⼊门--如何使⽤css设置字体和⽂本样式⼀、定义字体类型font-family:Arial,Helvetica,serif,sans-serif,monospace;ps.字体与字体之间⽤逗号隔开，句尾⽤分号例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-family:serif;}.p2{font-family:sans-serif;}.p3{font-family:monospace;}</style></head><body>welcome to my first text html!<p class="p1">我是serif字体!</p><p class="p2">我是sans-serif字体!</p><p class="p3">我是monospace字体!</p></body></html>显⽰结果如下：⼆、定义字体⼤⼩font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|lengthps:1、xx-small（最⼩）、x-small（较⼩）、small（⼩）、medium（正常）、large（⼤）、x-large（较⼤）、xx-large（最⼤）、larger（增⼤）、smaller（减⼩）、length（可以是百分数、或者浮点数和单位标识符组成的长度值，但不能为负值。
其百分⽐的取值是基于⽗对象中字体的尺⼨来计算的，与em单位计算⽅法相同）;2、还可以⽤px（像素）、in（英⼨）、em（基于⽗辈字体⼤⼩为参考设置字体⼤⼩）、cm（厘⽶）、pt（点）、pc（⽪卡）来定义字体⼤⼩;3、浏览器默认字体⼤⼩为16px，所以1.2em=19.2px，0.875em=14px，0.625em=10px；4、对于⽹页宽度固定或者栏⽬宽度固定的布局，使⽤像素是正确的选择；对于⽹页宽度不固定或者栏⽬宽度也不固定的页⾯，使⽤百分⽐或em是正确的选择，这样可以⽅便客户端浏览器调整字体⼤⼩；例如：<html><head><title>my first text html</title><style type="text/css">div{font-size:20px;}.p1{font-size:0.6in;}.p2{font-size:0.8em;}.p3{font-size:2cm;}.p4{font-size:16pt;}.p5{font-size:2pc;}</style></head><body>我的字号为16px!<div>我的字号为20px!<p class="p1">我的字号为0.6in!</p><p class="p2">我的字号为0.8em!</p><p class="p3">我的字号为2cm!</p><p class="p4">我的字号为16pt!</p><p class="p5">我的字号为2pc!</p></div></body></html>显⽰结果如下：三、定义字体颜⾊如下为定义字体颜⾊的四种⽅法：color:red; /*使⽤颜⾊名*/color:#693333; /*使⽤⼗六进制*/color:rgb(120,120,120); /*使⽤rgb*/color:rgb(0%,100%,50%);四、定义字体粗细font-weight:normal|bold|bolder|lighter|100|200|300|400（相当于normal）|500|600|700（相当于bold）|800|900 PS:bolder和lighter是相对于normal字体粗细进⾏加粗和减细操作五、定义斜体字体font-style:normal|italic（斜体）|oblique（倾斜的字体）PS:italic和oblique这两个取值只能在英⽂等西⽅⽂字中有效例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-style:normal;}.p2{font-style:italic;}.p3{font-style:oblique;}</style></head><body><p class="p1">我的字体为normal!</p><p class="p2">我的字体为italic!</p><p class="p3">我的字体为oblique!</p></body></html>显⽰结果如下：六、定义下划线、删除线和顶划线text-decoration:none|underline|overline|line-through|blink（闪烁效果）PS:不同的效果可以同时⽤，只需效果之间加空格即可例如：<html><head><title>my first text html</title><style type="text/css">.p1{text-decoration:underline;}.p2{text-decoration:underline overline;}.p3{text-decoration:underline overline blink;}</style></head><body><p class="p1">我的字体使⽤了underline效果!</p><p class="p2">我的字体使⽤了underline和overline效果!</p><p class="p3">我的字体使⽤了underline、overline和blink效果!</p></body></html>显⽰效果如下：七、定义字体⼤⼩写定义字体⼤⼩写有两种⽅法：font-variant:normal|small-caps（⼩型的⼤写字母字体）;text-transform:capitalize（⾸字母⼤写）|uppercase（⼤写）|lowercase（⼩写）;例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-variant:normal;}.p2{font-variant:small-caps;}.p3{text-transform:capitalize;}.p4{text-transform:uppercase;}.p5{text-transform:lowercase;}</style></head><body><p class="p1">normal!</p><p class="p2">small-caps!</p><p class="p3">capitalize!</p><p class="p4">uppercase!</p><p class="p5">LOWERCASE!</p></body></html>显⽰效果如下：⼋、定义⽂本对齐text-align:left|right|center|justify（两端对齐）九、定义垂直对齐vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length PS:auto：根据layout-flow属性的值对齐对象内容；baseline：将⽀持valign特性的对象内容与基线对齐；sub：垂直对齐⽂本的下标；super：垂直对齐⽂本的上标；top：将⽀持vlign特性的对象的内容与对象顶端对齐；text-top：将⽀持vlign特性的对象的⽂本与对象顶端对齐；middle：将⽀持vlign特性的对象的内容与对象中部对齐；bottom：将⽀持vlign特性的对象的内容与对象底端对齐；text-bottom：将⽀持vlign特性的对象的⽂本与对象底端对齐；length：由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%例如：<html><head><title>my first text html</title><style type="text/css">.span1{vertical-align:auto;}.span2{vertical-align:baseline;}.span3{vertical-align:sub;}.span4{vertical-align:super;}.span5{vertical-align:top;}.span6{vertical-align:text-top;}.span7{vertical-align:middle;}.span8{vertical-align:bottom;}.span9{vertical-align:text-bottom;}.span10{vertical-align:2;}</style></head><body><p><span class="span1">根据layout-flow属性的值对齐对象内容</span><span class="span1">auto</span></br><span class="span1">将⽀持valign特性的对象内容与基线对齐</span><span class="span2">baseline</span></br><span class="span1">垂直对齐⽂本的下标</span><span class="span3">sub</span></br><span class="span1">垂直对齐⽂本的上标</span><span class="span4">super</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象顶端对齐</span><span class="span5">top</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象顶端对齐</span><span class="span6">text-top</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象中部对齐</span><span class="span7">middle</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象底端对齐</span><span class="span8">bottom</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象底端对齐</span><span class="span9">text-bottom</span></br><span class="span1">由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%</span><span class="span10">length=2</span></br></p></body></html>显⽰效果如下：⼗、定义字间距letter-spacing:1em;（字母与字母或者汉字与汉字之间的间距）word-spacing:1em;（定义单词与单词之间的间距）⼗⼀、定义⾏间距line-height:normal（默认值，⼀般为1.2em）|length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;例如：p{font-size:12pt;line-height:12pt;}⼗⼆、定义缩进text-indent:length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;PS:建议设置缩进单位时，以em为设置单位，它表⽰⼀个字距，这样⽐较精确确定⾸⾏缩进效果。
网页设计与制作案例教程（HTML5CSS3）素材本文旨在介绍《网页设计与制作案例教程（HTML5 CSS3）素材》的主题和背景。
本教程的主题是网页设计与制作案例教程，重点涵盖HTML5和CSS3素材的使用。
随着互联网的迅速发展，网页设计和制作变得越来越重要。
作为一种应用广泛的技术，HTML5和CSS3提供了丰富的功能和特性，可以使网页呈现出更加精美和交互性强的效果。
因此，研究和掌握HTML5和CSS3的使用对于提高网页设计和制作的质量和效果至关重要。
本教程将为读者提供一系列实际案例，展示如何利用HTML5和CSS3素材设计和制作各种类型的网页。
通过研究这些案例，读者将能够掌握重要的网页设计原理和技巧，提升自己的设计能力，并能够应用到实际项目中。
教程内容涵盖了HTML5和CSS3的基础知识、常用元素和样式以及高级特性的运用。
每个案例都包含了详细的步骤和说明，帮助读者理解和掌握相关的技术和方法。
希望通过本教程，读者可以研究到实用的网页设计和制作技巧，并能够应用到自己的项目中，提升自己的能力和竞争力。
本部分将介绍HTML5的基本概念和语法，包括标签、属性和元素的使用。
HTML5是一种用于构建网页的标记语言，它在HTML4的基础上进行了增强和改进。
HTML标签是HTML文档的基本结构元素，它们用于定义网页的内容和结构。
在HTML5中，标签可以包含属性，用于提供更多的信息和控制网页的呈现方式。
属性可以对标签进行设置，如字体、颜色、大小等。
除了标签和属性，HTML5还引入了一些新的元素，用于创建更丰富和动态的网页内容。
例如，``元素可以用于嵌入视频文件，``元素可以用于绘制图形等。
掌握HTML5的基本概念和语法是网页设计与制作的基础，它将为你提供开发高质量和现代化网页的能力。
待续。
本部分将介绍CSS3的基本概念和语法，包括选择器、属性和样式表的使用。
CSS3（Cascading Style Sheets 3）是一种用于描述网页样式的标记语言，它是CSS的最新版本。
随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。
在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。
本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。
本章学习目标◎ 了解互联网、因特网、万维网的关系和区别。
◎ 了解网站、网页和HTML的基本概念。
◎ 了解静态网页和动态网页的区别和联系。
◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。
◎ 能够安装并使用浏览器查看网页。
◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。
◎ 了解网页开发所使用的基本技术和工具。
HTML5+CSS3网页设计与制作案例教程在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的认识。
1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)互联网指由若干计算机网络相互连接而成的网络。
进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。
互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。
因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。
因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。
但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。
Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。
万维网是指环球信息网，英文全称为World Wide Web，简称WWW。
