CSS学习总结

CSS（级联样式表）

CSS决定页面内容在屏幕的显示方式。

CSS语法

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

h1(选择器) {color(属性):blue(值);font-size(属性):12px(值);}

说明：

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

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

id选择器前有#号。

class选择器前有.号。

CSS生效

将样表式文件（后缀为.css）放到HTML文件同一目录中。

也可以将样式放在HTML文件中，称之为内部样式表。

将样式规则写到要运用的元素之间，称之为内联样式。

级联优先级：

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

颜色，尺寸，对齐

使用颜色名称或RGB16进制设定前景或背景颜色。

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

设置text-align属性为left, center, right``使文本对齐。

盒子模型

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

边框与边距

border-bottom设置底部边框。

border-radius设置边框圆角。

border-left设置左边边框。

padding:**px设置边距。

定位

• static 静态
• relative 相对
• fixed 固定
• absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

溢出

overflow属性来处理这些溢出的部分。

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

浮动

设置float属性让元素向上下左右移动。

要使后面的元素不浮动可以用clear:both样式来清除。