Cascading Style Sheet 层叠样式表

内联样式

又称 行间样式 / 行内样式

  1. <div style="width: 100px; height:100px"></div>

内部样式表

<head>
...
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }
</style>
</head>

外部样式表

<link rel="stylesheet" type="text/css" href="css/index.css" />

CSS权重

优先级

  • 内联样式 > 内部样式表 > 外部样式表 | | 权重 | | —- | —- | | * | 0 | | 标签，伪元素 | 1 | | class,属性,伪类 | 10 | | id | 100 | | 内联样式 | 1000 | | !important | 正无穷 |

选择器 Selector

selector {
   propName: propValue;
   propName: propValue;
}


/*id选择器*/
#

/*类选择器*/
.

/*标签选择器*/
div

/*通匹符选择器*/
*

/*属性选择器*/
[id="box"]{

}
[href]{

}

/*派生选择器*/
先祖选择器 子选择器{

}

/*并列选择器*/
h1.title{
    color:blue;
}

.box.box1{

}