网页设计第13次课CSS简介和字体属性详解.ppt

（一）CSS三种定义方式 ① 标记定义型：即HTML标签，如div，p，body等。格式如： …… head style type=text/css p { color:green; } /style /head body p我是测试文字1/p p我是测试文字2/p p我是测试文字3/p /body …… ② class定义型：在HTML标签中自定义的，css中定义其属性前边要加“.”，格式如： …… head style type=text/css .p1 { color:cyan; } /style /head body p class=“p1” 我是测试文字1/p p我是测试文字2/p p class=“p1” 我是测试文字3/p /body …… ③ id定义型：也是在HTML标签中自定义的，css中定义其属性前边要加“#”，格式如： …… head style type=text/css .p1 { color:red; } #p1 { color:blue; } /style /head body p id=“p1” 我是测试文字1/p p我是测试文字2/p p class=“p1”我是测试文字3/p /body …… （二）CSS里的优先级 CSS规定，范围越小，优先级越高。由小到大排列如下： 行内定义 id定义型 class定义型 标记定义型。 Style=“…” #P1 .p2 p{…} （三）CSS常用样式属性介绍 ————————————核心内容预警线——————————- ————————————核心内容预警线——————————- 1、字体属性（Font） 前面HTML中己经介绍了网页中文字的常见标记，使用CSS定义的文字样式更如丰富，实用性更强。 （1）字体 font-family： 在HTML中，设置文字的字体属性需要通过font标记中的face属性，而在CSS中则使用font-family属性。 语法，font-family : “字体1”, “字体2”,······ （2）字号 font-size： 在HTML中，字体的大小是由font标记中的size属性（只有1-7个取值）来控制的。在CSS里可以使用font-size属性来自由控制字体的大小。 语法，font-size : 像素值 / 百分比值 / 绝对字体尺寸(xx-small, x-small, small, medium, large,x-large, xx-large) / 相对字体尺寸(smaller,larger) 学完就练之1-1（请将源代码复制到页面中，开始练习）： p1、武汉生物工程学院（字体变化，字号最大）/p p2、计信系（字号较大）/p p3、园林系（字体变化）/p p4、艺术系（字体变化，有候补字体，字号中等）/p p5、体育系（字号较小）/p p6、创业学院（字号最小）/p （3）字体风格 font-style： 在HTML里使用i标记来表示文字为斜体显示，而在CSS中，字体风格font-style属性用来设置字体是否为斜体。样式的取值有3种：【normal是默认的正常字体；italic以斜体显示文字；oblique属于中间状态，以偏斜体显示。】 语法，font-style : normal / italic / oblique （4）加粗字体 font-weight： 在HTML里使用b标记设置文字为粗体显示，而在CSS中利用font-weight属性来设置字体的粗细。font-weight 的取值范围 【包括normal、bold、bolder、lighter、number。其中 normal 表示正常粗细；bold表示粗体；bolder表示特粗体；lighter表示特细体；number不是真正的取值，其范围是100?900, 一般情况下都是整百的数字】 语法，font-weight : normal / bold / bolder / lighter / number 学完就练之1-2（请将源代码复制到页面中，开始练习）： p1、《琅琊榜》（正常风格，加粗显示）/p p2、《伪装者》（正常风格，不加粗显示）/p p3、《虎妈猫爸》（偏斜体风格，加粗显示）/p p4、《芈月传》（偏斜体风格，不加粗显示）/p p5、《盗墓笔记》（斜体风格，加粗显示）/p p6、《花千骨》（斜体风格，不加粗显示）/p （5）小写字母转换为大写：font-variant： 使用font-variant属性可以将小写的英文字母转化为大写。在font-variant属性中，可以设置的值只有两个：【一个是normal,表示正常显示，另一个是smal