本章主要介绍介绍一下CSS的基本语法以及其定位器。

什么是CSS

CSS指层叠样式表，其主要作用是定义HTML的元素如何显示。

我们知道HTML主要关注内容，也就是说要展示给我们的是什么样的东西，可以把它比做TXT的文档。

但是还要在HTML里面把格式什么的都加上，当然是可以，但是稍显冗杂，而且不易于复用格式。所以我们可以把格式的设定单独剥离出来，存储在样式表中。

这样HTML主要关心内容，CSS主要关心格式，更为灵活。

我们可以举一个例子：

下图为一个没有任何格式的HTML页面。

image.png

如果我们加上了样式一：

对body、标题、表格、链接等进行了设置

body
{
font-size:75%;
font-family:verdana,arial,'sans serif';
background-color:#FFFFF0;
color:#000080;
margin:10px;
}

h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}

th {background-color:#ADD8E6;}

ul {list-style:circle;}
ol {list-style:upper-roman;}

a:link {color:#000080;}
a:hover {color:red;}

效果为：

image.png

如果我们更换一种样式，则效果将会改变：

[图片上传失败...(image-a04073-1518859977532)]

所以使用CSS的意义在于更为灵活。我们完全可以通过更换CSS的方式，实现不同的显示效果。

CSS的基础结构

上面我们说了CSS其实就是一个单独的文件，里面指明了HTML的某种元素应该是什么样的格式。

如下图，h1代表的是HTML中的标题，我们可以称为Selector，也叫选择器。

后面大括号里面的称为声明，也就是对h1这种元素的格式的声明。

每条声明通过键值对的形式呈现，比如color:blue，color代表着属性，而blue则为属性要设置的值。

image.png

选择器

id选择器、class选择器、元素选择器

我们知道要表示HTML的中的某个元素的格式，首先需要选中它，也就是需要使用Selector选择器，主要有三种基本的方式：

• id选择器

• class选择器

• 元素选择器

id选择器可以为标有id的HTML元素指定样式。

比如：

#para1
{
    text-align:center;
    color:red;
}

class选择器用与描述一组元素的样式，在HTML中以class属性表示。

class选择器与id选择器的区别在于：class可以在多个元素里面使用。
比如

.center {text-align:center;}

下面代代码表示所有p元素中使用class = "center"的格式：

p.center {text-align:center;}

元素选择器又叫标签选择器，使用标签名作为selector名。

比如：

p{
  font-style:italic;
}

使用一个表格来总结

表达式	说明
p{text-indent:3em;}	HTML选择器
.note{font-size:small;}	类选择器
#main{text-indent:3em;}	ID选择器

组合选择符

我们知道class的名称可能在HTML代码中有若干个，但是我们希望能够更精确的确认某个class，怎么办呢？

可以使用组合选择符，主要有

• 包含选择器

• 子选择器

• 兄弟选择器。

下面一一介绍：

• 包含选择器：语法格式为a b {……}

div p {color : yellow}；

对应的HTML为：

<div>
<p>yellow</p>
</div>

也就是a包含着b，即b是a的子元素。

• 子选择器：
  同样也就是目标选择器在某个选择器的内部。那与上述的包含选择器有何区别？
  子选择器可以嵌套更深，也就是可以是div的孙子及以上。

  语法格式为：A>B{……}
  比如：

div>p{
  color:red;
}

HTML代码：

<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

可以看出，p是div嵌套了很多层以后的标签。

• 后续兄弟选择器

  所有<div> 元素之后的所有相邻兄弟元素<p>

div~p{
color:red;
}
```
HTML代码

```
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
```

image.png

• 相邻兄弟选择器

  指的是紧接在另一个元素后的元素，而且两者有相同的父元素的情况。
  这个时候可以使用相邻兄弟选择器。
  语法为：A+B{……}
  比如

div+p
{
    background-color:yellow;
}

可以选择出div后面的那个p，而不是div里面的 p

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>

image.png

• 分组

  如果有很多相同的样式的元素，可以使用分组

h1{color:green;}
h2{color:green;}
p{color:green;}

可以使用逗号分隔：

h1,h2,p{
color:green;
}

总结如下：

表达式	说明
div a	子节点
div#containner>ul	选id为container的div的第一个子元素
div~p	选与div相邻的所有p元素
div+ p	选div后面的第一个p元素

属性 选择器

• 属性选择器

  比如如下的代码是把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

• 属性和值选择器

下面的例子改变了标题title='runoob'元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

总结如下：

表达式	说明
a[title]	有title属性的a元素
a[href*="jobole"]	选所有href属性包含jobbole的
a[href^="http"]	以http开头
a[href$=".jpg"]	以.jpg结尾
input[type=radio]:checked	选择radio的元素
div:not(#container)	id非container的div属性