CSS内容的补充
一.属性选择器,对于没有id和class的元素较为实用,使用方法为
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <style> 5 [type="text"] { 6 width: 150px; 7 display: block; 8 margin-bottom: 10px; 9 background-color: red; 10 font-family: Verdana, Arial; 11 } 12 13 [type="button"] { 14 width: 80px; 15 margin-left: 35px; 16 display: block; 17 font-family: Verdana, Arial; 18 } 19 </style> 20 </head> 21 <body> 22 23 <form name="input" action="" method="get"> 24 <input type="text" name="Name" value="Bill" size="20"></input> <input 25 type="text" name="Name" value="Gates" size="20"></input> <input 26 type="button" value="Example Button"></input> 27 28 </form> 29 </body> 30 </html>
二.使用外联方式,引入样式表
建立CSS文件 style.css
1 @CHARSET "UTF-8"; 2 3 hr { 4 color: red; 5 } 6 7 p.ko { 8 background: red; 9 font-family: "楷体"; 10 } 11 12 body { 13 backcolor: cyan; 14 }
在html文件中,导入样式表
导入格式:<link rel="stylesheet" type="text/css" href="mystyle.css" />
1 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 2 //导入CSS样式表 3 4 5 6 7 <hr> 8 <p class="ko">从前有一只老虎</p>
三.关于背景色、背景图像的一些总结
(一)设置背景色
1 //设置背景色 2 body { 3 background-color: yellow 4 } 5 6 h1 { 7 background-color: #00ff00 8 } 9 10 h2 { 11 background-color: transparent 12 } 13 14 p { 15 background-color: rgb(250, 0, 255) 16 } 17 18 p.no2 { 19 background-color: gray; 20 padding: 20px; 21 }
1 <h1>这是标题 1</h1> 2 <h2>这是标题 2</h2> 3 <p>这是段落</p> 4 <p class="no2">这个段落设置了内边距。</p>
(二)设置文本背景色
1 //文本背景色 2 span.highlight { 3 background-color: yellow 4 }
1 <span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 2 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 3 <span class="highlight">这是文本。</span>
(三)有不同的背景图案
1 //有不同的背景图片 2 body { 3 background-image: url("../i/eg_bg_04.gif" 4 /*tpa=http://www.w3school.com.cn/i/eg_bg_04.gif*/); 5 } 6 7 p.flower { 8 background-image: url("../i/eg_bg_03.gif" 9 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 10 padding: 20px; 11 } 12 13 a.radio { 14 background-image: url("../i/eg_bg_07.gif" 15 /*tpa=http://www.w3school.com.cn/i/eg_bg_07.gif*/); 16 padding: 20px; 17 }
四.背景图案的各种综合用法
1 //设置背景图片 2 body { 3 background-image: url("../i/eg_bg_04.gif" 4 /*tpa=http://www.w3school.com.cn/i/eg_bg_04.gif*/); 5 } 6 7 //背景图像重复 8 body { 9 background-image: url("../i/eg_bg_03.gif" 10 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 11 background-repeat: repeat 12 } 13 14 //设置竖直方向重复背景图像 15 body { 16 background-image: url("../i/eg_bg_03.gif" 17 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 18 background-repeat: repeat-y 19 } 20 21 //水平方向背景图像重复 22 body { 23 background-image: url("../i/eg_bg_03.gif" 24 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 25 background-repeat: repeat-x 26 } 27 28 //显示一次背景图像 29 body { 30 background-image: url("../i/eg_bg_03.gif" 31 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 32 background-repeat: no-repeat 33 } 34 35 //设置背景图像的位置 36 body { 37 background-image: url("../i/eg_bg_03.gif" 38 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 39 background-repeat: no-repeat; 40 background-attachment: fixed; 41 background-position: center; 42 } 43 44 //设置固定的背景图像 45 body { 46 background-image: url("../i/eg_bg_02.gif" 47 /*tpa=http://www.w3school.com.cn/i/eg_bg_02.gif*/); 48 background-repeat: no-repeat; 49 background-attachment: fixed 50 } 51 52 //使用像素来定位背景图像 53 body { 54 background-image: url("../i/eg_bg_03.gif" 55 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 56 background-repeat: no-repeat; 57 background-attachment: fixed; 58 background-position: 50px 100px; 59 } 60 61 //使用百分比来定位背景图像 62 body { 63 background-image: url("../i/eg_bg_03.gif" 64 /*tpa=http://www.w3school.com.cn/i/eg_bg_03.gif*/); 65 background-repeat: no-repeat; 66 background-attachment: fixed; 67 background-position: 30% 20%;
四.关于css中的字体设置
1 //设置文字的字体 2 p.serif { 3 font-family: "Times New Roman", Georgia, Serif 4 } 5 6 p.sansserif { 7 font-family: Arial, Verdana, Sans-serif 8 } 9 10 //设置字体的尺寸 11 h1 { 12 font-size: 300% 13 } 14 15 h2 { 16 font-size: 200% 17 } 18 19 p { 20 font-size: 100% 21 } 22 23 //设置字体风格 24 p.normal { 25 font-style: normal 26 } 27 28 p.italic { 29 font-style: italic 30 } 31 32 p.oblique { 33 font-style: oblique 34 } 35 36 //设置字体异体 37 p.normal { 38 font-variant: normal 39 } 40 41 p.small { 42 font-variant: small-caps 43 } 44 45 //设置字体粗细 46 p.normal { 47 font-weight: normal 48 } 49 50 p.thick { 51 font-weight: bold 52 } 53 54 p.thicker { 55 font-weight: 900 56 } 57 58 //所有字体属性在一个申明之内 59 p.ex1 { 60 font: italic arial, sans-serif; 61 } 62 63 p.ex2 { 64 font: italic bold 12px/30px arial, sans-serif; 65 }
五.列表的设置
1 //在无序列表中不同类型的列表标记 2 ul.disc {list-style-type: disc} 3 ul.circle {list-style-type: circle} 4 ul.square {list-style-type: square} 5 ul.none {list-style-type: none} 6 7 //在有序列表中的不同类型的列表标记 8 ol.decimal {list-style-type: decimal} 9 ol.lroman {list-style-type: lower-roman} 10 ol.uroman {list-style-type: upper-roman} 11 ol.lalpha {list-style-type: lower-alpha} 12 ol.ualpha {list-style-type: upper-alpha} 13 14 //所有列表样式类型 15 ul.disc {list-style-type: disc} 16 ul.circle {list-style-type: circle} 17 ul.square {list-style-type: square} 18 ul.decimal {list-style-type: decimal} 19 ul.decimal-leading-zero {list-style-type: decimal-leading-zero} 20 ul.lower-roman {list-style-type: lower-roman} 21 ul.upper-roman {list-style-type: upper-roman} 22 ul.lower-alpha {list-style-type: lower-alpha} 23 ul.upper-alpha {list-style-type: upper-alpha} 24 ul.lower-greek {list-style-type: lower-greek} 25 ul.lower-latin {list-style-type: lower-latin} 26 ul.upper-latin {list-style-type: upper-latin} 27 ul.hebrew {list-style-type: hebrew} 28 ul.armenian {list-style-type: armenian} 29 ul.georgian {list-style-type: georgian} 30 ul.cjk-ideographic {list-style-type: cjk-ideographic} 31 ul.hiragana {list-style-type: hiragana} 32 ul.katakana {list-style-type: katakana} 33 ul.hiragana-iroha {list-style-type: hiragana-iroha} 34 ul.katakana-iroha {list-style-type: katakana-iroha} 35 36 //图像作为列表项的标记 37 ul {list-style-image: url("../i/eg_arrow.gif"/*tpa=http://www.w3school.com.cn/i/eg_arrow.gif*/)} 38 39 //放置列表项标记 40 ul.inside {list-style-position: inside} 41 ul.outside {list-style-position: outside} 42 //一个申明中定义所有的列表属性 43 ul {list-style: square inside url("../i/eg_arrow.gif"/*tpa=http://www.w3school.com.cn/i/eg_arrow.gif*/)}
六.CSS中的table的设置
1 //表格边框设置,table是外周轮廓,四条边。td为单元格的轮廓线 2 table,th,td { 3 border: 1px solid blue; 4 } 5 6 //表格边框设置为折叠式的,border-collapse:collapse必须添加 7 table { 8 border-collapse: collapse; 9 } 10 11 table,td,th { 12 border: 1px solid black; 13 } 14 15 //设置表格的宽度和高 16 17 table { 18 width: 100%; 19 } 20 21 th { 22 height: 50px; 23 } 24 25 //text-align 和 vertical-align 属性设置表格中文本的对齐方式。text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中: 26 td { 27 text-align: right; 28 } 29 30 td { 31 height: 50px; 32 vertical-align: bottom; 33 } 34 35 //如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性 36 td { 37 padding: 15px; 38 } 39 40 //下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色: 41 42 table,td,th { 43 border: 1px solid green; 44 } 45 46 th { 47 background-color: green; 48 color: white; 49 }
一个表格漂亮的表格的代码
1 <html> 2 <head> 3 <style type="text/css"> 4 #customers { 5 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 6 width: 100%; 7 border-collapse: collapse; 8 } 9 10 #customers td,#customers th { 11 font-size: 1em; 12 border: 1px solid #98bf21; 13 padding: 3px 7px 2px 7px; 14 } 15 16 #customers th { 17 font-size: 1.1em; 18 text-align: left; 19 padding-top: 5px; 20 padding-bottom: 4px; 21 background-color: #A7C942; 22 color: #ffffff; 23 } 24 25 #customers tr.alt td { 26 color: #000000; 27 background-color: #EAF2D3; 28 } 29 </style> 30 </head> 31 32 <body> 33 <table id="customers"> 34 <tr> 35 <th>Company</th> 36 <th>Contact</th> 37 <th>Country</th> 38 </tr> 39 <tr> 40 <td>Apple</td> 41 <td>Steven Jobs</td> 42 <td>USA</td> 43 </tr> 44 <tr class="alt"> 45 <td>Baidu</td> 46 <td>Li YanHong</td> 47 <td>China</td> 48 </tr> 49 <tr> 50 <td>Google</td> 51 <td>Larry Page</td> 52 <td>USA</td> 53 </tr> 54 <tr class="alt"> 55 <td>Lenovo</td> 56 <td>Liu Chuanzhi</td> 57 <td>China</td> 58 </tr> 59 <tr> 60 <td>Microsoft</td> 61 <td>Bill Gates</td> 62 <td>USA</td> 63 </tr> 64 <tr class="alt"> 65 <td>Nokia</td> 66 <td>Stephen Elop</td> 67 <td>Finland</td> 68 </tr> 69 </table> 70 </body> 71 </html>
七.字体的修饰问题
1 //设置行间距 2 p.small { 3 line-height: 0.5 4 } 5 6 p.big { 7 line-height: 2 8 } 9 10 //首行缩进,CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。 11 p { 12 text-indent: 5em; 13 } 14 15 //水平对齐方式 16 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。 17 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中 18 19 h1 { 20 text-align: center 21 } 22 23 h2 { 24 text-align: left 25 } 26 27 h3 { 28 text-align: right 29 } 30 31 h4 { 32 text-align: justify 33 } 34 35 h5 { 36 text-align: inherit 37 } 38 39 //字间隔,word-spacing 属性可以改变字(单词)之间的标准间隔。 40 其默认值 normal 与设置值为 0 是一样的。 41 word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近: 42 * / 43 p.spread { 44 word-spacing: 30px; 45 } 46 47 p.tight { 48 word-spacing: -0.5em; 49 } 50 51 //字母间隔 52 letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。 53 与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。 54 默认关键字是 normal(这与 letter-spacing: 0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量: 55 56 h1 { 57 letter-spacing: -0.5em 58 } 59 60 h4 { 61 letter-spacing: 20px 62 } 63 64 //字符转换 65 text-transform 属性处理文本的大小写。这个属性有 4 个值: 66 none 67 uppercase 68 lowercase 69 capitalize 70 71 h1 { 72 text-transform: uppercase 73 } 74 75 //文本装饰 76 text-decoration 有 5 个值: 77 none 78 underline 79 overline 80 line-through 81 blink 82 a { 83 text-decoration: none; 84 } 85 86 //处理空白符 87 white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。 88 通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。 89 p { 90 white-space: nowrap; 91 } 92 93 p { 94 white-space: normal; 95 }