一、什么是CSS

1.定义

css是为web内容添加样式的代码
和HTML类似，CSS也不是真正的编程语言，甚至不是标记语言
CSS是一门样式表语言，用来选择性地为HTML元素添加样式

2.使用

为了让代码发挥作用，需要将CSS样式应用到HTML文档中

（1）创建style.css文件，设置样式

p{
  color:red;
}

（2）打开index.html文件，然后将下面的一行代码粘贴到文档头部（也就是<head>和</head>标签之间）

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

（3）查看页面

3.css规则集的详解

（1）选择器（Seletor）

HTML元素的名称位于规则集开始，它选择了一个或多个添加样式的元素。要给不同元素添加样式，只需要更改选择器。

（2）声明（Declaration）

一个单独的规则，如color:red;用来指定添加样式元素的属性

（3）属性（Properties）

改变HTML元素样式的途径（本例中color就是<p>元素的属性）

（4）属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（除了red之外还有很多属性值可以用于color）

（5）注意

除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）
在每个声明里要用冒号（:）将属性与属性值分隔开
在每个规则集里要用分号（;）将各个声明分隔开

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p{
 color:red;
 width:500px;
 border:1px solid black;
}

4.选择多个元素

可以选择多种类型的元素并为它们添加一组相同的样式，将不同的选择器用逗号分开。例如：

p,
li,
h1{
  color:red;
}

5.不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择HTML文档中给定的元素。下面是一些常用的选择器类型：

二、字体和文本

1.font-family属性指的是想要用的文本的字体，这个规则为整个页面定义了一个全局的基本字体和字体大小。由于<html>是整个页面的父元素，它里面的所有元素都继承相同的font-size和font-family。

html{
  font-size:10px;  /*px表示“像素（pixel）”:基础字号为10像素*/
  font-family:“Open Sans”,sans-serif; /*这应该是你从Google Fonts得到的其余基础*/
}

2.接下来为HTML主体内的元素(h1,<li>和<p>)设置字体大小。然后扩充下方的第二个规则集，为正文设置行高和字间距，从而提高页面的可读性。

h1{
 font-size:60px;
 text-align:center`;`
}

p,
li{
 font-size:16px;
 line-height:2;
 letter-spacing:1px;
}

三、CSS：一切皆是盒子

编写CSS时，就像围绕一个个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分HTML元素都可以被看作若干层叠的盒子。

1.盒子模型

padding(内边距)：是指内容周围的空间。
border(边框)：是紧接着内边距的线
margin(外边距)：是围绕元素边界外侧的空间

另外还使用了：

width：元素的宽度
background-color：元素内容和内边距低下的颜色
color：元素内容（通常是文本）的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式

2.更改页面颜色

html{
  background-color:#00539f;
}

3.文档体样式

body{
  width:600px;
  margin:0 auto;
  background-color:#ff9500;
  padding:0 20px 20px 20px;
  border:5px solid black;
}

width:600px;——强制页面永远保持600像素宽
margin:0 auto;——margin是影响元素上下方向的属性，而padding是影响元素左右方向的属性（auto是一个特殊值，它将可用的水平空间平均分配给左和右）
background-color:#ff9500;——指定元素的背景颜色
padding:0 20px 20px 20px;——给内边距设置了四个值来让内容四周产生一点空间。这一次不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。
border:5px solid black;——这是外边框的宽度、样式和颜色设置的值。本例为主体的所有侧面的5像素宽的纯黑色边框。

4.定位页面主标题并添加样式

h1{
 margin:0;
 padding:20px 0;
 color:#00539f;
 text-shadow:3px 3px 1px black;
}

text-shadow对元素的文本内容施加阴影。它的四个值是：

第一个像素值设置阴影与文本的水平偏移量：它横移的距离
第二个像素值设置与文本的垂直偏移量：它向下移动的距离
第三个像素值设置阴影的模糊半径：一个更大的值会产生一个更模糊的阴影
第四个值设置阴影的基色

5.图像居中

img{
  display:block;
  margin:0 auto;
}

四、学习收获

1.上一节课对HTML,CSS和JavaScript三大语言有了一定的联系了解，再进一步的学习了HTML。

2.这一节课深入学习了CSS。学习到了CSS是用来增加网页的样式的样式表语言。

3.也进一步学习了如何使用CSS，例如字体，文本和边框等样式如何设置，从而让页面更好看。

4.在接下来的课程会继续学习JavaScript的使用。

二、CSS的基础知识 ｜ 青训营