网页设计——入门与提高 王维 吴菲 王丽娜 第15章

《网页设计——入门与提高 王维 吴菲 王丽娜 第15章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第15章CSS属性15.1CSS属性15.1.1字体属性1.字体族font-family属性描述了在HTML文件中用何种字体来显示文字，可以为文字指定一种或多种字体，属性值是一个用逗号分隔的字体名称列表。p{font-family:”NewCenturySchoolbook”,华文彩云,黑体,楷体;}2.字体风格font-style属性描述了在HTML文件中的文字是否为斜体效果，属性的值为normal、italic或oblique。p{font-style:italic;}15.1CSS属性15.1.1字体属性3.字体变

2、形font-variant描述了在HTML文件中的小写英文字母是否为小型大写字母效果，属性的值为normal和small-caps。p{font-variant:small-caps;}4.字体加粗font-weight属性描述了在HTML文件中文字的粗细，属性的值为100到900之间并且是100的倍数的数字、normal、bold、bolder和lighter。p{font-weight:700;}或p{font-weight:bold;}15.1CSS属性15.1.1字体属性5.字体大小font-size属性描述了在

3、HTML文件中文字的大小，CSS共支持用4种方式表示字体大小。分别是绝对大小、相对大小、长度和百分比。绝对大小是由浏览器预先定义的一种字体大小，分别为xx-small，x-small，small，medium，large，x-large和xx-large。p{font-size:x-large;}相对大小有smaller和larger两种值，分别表示比父元素的字体大一号或小一号的字体。p{font-size:smaller;}15.1CSS属性15.1.1字体属性5.字体大小长度最常用，也最容易理解，它指字体以固定的数值

4、搭配长度单位显示。p{font-size:12px;}或p{font-size:30pt;}百分比，它指定字体以父元素字体大小的百分之几显示。p{font-size:150%;}15.1CSS属性15.1.1字体属性6.字体学习了前面的几个字体规则之后，我们会发现有时为同一段文字指定多个字体属性时，书写起来有些麻烦和不便。p{font-family:宋体;font-weight:bold;font-size:15pt;font-style:italic;}font属性可以简化代码，简化为：p{font:italicbol

5、d15pt宋体;}15.1CSS属性15.1.2颜色与背景属性1.颜色color属性可以设置标签内容的前景色。颜色的值可以是颜色名、十六进制RGB组合或十进制RGB组合。例如：设置文字为红色。p{color:red;}或p{color:#ffoooo;}2.背景颜色background-color属性用来设定元素的背景颜色，它为元素设置一种纯色。颜色的值可以是颜色名、十六进制RGB组合或十进制RGB组合。例如：设置标题一背景色为红色。h1{background-color:red;}或h1{background-colo

6、r:#ffoooo;}15.1CSS属性15.1.2颜色与背景属性3.背景图像background-image属性用来设定元素的背景图片，属性的值为none和图片的url。其中none为默认值，表示无背景图片；url为背景图片的地址，可以是绝对地址也可以是相对地址。例如：设置body与p标签的背景图像。body{background-image：url（/image/bg.gif）;}p{background-image:url(http://www.ccutsoft.com/bg.gif);}15.1CSS属性15.1

7、.2颜色与背景属性4.背景重复background-repeat属性用来设定背景图片是否重复平铺，属性的值为repeat、no-repeat、repeat-x和repeat-y。其中repeat表示背景图片横向和纵向都重复平铺；no-repeat表示背景图片不重复平铺；repeat-x表示背景图片横向重复平铺；repeat-y表示背景图片纵向重复平铺。例如：设置页面背景图纵向重复平铺。body{background-image:url(/image/bg.gif);background-repeat:repeat-y;}

8、15.1CSS属性15.1.2颜色与背景属性5.背景滚动background-attachment属性用来设定背景图片是否随文档一起滚动，属性的值为scroll和fixed。其中scroll表示当文档滚动时，背景图片随文档一起滚动；fixed表示背景图片固定在文档的可见区域里。例如：设置页面背景图固定，不随文档滚动。