当前位置:首页 >> 互联网 >>

网页 第五章 CSS高级样式_图文

网页设计 2017-1-16 第五章 CSS高级样式 本章目标 ? 会使用CSS设置字体样式 ? 会使用CSS设置文本样式 ? 会使用CSS设置图片对齐方式 ? 会使用CSS设置超链接样式 ? 会使用CSS设置鼠标外观 ? 会使用CSS设置背景样式 CSS字体样式 属性名 含义 举例 font-family font-size font-style 设置字体类型 设置字体大小 设置字体风格 font-family:隶书; font-size:12px; font-style:italic; font-weight font 设置字体的粗细 在一个声明中设置所有 字体属性 font-weight:bold; font:italic bold 36px 宋体; font-family属性 body{font-family: Times,Times New Roman, 楷体;} font-size属性 ? ? 单位:px(像素) in、cm、mm、pt、pc h1{font-size:24px;} h2{font-size:16px;} h3{font-size:5mm;} p{font-size:10in;} span{font-size:12pt;} strong{font-size:13pc;} font-weight属性 值 说明 normal bold bolder lighter 100、200、300、400、 500、600、700、800、 900 默认值,定义标准的字体。 粗体字体。 更粗的字体。 更细的字体。 定义由细到粗的字体。 400等同于normal,700等同于bold。 font-weight属性 <html> <head> <style type=text/css> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} 运行结果: </style> </head> <body> <p class=normal>This is a paragraph</p> <p class=thick>This is a paragraph</p> <p class=thicker>This is a paragraph</p> </body> </html> font属性 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型 p span{font:oblique bold 12px 楷体;} font属性 <html> <head> <style type=text/css> p.ex { 运行结果: font:italic bold 30px arial; } </style> </head> <body> <p class=ex>好好学习</p> </body> </html> 文本属性 属性 color text-align 含义 设置文本颜色 color:#00C; 举例 设置元素水平对齐方式 text-align:right; text-indent line-height text-decoration 设置首行文本的缩进 设置文本的行高 设置文本的装饰 text-indent:20px; line-height:25px; text-decoration:underline; color属性 十六进制方法表示颜色 color:#FFFFFF; color:#000000; color:FF0000; color:#A983D8; color:#95F141; color:#339966; color:#EEFF66; text-align属性 text-align 属性规定元素中的文本的水平对齐方式。 值 left 说明 把文本排列到左边。默认值:由浏览器决定 right center justify 把文本排列到右边 把文本排列到中间 实现两端对齐文本效果 text-align属性 <html> <head> <style type=text/css> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} 运行结果: </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> </body> </html> text-decoration属性 text-decoration 属性规定添加到文本的修饰。 值 none underline overline line-through blink 说明 默认值,定义的标准文本。 设置文本的下划线。 设置文本的上划线。 设置文本的删除线。 设置文本闪烁。此值只在firefox浏览器中有效, 在IE中无效。 text-decoration属性 <html> <head> <style type=text/css> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} a {text-decoration: none} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <p><a href=http://www.w3school.com.c n/index.html>这是一个链接 </a></p> </body> </