[工学]样式单CSS_3.pptVIP

4 CSS基本属性 字体 背景 区块(定位) 盒子（box） 边框（border） 列表 定位与扩展 字体font-family (serif, fantasy, monospace...) 字号font-size (small, medium, large, 150%) 样式font-style(normal, italic, oblique) 字号变化font-variant (normal , small-caps) 文字粗细font-weight (normal, bold, bolder,lighter) 大小写text-transform 行高line-height 文字修饰text-decoration 颜色color font：1~8 4.1字体属性 .1 字体族font-family font-family 默认值：由浏览器决定 h1{ font-family: Georgia, Times New Roman, Garamond, Times, serif } p { font-family: Verdana, Arial, Helvetica, sans-serif } .2 字体尺寸font-size font-size: （1~4） 绝对大小：xx-small/x-small/medium/large/x-large/xx-large 相对大小：larger/smaller 数值单位 百分比 p {font-size:90%} h1 {font-size:20pt;} h2 {font-size:1.5em;} h3 {font-size: 150%} blockquote {font-size: 70%} b {font-size:20px} .3 字体样式font-style font-style: normal/italic/oblique p { font-style: normal } em { font-style: italic; } .4 字体粗细font-weight font-weight: normal/bold/bolder/lighter/100~900 h1{font-weight: bolder} h2{font-weight:300} h3{font-weight: lighter} h4{font-weight: 900} .5 使文本成为大写或小写 text-transform: uppercase/lowercase span {text-transform: uppercase; font-size: 50%} .6 文本修饰text-decoration text-decoration:none/underline/overline /line-through/blink a:hover,a:link,a:visited,a:active{text-dcoration:none} 超级链接例 .7 行高line-height line-height: x% 如： style type=text/css !-- span {text-transform: uppercase; font-size: 90%} p {line-height: 200%} -- /style .8 前景色color color：颜色值 h1{color:red} h2{color:#f05678} h3{color:rgb(255,0,0)} 网页中色彩的运用很关键，说法也很多 色彩background-color: 颜色值 图片background-image: url(URL) //图像优先于背景色 重复方式background-repeat: repeat/repeat-x/repeat-y/no-repeat background-attachment: scroll/fixed 位置background-position: 百分比/长度/top/center/right/left 4.2 背景属性 body { background-image：url(x.gif); background-repeat：repeat-x; background-color： #ffffff } 字母间距letter-spacing: normal/长度 单词间距word-spacing: normal/长度 文字对齐text-align: left/