CSS基础知识筑基 _生活百科

文章插图
01、CSS 简介CSS 指层叠样式表 (Cascading Style Sheets)，对HTML网页内容进行统一外观样式设计和管理，给网页进行各种装饰，让她变得美观，是HTML的化妆师。（Cascading ：/k?s?ke?d??/（水）倾泻；连续传递；串联。cascade 的现在分词）

主要优点：

美化页面：提供丰富的外观设计能力，大量的样式属性。
可复用：可以统一管理HTML页面的样式，可复用。
CSS3可以实现网页样式、内容分离，并对网页元素实现像素级的样式管理。

1.1、知识框架

文章插图
详见前端技术路线图
1.2、CSS 是怎么工作的？下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

文章插图
当浏览器遇到无法解析的 CSS 代码会发生什么？——什么也不会干，继续解析下一个CSS样式。
02、CSS基础知识2.1、基础语法CSS样式由 选择器名花括号 {n个申明(属性:值);} 组成。

文章插图

选择器就是用来选择要改变样式的HTML元素。
属性与值用半角冒号:分开，半角分号;结尾，分割多组键值。一般建议一行一个键值对。
如果属性值有多个词组，需加上引号保护起来。
不合法、错误的申明会被忽略（跳过），CSS总是怎么宽容！

代码风格：

小写：一般都采用小写，字母开头，字母、数字、下划线组成。
短线分割：当选择器里是类名时，且类名由多个单词组成，则各个单词之间下划线_、或中划线-分割。多用中短线：background-image
当使用并集选择器时，各个元素竖着写。

注释：/*注释，可换行*/

注意空格：一定注意关键字（and、or）、符号（括号()，加+、减-）之间的空格，不然有些时候会有些莫名其妙的问题。其中加+、减-会首先当做正负数符号

2.2、CSS 的简写属性简写属性就是将同一主题的属性的定义集中在一起，空格分割，如background、font、border、margin、padding 。

margin-top: 1px;margin-left: 2px;margin-bottom: 3px;margin-left: 4px;/* 上面四个属性的简写形式，同时也覆盖他们样式*/margin: 1px 2px 3px 4px;border-top-color: blue;border-color: red;/* 四个边颜色简写，覆盖上面的样式 */border-width: 2px;border-style: dotted;border: green solid 5px; /* 综合边框样式的简写，上面所有边框的样式 */

覆盖：没有指定的值会被设置为它的初始值。这就意味着，?它将会覆盖之前设置的值。
顺序：简写属性的值本身没有顺序要求，但值类型一样时，就需要注意对应简写属性的规则了。

2.3、CSS的使用描述示例行内样式在元素的style属性上写css样式。?缺点：代码耦合度高，样式不复用，不利于维护，尽量不用。<p style="color: blue;">p文字</p>内部（内嵌）样式在样式<style>标签中定义css样式，只在当前页面内有效。?缺点：多个页面之间无法复用。<style> p{color: blue;} </style>外部样式（推荐）单独css文件定义样式，html的head中