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

body {
    font-family: sans-serif;
    font-size: 2em;
    background-image: url(a.jpg);
}

table {
    border: 1px solid blue;
    width: 300px;
    height: 200px;
    vertical-align: bottom;
    text-align: center;
    padding: 15px;
    background-color: green;
    color: white;
}

textarea {
    text-indent: 4em;
    text-align: center;

}

h1,h3 {        /*组选择*/
    color: brown;
}

p b {
    color: blue;
}

p>span {
    color: white;
}

b+span {
    color: yellow;
}
.h1c {
    color: yellow;
}
#tx1 {
    color: yellow;
}
[type=text] {
    color: blue;
}

 例子3

h1,h3 {        /* 同组 */
    background: red;
}
body h1 {    /* 后代选择 */
    background: green;
}
p > span {    /* 儿子选择,直接 */
    background: red;
}

i + h3 {        /* 兄弟选择,只针对第2项起作用 */
    background: blue;
}

#xx {        /* id选择 */
    background: yellow;
}

.text {        /* clase选择 */
    background: red;
}

[type="text"] {    /* type选择 */
    background: blue;
}