CSS

层叠级联样式表。在html中使用<link>引入css文件

<link rel="stylesheet" href="css/style.css"/>

实现内容和表现分离，网页结构表现统一，可以实现复用。

CSS语法

CSS规则由两个主要部分构成：选择器，以及一条或多条声明。CSS声明总是以分号结束，声明总以大括号括起来。

CSS选择器

基本选择器

标签选择器

标签选择器会选择到界面上所有这个元素

h1 {
    color: black;
}

类选择器

类选择器以点开头，在html标签中定义标签属于的类，类选择器可以复用

.welcome{
    color: #1f1f7d;
}

Id选择器

Id选择器以井号开头，在html标签中定义标签的id，id选择器不能复用、

#sub_button{
    color: #8f09da;
}

选择器优先级

Id选择器 > 类选择器 > 标签选择器

高级选择器

层次选择器

后代选择器

在某个元素后面的所有代的元素都使用同样的模板

body p{
    background: #e0d26d;
}

子选择器

在某个元素后面的一代使用同样的模板

body>p{
    background: #e0d26d;
}

相邻兄弟选择器

和某元素同一代的相邻元素，只有一个，向下匹配

.button + p{
    color: red;
}

通用选择器

全部弟弟选择器

.welcome ~ p {
    background: black;
}

结构伪类选择器

ul li:first-child{
    color: #000;
}

属性选择器

a[href="http://www.bing.com"]{
    color: #000;
    background: brown;
}