CSS1 | 青训营笔记

1 什么是CSS

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2 CSS语法

CSS基础语法
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。

比如 selector{property：value}

选择器通常是需要改变样式的HTML元素。

比如 h1{color:red; font-size:14px;}
h1是选择器，color和font-size是属性，red和14px是值。

注意：

如果定义不止一个声明则需要用分号将每个声明分开。例如：p{text-align:center;color:red}
如果值为若干单词，则要给值加引号： 例如：p {font-family: "sans serif";}

CSS高级语法
选择器的分组

h1,h2,h3,h4,h5,h6 {
  color: green;
}

继承及其问题：根据 CSS，子元素从父元素继承属性。

body { font-family: Verdana, sans-serif; }

3 创建CSS

CSS 创建样式表分为三种情况：
内部样式表

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;}

行内式(内联样式)

外部样式表(外链式)

样式优先级：内联样式>内部样式>外部样式 三种样式表区别：

行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。

内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。

外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。