css总结

css总结

何为css

CSS是级联样式表（Cascading Style Sheets）的缩写。它决定页面的内容该如何在屏幕上呈现。

css语法

两部分构成：选择器，以{}包裹的一条或多条声明。

选择器

元素选择器，id和class选择器。

css如何生效

外部样式表

新建如下内容的一个 HTML文件，在同一目录新建一个样式表文件mycss.css。

内部样式表

将样式放在 HTML 文件中。

内联样式

直接把样式规则直接写到要应用的元素中。

级联的优先级

1、内联样式
2、内部样式表或外部样式表
3、浏览器缺省样式

颜色, 尺寸, 对齐

颜色

采用颜色名称也可以使用颜色RGB16进制值。

尺寸

可以用 height 和 width 设定元素内容占据的尺寸。

对齐

可以简单的设置text-align属性为left, center, right即可。

盒子模型

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

定位

设置为静态定位position: static;
设置为相对定位position: relative;
设置为固定定位position: fixed;
设置为绝对定位position: absolute。

溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

不透明度

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

组合选择器

后代选择器

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

子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。

伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。