Web|后端同学也要知道的CSS基础知识扫盲总结

目录

1 CSS 是什么？

2 CSS 规则

3 CSS 使用方式

4 CSS选择器

（1）标签名选择器

（2）Id选择器

（3）class选择器 

（4）CSS 扩展选择器

5 CSS 样式作用

6 CSS盒子模型

---

1 CSS 是什么？

CSS(Cascading Style Sheets)，它是一种用来表现 HTML（标准通用标记语言的一个应用）
或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS 是能够做到网页表现与内容分离的一种样式设计语言。
相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，
支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

2 CSS 规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector{ declaration1; ... declarationN; }
每条声明由一个属性和一个值组成：h1 { color : red; }

3 CSS 使用方式

4 CSS选择器

（1）标签名选择器

    
    


    
一级标题。

（2）Id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
	HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
	以下的样式规则应用于元素属性 id="para1":
	实例:
	#para1
	{
	text-align:center;
	color:red;
	}
	注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

（3）class选择器
 

class选择器，以一个点号显示：
	.center {text-align: center}
	在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
	注：类名的第一个字符同样不能使用数字！
	
id 选择器与 class 选择器有很大的不同
	一个页面内不能出现相同的ID；再就是ID也是后台开发人员会经常用的，
所以前端开发人员应该尽量少的使用。

（4）CSS 扩展选择器

 

5 CSS 样式作用

背景：CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
文本：文本颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
字体：定义文本的字体系列、大小、加粗、风格和变形。
链接：以不同的方法为链接设置样式。

以及列表，表格的样式。

6 CSS 盒子模型