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 }

 

 

 

 

posted @ 2013-09-04 15:30  最是那一杯红酒  阅读(579)  评论(0)    收藏  举报