CSS 属性基础

例子

body {				/* 元素 */
	color:blue;
}

h1,h2,h3,h4,h5,h6 {
	color: blue; 
	font-size: 20px; 
}
p {
	color: green; 
	font-size: 15px; 
	font-family: "sans serif";
	text-align: center;
	background-color: gray; 	/*背景色*/
	padding: 10px;			/*向外延伸 , 宽了*/
}
#myid p {			/* id + 元素 */
	color: red;
}

.center {			/* class */
	text-align: center;
	
}

h1.center {			/*表示h1这个元素的class属性*/
	color: red;    /*按照优先级,所以没有变化*/
}
[dir] {				/* 属性*/
	color: yellow;
}

例子 2

ALL

 1 body {
 2     font-family: sans-serif;
 3     font-size: 2em;
 4     background-image: url(a.jpg);
 5 }
 6 
 7 table {
 8     border: 1px solid blue;
 9     width: 300px;
10     height: 200px;
11     vertical-align: bottom;
12     text-align: center;
13     padding: 15px;
14     background-color: green;
15     color: white;
16 }
17 
18 textarea {
19     text-indent: 4em;
20     text-align: center;
21 
22 }
23 
24 h1,h3 {        /*组选择*/
25     color: brown;
26 }
27 
28 p b {
29     color: blue;
30 }
31 
32 p>span {
33     color: white;
34 }
35 
36 b+span {
37     color: yellow;
38 }
39 .h1c {
40     color: yellow;
41 }
42 #tx1 {
43     color: yellow;
44 }
45 [type=text] {
46     color: blue;
47 }

例子3

include comment

 1 h1,h3 {        /* 同组 */
 2     background: red;
 3 }
 4 body h1 {    /* 后代选择 */
 5     background: green;
 6 }
 7 p > span {    /* 儿子选择,直接 */
 8     background: red;
 9 }
10 
11 i + h3 {        /* 兄弟选择,只针对第2项起作用 */
12     background: blue;
13 }
14 
15 #xx {        /* id选择 */
16     background: yellow;
17 }
18 
19 .text {        /* clase选择 */
20     background: red;
21 }
22 
23 [type="text"] {    /* type选择 */
24     background: blue;
25 }