CSS

Css引入

内嵌

<style>
    h1 {
        color : green;
    }
</style>

链接

<link rel="stylesheet" href="...">

导入: css样式

    <style>
        @import url("css/style.css");
    </style>

选择器：选择页面上某个或某类元素

基本选择器

• 标签选择器：选择所有此标签元素
• 类选择器：.class名称
• id选择器：#id名称
  不遵循就近原则，id > class > 标签

层次选择器

• 后代选择器

body p {
    backgroud: red;
}

• 子选择器：一个

body>p{
    background: red;
}

• 相邻兄弟选择器: .class类名+p

.active + p{
    backgroud: red;
}

• 通用兄弟选择器：.class类名~p 当前选中元素的向下的所有兄弟元素

.active~p {
    /* .. */
}

结构伪类选择器

ul li:first-child {
    /* ... */
}

ul li:last-child {
    /* ... */
}

p:nth-child(1) {
    /* ... */
}

p:nth-of-type(1) {
    /* ... */
}

属性选择器

• 属性名 = 属性值：绝对等于
• 属性名 *= 属性值：包含
• 属性名 ^= 属性值：以此为开头
• 属性名 $= 属性值：以此为结尾
• a[]{}

字体样式

• span标签：重点突出的用span套
• font-size: 字体大小
• font-family: 字体
• font-weight: 粗体

文本样式

• 颜色
• 对齐方式： text-align: center;
• 首行缩进: text-indent: 2em;
• 行高: line-height: 50px;
• 装饰: text-decoration: underline;

超链接伪类

/* 鼠标悬停颜色 */
<style>
    a:hover {
        /* ... */
    }
</style>

/* 鼠标悬浮的状态 */
a:active {
    /* ... */
}

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */

列表样式

list-style:

• none
• circle
• decimal
• square

背景样式：颜色、图片

div {
    backgroud-img: url("");
    backgroud-repeat: no-repeat;
}

盒子模型