CSS知识点总结

一、CSS简介

CSS 是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。
CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。

CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。

二、CSS基础选择器

1、标签选择器

标签名{ 
    属性1: 属性值1;  
    属性2: 属性值2;  
    属性3: 属性值3;  
    ... 
 }  

2、类选择器

.类名 {     属性1: 属性值1;   
    ... 
 }  
 CSS:
 .red { 
   color: red; 
 } 
 HTML:
  <div class=‘red’> 变红色 </div> 

记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用.

3、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

#id名 {     属性1: 属性值1;   
    ... 
 }  
 #nav { 
   color:red; 
 } 

id 选择器和类选择器的区别
① 类选择器（class）可重复被多人使用
② id 选择器只能被一人使用
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

4、通配符选择器

 * {     margin: 0;     padding: 0; }  

三、属性

1、字体属性

字体系列、大小、粗细、和文字样式（如斜体）

 body {  
  font: font-style  font-weight  font-size/line-height  font-family; 
} 

->使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
->不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

2、文本属性

Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

p {
	color: red;
	text-align: center;
	text-decoration: none;
	text-indent: 2em;//缩进
	line-hight: 20px;
}

四、CSS样式表

1、内部样式表

 <style> 
    div { 
      color: red; 
      font-size: 12px; 
    } 
 </style> 

2、行内样式表

<div style="color: red; font-size: 12px;">好好学习，天天向上</div> 

3、外部样式表

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用.
引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用 标签引入这个文件。

<link rel="stylesheet"  href="css文件路径">