CSS笔记：基础教程

/*选择器分组*/
h1, h2, h3 {}

/*后代选择器*/
p em {}

/*子元素选择器*/
p > em {}

/*兄弟选择器（选择位于其后具有相同父元素的元素）*/
h3 + p {}

/*id选择器*/
#id {}

/*类选择器*/
.class {}

/*属性选择器*/
[attr] {}

/*背景*/
body {
    background-color: lightblue;
    background-image: url("wallpaper.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; /*防止背景随文档滚动而滚动*/
}

/*文本*/
p {
    text-indent: 5%; /*缩进*/
    text-align: justify-all; /*水平对齐*/
    word-spacing: normal; /*单词间隔*/
    letter-spacing: normal; /*字母间隔*/
    text-transform: capitalize; /*字符转换（单词首字母大写）*/
    text-decoration: underline; /*文本装饰*/
}

/*字体*/
body {
    font-family: "MS Reference Sans Serif", monospace;
    font-style: italic;
    font-variant: small-caps; /*小型大写字母*/
    font-weight: bold; /*字体加粗*/
}

/*未被访问的链接*/
a:link {
    color: #FF0000;
}

/*已被访问的链接*/
a:visited {
    color: #00FF00;
}

/*悬停链接*/
a:hover {
    color: #FF00FF;
}

/*点击链接*/
a:active {
    color: #0000FF;
}

/*列表*/
ul {
    list-style-image: url("icon.png"); /*列表项图像*/
    list-style-type: circle; /*列表项标志*/
    list-style-position: inside;
}

/*表格*/
table, th, td {
    border-width: 1px;
    border-style: solid;
    border-color: lightblue;
    border-collapse: collapse; /*折叠边框*/
    text-align: left; /*表格文本对齐*/
    padding-left: auto; /*表格内左边距*/
    background-color: lightgreen;
}

/*轮廓*/
table {
    outline-color: lightpink;
    outline-style: dotted;
    outline-width: thick;
}

table {
    padding: 10%; /*内边距*/
    margin: 10%; /*外边距*/
}

/*相对定位*/
#information {
    position: relative;
    left: 10%;
    right: 10%;
}

/*绝对定位*/
#information {
    position: absolute;
    left: 10%;
    right: 10%;
}

/*浮动*/
#information {
    float: right;
}