带着你学前端三-CSS篇

认识css是做什么的

说css之前，我们先说html，html写出来的标签都会展示在页面上，但是哪些标签只能去控制什么元素以怎样的格式去呈现给用户，比如div是可以独占一行的元素，span，label是行内元素，input是表单元素等等，但是具体到他们的定位，宽度，高度，边框，内容颜色，背景颜色等等只用html就不可能去实现了，这时候就要用到css，所以对于css的作用大家可以理解成这样：它是一种为html元素布局，大小，边框，字体及颜色以及动效服务的样式语言。

css源码查看方式

在第一篇中说的f12查看源码，然后找到elements选项卡，在展示的内容中找到Styles

学习资料

菜鸟教程；CSS 教程 | 菜鸟教程

w3school css教程：CSS 基础语法

w3school css3教程：CSS3 教程

css主要作用及需掌握的重点

1.布局：

主要体现在定位和浮动

掌握属性：

>float，

>position

2.大小：

一方面主要体现在元素展示类型变换，比如块元素变为行内块元素，行内元素变为行块元素等等，另一方面体现为宽高。

掌握属性：

>display,

>height, min-height, max-height

>width, min-width, max-width

3.边框边距

这个是用来制定元素内外边距以及边框的大小，颜色以及形式

掌握属性：

>padding, margin

>border

4.字体及颜色

这个主要是制定元素的背景色，字体

掌握属性：

>background, background-color, background-image, background-position, background-repeat, background-size

>font-size，font-family，font-style, font-weight, color，

>text-decoration, text-align, text-overflow,及其他的text-*

5.动效

主要是实现元素的过渡效果，动画效果以及绘制效果

掌握属性：

>transform，transition，keyframe，以及svg相关属性

需掌握的选择器

作用

定位一个或者或者一类元素

以下html片段为例：


   这是一个标签
   这是span

01.id选择器

通过id来选择元素

语法：ID

栗子：myLabel

02.类选择器

通过类名来选择元素

语法：.Class

栗子：.divCls 选择类名为divCls的所有元素

03.标签选择器

语法：.LabelName

栗子：label 选择标签名为label的所有元素

04.复合选择器

语法：选择器1选择器2选择器3...

栗子：div.divCls 选择div标签中有divCls类名的元素

05.子元素选择器

语法选择器1 [连接符] 选择器2

栗子：div.divCls>label 选择有类名为divCls的div下直属的label标签

06.并集选择器

语法：选择器1，选择器2，选择器3...

栗子：div,label,span 选择所有的div，label和span元素

07.伪元素选择器

语法：选择器1:伪元素标识

栗子：div:before 选择div元素的before伪元素

学习注意点

1.心态放平衡，不要觉得简单

2.内容比较零碎，要学会分类记忆

3.从简单到复杂，循序渐进

4.不要全部去学习css的所有属性，挑重点是关键

5.多练习，苦练！css练个两三遍根本不起作用，10遍以上你才懂得css的奥妙。

6.不要想着css都是很简单的东西，学会去优化样式编写方式