Css练习课之一文档.docx

Css练习课1 Css字体属性设置练习一、实验所要求实现的页面描述如下：1 页面标题为“css基本概念——font属性”，其格式要求：文字颜色为红色，黑体，大小35像素，加粗，居中显示。2 第一段文本内容（红色部分）为：Css（cascading style sheet）即层叠样式表，它有很多优点，比如让页面内容与样式分离，可以大大减少代码的内容的冗余，为网站的维护和重构带来意想不到的便利。对上述文本的格式要求：宋体，25像素，斜体，蓝色，并且英文字内容要求全部大写且比周围的中文小一号。首行缩进1in3 第二段落内容（红色部分）为： Css的常用字体属性有7种。（1）color属性，设置文字的颜色；（2）font-family属性设置字体，例如文本为宋体，即“font-family:宋体;”（3）font-size属性设置字体大小，即字号；（4）font-sytle属性设置字体风格，主要有：normal标准体、italic（斜体）oblique（歪斜体）；（5）font-variant设置字体的变体，有：normal和small-caps；（6）font-weight设置字体的粗细；（7）font属性，综合设置各种字体属性，例如：font: italic bold small-caps 20px/30px 隶书,黑体,宋体。对于第二段落文字格式要求：字体为楷体，18pt，颜色为#00ff00，行高20pt，文中序号（1）（2）……（7），加粗并且比周围的文字字号大150%，颜色为黑色，歪斜体。首行缩进1in请用css内嵌式样式表来实现上述html页面的格式要求。效果图如下图：二、请根据上述描述，编写一个html程序和相关的css，实现上图的页面答案：htmlhead titlecss字体属性练习1/title style type=text/css .h{color:red; font-family:黑体; font-size:35px; font-weight:bold; font-variant:small-caps;} .p1{ font: italic small-caps 25px 宋体; color:blue;} p{color:#00ff00;font-size:18pt; font-family:隶书; line-height:20pt; text-indent:1in;} b{font-size:150%; color:black; font-style:oblique;} /style/headbodycenterh2 class=hcss基本概念--font属性/h2/centerp class=p1css（cascading style sheet）即层叠样式表，它有很多优点，比如让页面内容与样式分离，可以大大减少代码的内容的冗余，为网站的维护和重构带来意想不到的便利。/ppCss的常用字体属性有7种。 b（1）/bcolor属性，设置文字的颜色； b（2）/bfont-family属性设置字体，例如文本为宋体，即“font-family:宋体;” b（3）/bfont-size属性设置字体大小，即字号； b（4）/bfont-sytle属性设置字体风格，主要有：normal标准体、italic（斜体）oblique（歪斜体）； b（5）/bfont-variant设置字体的变体，有：normal和small-caps； b（6）/bfont-weight设置字体的粗细； b（7）/bfont属性，综合设置各种字体属性，例如：font: italic bold small-caps 20px/30px 隶书,黑体,宋体。/p/body2 文本text属性练习一、文本属性字符间距属性letter-spacing单词间距属性Word-spacing文本划线属性text-decoration文本对齐方式属性text-align段落首行缩进属性text-indent行高属性line-height英文大小写转换属性text-transform二、实验所要实现的页面描述如下：1、页面主要由4个段落组成。第一段文本内容（红色部分）为：letter-spacing字符的间距样式的使用效果对上述文本的格式要求：字符间距为30像素。第二段落内容（红色部分）为：Who are you单词的间距样式的使用效果，注意不是字符间距哦