《（中职）Web前端设计基础 项目七-1电子课件.pptx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目七-1电子课件.pptx（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF正版可修改PPT（中职）Web前端设计基础 项目七-1电子课件CSS 3图文混排项目七授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点CSS 3美化段落；CSS 3美化图片；CSS 3图文混排。CSS 3美化文本；二 知识准备CSS 3美化文本；CSS 3美化段落；CSS 3图文混排。CSS 3美化图片；CSS 3美化文本1.设置文本字体在CSS 3样式中，使用font-family属性定义文本的字体类型，格式如下：font-family：字体1,字体2,字体3;font-family可定义
2、多种字体，多个字体将按优先顺序排列，以逗号隔开（逗号为英文逗号）。如果字体名称包含空格，如Times New Roman，则应该将名称用引号括起来。CSS 3美化文本2.设置文本大小在CSS 3样式中，使用font-size属性定义文本的大小，格式如下：font-size：像素值/关键字;font-size的属性值可以使用两种方式，一种是使用像素为单位的数值；二是使用关键字，如表所示。关键字关键字说说 明明xx-small最小。绝对字体尺寸，根据对象字体进行调整x-small较小。绝对字体尺寸，根据对象字体进行调整small小。绝对字体尺寸，根据对象字体进行调整medium默认值，正常。绝对字
3、体尺寸，根据对象字体进行调整large大。绝对字体尺寸，根据对象字体进行调整x-large较大。绝对字体尺寸，根据对象字体进行调整xx-large最大。绝对字体尺寸，根据对象字体进行调整larger相对字体尺寸。相对于父对象中字体尺寸进行相对增大，使用成比例的em单位计算smaller相对字体尺寸。相对于父对象中字体尺寸进行相对减小，使用成比例的em单位计算length百分数或由浮点数和单位标识符组成的长度值，不可为负值。百分比取值是基于父对象中的字体尺寸CSS 3美化文本3.设置文本粗细在CSS 3样式中，使用font-weight属性定义文本的粗细程度，格式如下：font-weight:粗
4、细值/关键字;粗细值可以使用两种方式，一是使用100900 的数值（100、200、900），值越大就表示越粗，值越小就表示越细，400相当于正常字体normal，是浏览器默认的字体粗细，700相当于bold；二是使用关键字，关键字如表所示。如果没有设置该属性，则使用默认值normal。关键字关键字说说 明明normal默认值，标准字体lighter定义更细的字体，相对值bold定义粗体字体bolder定义更粗的字体，相对值CSS 3美化文本4.设置文本颜色在CSS 3样式中，使用color属性定义文本的颜色，格式如下：color:颜色值;颜色值可以使用颜色的英文名称、一个十六进制的RGB值等
5、多种方式来表示，如表所示。颜色值颜色值说说 明明color_name颜色值为颜色名称的英文（例red，表示红色）hex_number颜色值为十六进制值（例#ff0000或#f00，表示红色）rgb_number颜色值为RGB代码（例rgb(255,0,0)，表示红色）rgba_number颜色值为RGBA代码（例rgba(255,0,0,0.5)，表示红色）inherit从父元素继承颜色hsl_number颜色值为HSL代码（例hsl(0,75%,50%)）hsla_number颜色值为HSLA代码（例hsla(120,50%,50%,1)）CSS 3美化文本5.设置文本样式在CSS 3样式中
6、，使用font-style属性定义文本的样式，格式如下：font-style:属性值;属性值如表所示。属性值属性值说说 明明normal默认值，标准的字体样式italic斜体的字体样式oblique倾斜的字体样式inherit从父元素继承的字体样式CSS 3美化文本6.设置文本阴影效果在CSS 3样式中，文本阴影效果属于文本的高级样式，如果使用上面的CSS样式进行定义，不能得到正确显示效果，这就需要使用特定的CSS标签来完成。使用CSS 3样式中的text-shadow属性定义文字的阴影效果，格式如下：text-shadow:阴影水平偏移值（可取正负值）阴影垂直偏移值（可取正负值）阴影模糊值
7、阴影颜色;text-shadow属性有四个，后两个为可选。CSS 3美化文本6.设置文本阴影效果【例7-1】CSS3设置文本阴影效果实例，代码如下所示（示例文件7-1.html）。设置文本阴影*margin:0;padding:0;h1font-family:Arial Black;font-size:60px;text-shadow:2px 3px 6px#333;h2font-family:Arial Black;font-size:60px;/*设置多重阴影效果使用逗号隔开*/text-shadow:2px 2px 0px#333,2px 5px 10px green,2px-2px 5
8、px red;Text shadowText shadow在chrome浏览器中预览CSS 3美化文本7.设置文本溢出效果text-overflow属性定义当文本溢出时是否显示省略标记。要实现溢出文本时产生省略号的效果，还必须定义强制文本在一行显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。text-overflow属性格式如下：text-overflow:clip|ellipsis|string;text-overflow属性值如表所示。属性值属性值说说 明明clip简单地修剪文本，不显示省略标记ellipsis当对象内文本溢出时显示省略标记s
9、tring使用给定的字符串来代表被修剪的文本CSS 3美化文本8.设置文本控制换行当在一个指定区域显示的一行文本过长，一行内显示不完时，就需要进行换行设置。在CSS 3中使用word-wrap属性来控制文本换行。word-wrap属性格式如下：word-wrap:normal|break-word;word-wrap属性值如表所示。属性值属性值说说 明明normal只在允许的断字点换行（浏览器保持默认处理）break-word内容将在边界内换行CSS 3美化文本8.设置文本控制换行【例7-2】CSS3美化文本实例，代码如下所示（示例文件7-2.html）。CSS3美化文本bodyfont-fa
10、mily:微软雅黑;font-size:14px;pcolor:rgb(200,60,0);中国梦始信泥土有芬芳 (font-weight:bold;)转眼捏成这般模样 (font-weight:bolder;)你是女娲托生的精灵 (font-weight:lighter;)你是夸父追日的梦想 (font-weight:normal;)让我轻轻走过你的跟前 (font-weight:100;)沐浴着你童真的目光 (font-weight:400;)让我牵手与你同行 (font-weight:900;)小脚丫奔跑在希望的田野上
11、 (font-size:80%;)啊，中国 (font-style:inherit;)我的梦 (font-style:italic;)梦正香 (font-style:oblique;)在chrome浏览器中预览CSS 3美化文本9.设置在线字体在CSS 3之前，网页设计师在使用字体时，必须保证使用的字体在用户的计算机中也已安装好，才能正确还原设计者的字体设计意图。现在通过CSS3，网页设计师可以使用任意字体，可将该字体文件存放到 web 服务器上，字体会在需要时被自动下载到用户的计算机上。格式如下：font-face font-family:;src:,
12、*;font-weight:;font-style:;CSS 3美化文本9.设置在线字体YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:YourWebFontName;”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；weight和styl
13、e:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。CSS 3美化文本9.设置在线字体【例7-3】CSS3在线字体实例，代码如下所示（示例文件7-3.html）。CSS 3在线字体 font-facefont-family:TestFont;src:url(fonts/Sansation_Light.ttf);divfont-family:TestFont;font-size:60px;color:#f00;CSS 3 Web Font在chrome浏览器中预览CSS 3美化文本10.设置旋转特效transform属性能够设置元素的旋转,向元素应用2
14、D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。其属性值有很多，包括rotate()/skew()/scale()/translate(,)，分别还有x、y之分，比如：rotatex()和 rotatey()，以此类推。在此简单介绍一下ratate值。格式如下：transform:rotate(angle单位为deg);定义2D旋转在参数中规定角度,angle表示角度。作业一、选择题1.下列_是CSS设置字体颜色的属性。A color B font-style C font-color D background-color2.下列_是设置文本阴影效果的属性。A font-family B text-shadow C text-overflow D transform3.下列_是设置文本粗细的属性。A font-family B font-size C font-color D font-weight二、上机实训上机完成例7-1和例7-3的实例操作。End