周四的博客

CSS 文本样式
color    设置文本颜色
text-align    设置文本水平对齐方式
line-height    设置文本的行高

text-align的值有如下几种：

center——居中对齐
left——向左对齐
right——向右对齐

CSS字体样式

font-family    设置字体类型
font-size    设置字体大小
font-style    设置字体风格
font-weight    设置字体粗细
font    设置所有字体属性

CSS背景样式
用于设置HTML元素的背景内容（颜色或图片）。

CSS背景属性主要包括以下几个：

background-color（设置背景颜色）
background-image（设置背景图片）
background-repeat（设置背景图片重复方式）
background-attachment（设置背景是否随页面滚动）
background-position（设置背景图片位置）

背景图片重复方式（background-repeat）的值
repeat    表示背景图片重复（默认）
no-repeat    表示背景图片不重复
repeat-x    表示背景图片水平重复
repeat-y    表示背景图片垂直重复

背景图片位置（background-position）的值

left top——左上
left center——左中
left bottom——左下
center top——中上
center center——中中
center bottom——中下
right top——右上
right center——右中
right bottom——右下

超链接样式
CSS中可以根据超链接元素的状态，设置不同的样式属性。

超链接状态有四种：

（1）a:link——正常状态，未访问过的超链接状态；

（2）a:visited——已访问过状态，用户已访问过的超链接状态；

（3）a:hover——鼠标放上状态，当用户鼠标放在超链接上时的状态；

（4）a:active——点击状态，超链接被点击的那一刻状态。

 

盒子模型
简介
在HTML页面中，每一个元素都是一个规则的矩形，因此每一个元素都是由一个盒子模型来 表示。

组成区域
最中间是内容区域。

内容区域（content）
内边距区域（padding）
边框区域（border）
外边距区域（margin）
内边距区域
定义元素边框与元素内容之间的空间。
格式：选择器名{内边距标识：数值1 数值2 数值3 数值4；}
数值1-4依次代表上、右、下、左的内边距数值。

如：#box{padding:50px 40px 50px 40px;}

内边距标识有：1、padding-top
2、padding-right
3、padding-bottom
4、padding-left

边框区域
设置元素边框的宽度、样式及颜色。
格式：选择器名{边框标识：边框宽度 边框样式 边框颜色；}
如：#box{border:2px solid red;}

 边框标识的类型

类型    作用
border-top    设置上边框
border-bottom    设置下边框
border-left    设置左边框
border-right    设置右边框

边框样式的值（常用）
none    无边框
solid    实线边框
dotted    点线边框
dashed    虚线边框
double    双线边框
外边距区域
定义元素边框以外的空间（上、右、下、左）。
格式：选择器名{外边距标识：数值1 数值2 数值3 数值4；}
如：#box{margin:20px 30px 40px 50px}
外边距标识有：1、margin-top
2、margin-right
3、margin-bottom
4、margin-left

设置CSS元素水平居中方式为

margin：0 auto

定位
CSS中position规定了元素的定位方式。CSS通过设置position属性使HTML元素脱离正常文档流布局，从而使元素可以显示在任意位置。

position属性
relative    相对定位
absolute    绝对定位
fixed    固定定位
static    无特殊定位，对象遵循HTML定位规则

相对定位
不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为次元素的原文档流的位置。

绝对布局
脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素（position不能为static），否则为body文档本身。

浮动
float属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧。

float设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。

float属性常用的值

left    靠左浮动
right    靠右浮动
none    不浮动
注意： float属性与position属性会相互影响，设置时应多注意。

清除浮动
格式：

clear:both