这是我参与「第五届青训营」伴学笔记创作活动的第2天
本堂课带领我们了解了什么是CSS，以及CSS的语法和一些常用的属性，还有布局等等。

什么是CSS

CSS是Cascading Style Sheets的缩写，即层叠样式表。通过CSS，我们可以修改元素的样式，使得页面更加美观。如下图是没有css的一个简单的网页：

假如这是一篇文章，我们可能会更加希望该文章的标题和内容能够在网页中居中显示并且使标题能够以更加显眼的颜色显示，这时候我们可以通过CSS来完成这部分的需求，以下便是加入了CSS的网页（该例子只是简单举例，实际情况的CSS可能会更加复杂）：

代码如下：
html：

<div>
    <h1>这是一个标题</h1>
    <p>这是一段内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
</div>

css:

div{
    text-align: center;
}
h1{
    color: deepskyblue;
}

html在这里不过多赘述，其中有一个div标签，div标签包裹着h1标签和p标签，分别表示标题和段落，在css中，我们设置了两个元素的样式，第一个是div的，设置后将div中的内容居中显示；第二个是h1的，设置后可以将标题颜色改为蓝色。

CSS基本结构

在上述的CSS语句中（以div为例），div是选择器，指定我们需要修改的某个标签的样式，语句由大括号包裹，然后语句通常为"属性:属性值;"，即

选择器{
    属性1:值;
    属性2:值;
}

选择器也分为很多种，有标签选择器，类选择器等等，在实际情况中我们的网页可能会有很多div标签，如果我们只想选中其中一个div来修改样式，我们就要使用其他选择器来选中该元素然后修改样式。

外链：外链是将CSS存入到一个文件里，然后再通过link来引入,href指定CSS文件的路径

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

嵌入：嵌入是将代码直接嵌入到页面里，以style标签包裹

<style>
    div{
        text-align:center;
    }
</style>

内联：内联是将样式直接写在标签内

<div style="text-align: center"> </div>

虽然内联看起来更加简单方便，但是在我看来不利于编写代码，并且会使代码显得十分臃肿难看，这里推荐使用外链来写CSS，当然其他的也都会在实际情况中使用。

CSS选择器可以让我们来选择到我们想要设置样式的元素，其中包括类选择器、id选择器、标签选择器和属性选择器。

类选择器，在类名前加“.”。如下：
html:

<div class="myDiv"></div>

css:

.myDiv{
    color:red;
}

一个标签可以包含多个类，不同的类用空格隔开。如下：

<div class="class1 class2 class3"></div>

id选择器，在id前面加“#”。如下： html:

<div id="myDiv"></div>

css:

#myDiv{
    color:red;
}

每个id是唯一的，一般来说是不会重复的，每个标签如果要设置id的话是不会重复设置相同的，所以我们也可以通过id来精准选择到我们想要设置样式的元素。标签选择器，直接输入标签名。如下： html:

<div></div>

css:

div{
    color:red;
}

设置后，所有的div都会有该样式。
属性选择器，通过某些元素具有的属性来选择。
我们也可以来对选择器进行组合，如下：

<div>
    <div>
        <p>test</p>
    </div>
</div>

div div p{
    color:red;
}

如果对于某个元素，我们既用标签选择器来设置了它某个属性的样式，又用了类选择器和id选择器来设置了相同属性的不同的样式，那么哪个会成功实现呢？这和选择器的优先级有关，对于以上的选择器，id选择器优先级最高，类选择器其次，最后是标签选择器，这个可以动手实践一下，实践出真理。

对于元素的属性就像html中的标签一样特别多，如宽度width，高度height等等，我们只需记住常用的即可，其他的可以碰上再说。

CSS的内容还有很多，如边距、布局等等，这些在开发中也经常用到，作为小白的我也正在学习中。。。