Web前端开发 课件 第8章 CSS背景样式

第8章CSS常用样式属性主讲教师：朱铁樱《Web前端开发》8.1字体（1）font-size:字号大小font-size属性用于设置字号，该属性的属性值可以为px值、百分数、倍率值等。单位说明em倍率单位，指相对当前文本的倍率。pxpx单位，是网页设计中常用的单位。%百分比单位，指相对于当前文本的百分比。8.1字体（2）font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。CSS样式示例代码p{font-family:"微软雅黑";}font-family属性可以同时指定多个字体，各字体之间以逗号隔开。8.1字体（2）font-family:字体使用font-family设置字体时，需要注意的事项如下。各种字体之间必须使用英文逗号分隔。中文字体需要加英文引号，但英文字体不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文引号。尽量使用计算机系统默认字体或服务器定义的字体，保证网页中的文字在任何用户的浏览器中都能正确显示。8.1字体（3）font-weight:字体粗细font-weight属性用于定义文字的粗细，其属性值如下。属性值描述normal默认属性值。定义标准样式的文字。bold定义粗体文字。bolder定义更粗的文字。lighter定义更细的文字。100~900（100的整数倍）定义由细到粗的文字。其中400等同于normal，700等同于bold，数值越大字体越粗。8.1字体（5）font-style:字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。BABCABC默认值，浏览器会显示标准的字体样式。normal浏览器会显示斜体的字体样式。italic浏览器会显示倾斜的字体样式。oblique8.1字体（6）font:综合设置字体样式font属性用于对字体样式进行综合设置。选择器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}font属性的语法格式注意：必须按语法格式中的顺序书写，各个属性以空格隔开。设置字体样式属性时，不需要设置的属性可以省略，该属性会自动取默认值，但必须保留font-size属性和font-family属性，否则font属性将不起作用。8.1字体（7）@font-face规则@font-face用于定义服务器字体。通过@font-face规则，网页设计师可以在用户计算机未安装字体时，使用任何喜欢的字体。B@font-face{ font-family:字体名称; src:字体路径;}@font-face规则定义服务器字体的基本语法格式font-family用于指定字体的名称，该名称可以随意定义。src属性用于指定字体文件的路径。8.1字体（7）@font-face规则使用服务器字体的步骤B使用@font-face规则定义服务器字体。A下载字体，并存储到相应的文件夹中。C对元素应用“font-family”字体样式。8.2文本（1）color:文本颜色color属性用于定义文本的颜色。颜色英文单词例如，red、green、blue等。十六进制颜色值例如，#F00、#FF6600、#29D794等。RGB颜色值例如，红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。8.2文本（2）letter-spacing:字间距letter-spacing属性用于定义字间距，其属性值可为不同单位的数值。例如，像素值单位px、倍率值单位em。（3）word-spacing:单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。8.2文本（4）line-height:行间距line-height属性用于设置行间距。8.2文本（5）text-transform:文本转换text-transform属性用于控制英文字符的大小写转换。capitalize首字母转换为大写none不进行转换（默认值）lowercase全部字符转换为小写uppercase全部字符转换为大写8.2文本（6）text-decoration:文本装饰text-decoration属性用于设置文本的下画线、上画线、删除线等装饰效果。underline下画线none没有文本装饰（正常文本默认值）line-through删除线overline上画线8.2文本（7）text-align:水平对齐方式text-align属性用于设置文本内容的水平对齐，和HTML中的align对齐属性类似。ABCABC左对齐，为属性默认值。left右对齐。right居中对齐。center8.2文本（8）text-indent:首行缩进text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值。像素值单位px、倍率值单位em、百分数单位%，通常使用倍率值单位em。设置首行缩进时，允许使用负值。8.2文本（9）text-shadow:阴影效果text-shadow是CSS3新增属性，使用该属性可以为页面中的文本添加阴影效果。选择器{text-shadow:h-shadowv-shadowblurcolor;}text-shadow的语法格式h-shadow用于设置水平阴影的距离。v-shadow用于设置垂直阴影的距离。blur用于设置模糊半径。color用于设置阴影颜色。各属性值之间使用空格分隔。注意：阴影的水平距离或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。8.2文本（10）text-overflow:标示对象内溢出文本text-overflow属性为CSS3的新增属性，该属性用于处理溢出的文本。选择器{text-overflow:属性值;}text-overflow属性的语法格式clip：修剪溢出文本，不显示省略符号“…”。ellipsis：用省略符号“…”替代被修剪文本，省略符号插入的位置在最后一个字符处。text-overflow属性的常用取值8.2文本8.3背景在CSS中，背景颜色使用background-color属性来设置。background-color属性的取值颜色的英文单词十六进制颜色值RGB代码8.3背景使用CSS中的background-image属性可以为网页设置背景图像。例如：8.3背景默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制background-repeat属性的取值repeat：沿水平和竖直两个方向平铺（默认属性值）。no-repeat：不平铺（图像位于元素的左上角，只显示一次。repeat-x：只沿水平方向平铺。repeat-y：只沿竖直方向平铺。8.3背景8.3背景background-position属性用于精确元素的位置。background-position属性的基本语法格式background-position:属性值1属性值2;“属性值2”表示背景图像垂直位置。“属性值1”表示背景图像水平位置。8.3背景使用不同单位的数值属性的取值最常用的是像素值，可以使用像素值直接设置图像左上角在元素中的水平坐标和垂直坐标。使用方位名词①水平方向值：left、center、right。②垂直方向值：top、center、bottom。使用百分比①0%0%：表示图像左上角与元素的左上角对齐。②50%50%：表示图像50%50%中心点与元素50%50%的中心点对齐。③20%30%：表示图像20%30%的点与元素20%30%的点对齐。④100%100%：表示图像右下角与元素的右下角对齐。8.3背景使用background-attachment属性可以将背景图像固定在浏览器窗口的某个位置。图像随页面一起滚动（默认属性值）图像固定在屏幕上，不随页面滚动scrollfixed8.3背景在CSS3中，运用background-size属性可以设置背景图像的大小。background-size属性的基本语法格式background-size:属性值1属性值2;属性值1为必选属性值，性值2为可选属性值。8.3背景属性值说明像素值设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto。百分比以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto。cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分可能无法显示在背景定位区域中。contain按照某一边，把背景图像扩展至最大尺寸，背景图像会完全显示在区域中。属性值可以是像素值、百分数或“cover”“contain”关键字，具体解释如下。8.3背景在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式background:[background-color][background-image][background-repeat][background-attachment][background-position][backg