CSS学习笔记

#image {

    /*CSS背景*/

    background-color: red;

    background-image: url(3.jpg);

    background-position: center /*30% 20%*//*30px 20px*/;

    background-repeat: repeat-x /*repeat-x*/;

    background-size: 80px 60px;

    /*background: red,url(3.jpg),center,no-repeat,80px 60px*/;

}



#text {

    /*文本排版*/

    text-align: center;

    text-decoration: underline;

    text-indent: 2em;

    word-spacing: 0.5em;

    white-space: normal /*nowarp 禁止文本换行*/;

    direction: rtl; /*从右往左*/

}



#font {

    /*字体*/

    font-family: serif;

    font-style: italic;

    font-size: 15px;

    font-weight: bold /*700*/;

}



/* -----链接----- */

a:link {

    color: #FF0000;

}



/* 未被访问的链接 */

a:visited {

    color: #00FF00;

}



/* 已被访问的链接 */

a:hover {

    color: #FF00FF;

}



/* 鼠标指针移动到链接上 */

a:active {

    color: #0000FF;

}



/* 正在被点击的链接 */

/* -----链接----- */

ul {

    list-style-type: none; /* 去除列表项标记 */

    list-style-image: url('/i/eg_arrow.gif') /* 将图像作为列表项标记 */

}

li{

    display: block;/* 块级元素 */

}

table, td {

    border: 1px solid #3581FF;

    padding: 3px; /* margin是外边距，padding是内边距。两个属性同时出现时，先保证外边距。*/

    /* 两个外边距相遇时会合并的，以边距大的为准，

    无论是margin-top和margin-buttom相遇还是margin-top和margin-top相遇 */

    vertical-align: bottom; /* 垂直对齐 */

    text-align: center;

}



#positive1 {

    position: relative;

    left: 20px;

}



#positive2 {

    position: absolute;

    left: 20px;

    top: 100px;

    z-index: -1; /* 默认z-index为0，-1表示在默认位置的下一层 */

}



#positive3 {

    position: fixed;

    left: 20px;

}



input {

    /* input标签的CSS样式 */

    font-size: 3px;

}



[title]/* 和上面的不同，这个是包含title的标签的css样式*/

 {

    font-size: 3px;

}

[id^="div"]{

/* id以div开头*/

    font-size: 3px;

}

[id*="div"]{

/* id包含div*/

    font-size: 3px;

}

img { 
　　 height: 100px; 
　　 opacity: 0.5;/* 透明度 */ 
} 
p{ 
　　 max-height: 10px;/* 最大高度。其余的会被其他元素遮盖。 */ 
}