CSS属性Web前端开发技术篇2：CSS技术

本项目介绍CSS的文本段落属性、其他元素属性及盒子模型的各种属性和应用示例。通过使用CSS属性对网页进行布局,有助于培养学生勤于思考的习惯和获取新知的能力,提升学生自身水平。此外,通过示例训练,提升学生的CSS相关技能,端正其学习态度,培养认真细致、精益求精的工作作风。序言

目录CONTENTSCSS文本段落属性CSS其他元素属性CSS盒子模型010203

01CSS文本段落属性Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenoneshorizon.

字体属性1.字号font-size属性font-size属性用于设置字号,其值可以是绝对值或相对值。绝对值将字号设置为指定的大小,不允许用户在任何浏览器中改变字号,这不利于可用性,但在确定输出的物理尺寸时很有用;相对值是相对于周围的元素来设置字号,允许用户在浏览器中改变字号。(1)基本语法。font-size:绝对值|相对值|关键字;(2)语法说明。①绝对值:可以使用in、cm、mm、pt、pc等单位为font-size属性赋值。②相对值:可以使用em、ex、px、%等单位为font-size属性赋值。CSS文本段落属性

字体属性由于网页通常是为了浏览而不是印刷,因此建议用相对单位来定义字号,如px。W3C推荐使用em尺寸单位,从而可以在所有浏览器中调整字号。font-size属性也可以通过使用关键字来指定字号,font-size属性的关键字有xx-small、x-small、small、medium、large、x-large、xx-large等。在不同的终端设备上浏览的效果可能会有所差异。2.文本风格font-style属性在HTML中,使用em/em、i/i标记可将字形设置为斜体。在CSS中,可以使用font-style属性设置文本的风格,如显示斜体字样。(1)基本语法。font-style:normal|litalic|oblique;CSS文本段落属性

字体属性(2)语法说明。font-style属性值及说明如表5-1所示。3.字体名称font-family属性在CSS中,使用font属性可以设置丰富的字体,美化页面的外观。其中,font-family专门用于设置字体名称。CSS文本段落属性

字体属性(1)基本语法。font-family:字体1,字体2……字体n;(2)语法说明。当属性值为多个字体名称时,可以使用逗号分隔。浏览器依次查找字体,若存在则使用该字体;若不存在则会继续向后查找,依次类推,直至查找到最后一种字体;若最后一种字体仍不存在则使用默认字体(宋体)。如果字体名称中出现空格,则必须使用双引号将字体括起来。4.字体变体font-variant属性font-variant属性用于设置字体变体,主要用于控制小型大写字母的显示。(1)基本语法。CSS文本段落属性

字体属性font-variant:normal|small-caps;(2)语法说明。font-variant属性值及说明如表5-2所示。5.字体粗细font-weight属性在HTML中,使用strong/strong或b/b标记来设置字体加粗。在CSS中,可以使用CSS文本段落属性

字体属性font-weight属性设置文本字体的粗细。(1)基本语法。font-weight:normal|bold|bolder|lighter|100|200|……|900;(2)语法说明。font-weight属性值及说明如表5-3所示。CSS文本段落属性

字体属性6.字体font属性font属性是复合属性,可以一次完成多个字体属性的设置,包括字体粗细、风格、字体变体、字号、行高及字体名称。(1)基本语法。font:font-stylefont-weightfont-variantfont-size/line-heightfont-family;(2)语法说明。当利用font属性一次完成多个字体属性的设置时,各属性值之间必须使用空格隔开。前三个属性值可以不分先后顺序,默认为normal。大小和字体名称序列必须显式指定,先设置大小,再设置字体序列。当需要设置行高时,可以写在字体大小的后面,中间用“/”分隔,行高为可选的属性。