Web 前端开发案例与实战单元4 CSS样式属性.pptxVIP

单元4CSS样式属性知识入门循序渐进4.1文本样式4.2CSS背景4.3列表4.4超链接4.5CSS3高级特性知识拓展

知识入门1.字体颜色2.视口3.相对路径与绝对路径3.超文本4.超链接

循序渐进4.1文本样式4.2CSS背景4.3列表4.4超链接4.5CSS3高级特性

4.1文本样式4.1.1文字设计4.1.2文本设计

4.1.1文字设计1.文字的字体font-family:字体1,……,字体n;2.字体颜色color:颜色值3.字体大小font-size:尺寸值px、em、vm4.字体粗细font-weight:值;5.字体样式font-style:值;

4.1.2文本设计1.行距line-height:值;2.文本间距（1）设置单词之间的距离。word-spacing：属性值（2）设置字符或汉字之间的距离。letter-spacing：属性值3.字母大小写转换text-transform：属性值4.文本装饰text-decoration：属性值：5.文本阴影text-shadow:h-shadowv-shadowblurcolor,h-shadowv-shadowblurcolor,……h-shadowv-shadowblurcolor;6.处理元素中的空白white-space:属性值;7.字体的复合属性font:font-stylefont-variantfont-weightfont-sizeline-heightfont-family

【任务4-1】设计网站文字Logo【任务描述】（1）使用文本属性对Logo进行排版。（2）使用阴影属性添加发光和描边效果。

4.2CSS背景4.2.1背景颜色4.2.2背景图像

4.2.1背景颜色background-color:属性值;

4.2.2背景图像1.插入背景background-image:url;2.控制背景图片插入方式background-repeat:属性值;3.控制背景图位置background-position:位置属性;4.控制图片背景是否滚动background-attathment:属性值5.综合使用背景属性background:background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment

【任务4-2】添加右侧悬浮背景图【任务描述】（1）为body元素添加背景色并添加固定位置背景图。（2）为p元素添加背景图进行水平平铺。（3）为p元素添加背景图进行垂直平铺

4.3列表4.3.1列表分类4.3.2控制列表项目标记4.3.3图像作为列表项标记4.3.4定位列表项标记位置

4.3.1列表分类（1）无序列表ulli/li……li/li/ul（2）有序列表olli/li……li/li/ol

4.3.2控制列表项目标记list-style-type:属性值属性值功能none无标记。disc默认。标记是实心圆circle标记是空心圆square标记是实心方块decimal标记是数字decimal-leading-zero0开头的数字标记包括：01、02、03等lower-roman小写罗马数字包括i、ii、iii、iv、v等upper-roman大写罗马数字包括I、II、III、IV、V等lower-alpha小写英文字母包括a、b、c、d、e等upper-alpha大写英文字母包括A、B、C、D、E等lower-greek小写希腊字母包括alpha、beta、gamma等lower-latin小写拉丁字母包括a、b、c、d、e等upper-latin大写拉丁字母包括A、B、C、D、E等hebrew传统的希伯来编号方式armenian传统的亚美尼亚编号方式georgian传统的乔治亚编号方式包括an、ban、gan等cjk-ideographic简单的表意数字hiragana标记是a、i、u、e、o、ka、ki等katakana标记是A、I、U、E、O、KA、KI等hiragana-iroha标记是i、ro、ha、ni、ho、he、to等katakana-iroha标记是I、RO、HA、NI、HO、HE、TO等

4.3.3图像作为列表项标记list-style-image:属性值;

4.3.4定位列表项标记位置list-style-position:属性值;

【任务4-3】制作音乐排行榜【任务描述】（1）添加3个有序列表。（2）设置列表的标记项。（3）使用图片设置列表标记项。

4