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 {
    /* inp标签的CSS样式 */
    font-size: 3px;
}

[title]/* 和上面的不同，这个是包含title的标签的css样式*/
 {
    font-size: 3px;
}

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