Web开发实用第三章技术分析.pptVIP

3.5 CSS作用原理 3.5.3 就近原则 p{color:red; font-weight:normal;} p{font-size:18px; font-weight:bold; text-align:center;} 两个p样式中都有样式font-weight属性，一个值为normal，一个值为bold，最终段落显示成加粗的字号，这是因为第二个p样式离p标签距离更近。 3.6 CSS属性 3.6.1 长度单位 li列表文字1/li li class=boldclass为bold的列表文字2/li li id=li1id为li1的列表文字3/li li class=bold id=li1列表文字4/li 第一行没有使用class和id属性，因此由样式表li起作用。 样式表li对页面中所有li/li标签都起作用，但由于优先级低于类样式表选择器的li.bold，因此，第二行的样式由li.bold控制。 同理，第三行的样式由样式表#li1控制。 在第四行中，同时有class=bold id=li1两个属性，由于ID样式选择器的优先级最高，因此，该行受样式表#li1的样式控制。 3.6 CSS属性 3.6.3 字体属性 1．掌握CSS的语法规则及各种属性的定义方法； 1．font-family 属性用来设置HTML元素的字体列表，可设置多个值，浏览 器由前向后依次选择字体 1．掌握CSS的语法规则及各种属性的定义方法； 2．font-size属性 用来控制字体显示的大小，取值有相对取值和绝对取值几种方式 5．font-variant属性 设置字型异体，具有nomal与small-caps两种取值 4．font-weight属性 设置字体的粗细 1．掌握CSS的语法规则及各种属性的定义方法； 3．font-style属性 用来设置指定元素的显示字形样式其作用原理 6．font属性 设置字体属性的一种简略写法，设置时可以省略某些属性 3.6 CSS属性 3.6.4 文本属性 1． letter-spacing属性 设置字符间距，属性值可为具体长度，并可取负值，用来紧缩字符间距 2．word-spacing属性 设置文本中单词(汉字)间的距离。 3．line-height属性 控制标记符中文本行高。其取值可以是数字、长度或百分比，normal为默认值 3.6 CSS属性 3.6.4 文本属性 4．text-decoration属性 文本修饰属性，包括none、下划线(underline) 、上划线(overline) 、删除线(line-through )以及闪烁(blink)等值，none为默认值 5．text-align/vertical-align属性 设置文本的水平对齐/垂直对齐 6．text-transform属性 用来设置文本格式转换 7．text-indent属性 设置首行缩进 3.6 CSS属性 3.6.5 颜色和背景 div{background-color:blue; margin:10px; padding:10px; width:200px;} span.highlight { background-color:yellow; } 例：background-color.htm 网页中的div背景设成蓝色，类样式highlight将span标签的背景设置成黄色，页面效果如图所示。 3.6 CSS属性 3.6.5 颜色和背景 div { background-image: url(images/bg01.jpg); background-repeat:repeat-x; background-attachment:scroll; height:400px; } 例：background-image.htm 上例中设置div标签的背景图片为images/bg01.jpg，水平方向平铺，拉动滚动条时，背景图片随内容一齐滚动。页面效果如图所示。 3.6 CSS属性 3.6.5 颜色和背景 body { background: #00ff00 url(images/eg_background3.jpg) no-repeat fixed center; } 例：background.htm 上述代码将页面背景设置成绿色，并设置居中、不平铺的背景图片