CSS学习总结

CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
选择器：
id 选择器

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。
class 选择器

定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

CSS 如何生效

有三种方法：外部样式表，内部样式表，内联样式
外部样式表
一般我们会在项目目录下建一个文件夹如css专门存放样式表文件
引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。
内部样式表
将样式放在 HTML 文件中，这称为内部样式表。
内联样式
所谓内联样式，就是直接把样式规则直接写到要应用的元素中
这就涉及样式的优先级问题，从高到低分别是：
内联样式
内部样式表或外部样式表
浏览器缺省样式

尺寸

可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等
例如

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

定位

position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对

溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

static静态解释

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移

fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。

浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局，如我们希望有以下的效果：
让图片向右浮动即可，代码如下：

个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。

组合选择器

后代选择器
实例：
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。

段落1、2、3都将有黄色的背景，而段落4、5没有
子选择器
以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。

虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常

不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：

总结

CSS是用于网页内容的修饰。比如在网页上的内容需要展示一些不同的效果，字体变色，图片移动等。这是就需要css来完成。但对于css我们要熟记它的各种语法，对于各种语法的应用要熟练掌握，虽然看上去不是很难，但是入门简单，要熟练应用困难。要从根本去理解各种语法应用的原理。才能让网页的设置更加美观。