这是我参与「第四届青训营」笔记创作活动的第2天

一、重点内容

认识css
介绍选择器
理解布局

二、详细知识点

CSS

CSS是啥？

全称Cascading Style Sheet（层叠样式表）；
定义网页的样式（美化网页）。

在页面中如何使用CSS？

外链

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

嵌入

<style>
  li{margin:0;list-style:none;}
  h1 {color: maroon;margin-left: 40px;}
</style>

内联

<p style="color:red">内联</p>

选择器

简述选择器

选择器叫Selector，它的用途就是用来找出在HTML页面上我们想要样式化的元素。

通配符选择器

通配符选择器经常用“*”表示，我们可以从字面意思理解，“通”有通用的意思，所以在所有选择器中，它的范围是最广泛的（所有元素），但不建议用。

格式：*{属性1：属性值1；属性2：属性值：2；......；属性n：属性值：n;}

* {
    margin: 0 ;
    padding: 0;
}

标签选择器

标签选择器从它的名字来看，就是按照标签的名称来分类，为页面中某一类标签指定一类的CSS样式（所有HTML的标记名都可以当作标签选择器，用标签选择器定义的样式，只要是在当前页面中，这个类型的所有标签都有效）。

格式：标签名{属性1：属性值1；属性2：属性值：2；......；属性n：属性值：n;}

p {color: black;}

id选择器

id选择器用“#”表示，后面跟id名。id选择器不像类选择器一样可以定义多个属性值。（元素id值只有一个，绝对不能用在多个标记中，JavaScript对这个相当敏感）。

格式：#id名{属性1：属性值1；}

#nav {color: black;}

类选择器

类选择器使用“.”表示，后面跟类名。（类名的第一个字符不能是数字，还要严格区分大小写，一般使用小写英文字符）

格式：.类名{属性1：属性值1；属性2：属性值：2；......；属性n：属性值：n;}

    .black {color: black;}

属性选择器

属性选择器为具有特定属性的HTML元素样式，这个不只是限制在class属性和id属性（只有在规定了!DOCTYPE 时，IE7和IE8才可以支持属性选择器）。

格式：[标签名称]{属性1：属性值1；属性2：属性值：2；......属性n：属性值：n;}

input[type="text"] 
    {color: black;}

伪类

伪类以“:”开头，还需要和css中的选择器一起使用，但是不用区分伪类名称的大小写。
伪类属于选择器中比较特殊的一种状态，可以通过伪类设置元素的动态状态，比如悬停（红包雨）......

 选择器名称  伪类名称
    ↓          ↓
selector:pseudo-class {
    property: value;}

布局

布局是什么？

布局就像修房子，根据你是想要一室一厅还是两室一厅来修建。

布局图（盒子模型）

内容区（content）
内容区是盒子的中心，存放文本、图片之类的主要内容，可以用width、height来表示内容区的宽和高。
内边距（padding）
内边距处在内容区和边框之间的位置，可以用padding-top、padding-right、padding-bottom、padding-left与padding来表示内容区和边框之间的距离。
边框（border）
边框处在内边距和外边距之间的位置，可以用“三种属性”：border-width、border-style、border-color，也可以用“四个方向”：border-top、border-right、border-bottom、border-left，以及border 来设置边框的样式。
外边距（margin）
外边距在盒子的最外面，可以通过margin来设置外边距。

初始值

css中，每一个属性都有初始值，如果不知道这个属性的初始值，就可以用initial关键字重置为初始值。

em { color: initial; }

三、总结

选择器太多了，所以只找了几个经常用的。

理解CSS | 青训营笔记