HTML学习（四）

目录

文本样式

属性	作用
color	设置文本颜色
text-align	设置文本水平对齐方式
line-height	设置文本的行高

text-align的值有如下几种：

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

字体样式

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

背景样式

用于设置HTML元素的背景内容（颜色或图片）。
CSS背景属性主要包括以下几个：

1. background-color（设置背景颜色）
2. background-image（设置背景图片）
3. background-repeat（设置背景图片重复方式）
4. background-attachment（设置背景是否随页面滚动）
5. 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——点击状态，超链接被点击的那一刻状态。

超链接属性鼠标形状（cursor）的值如下：

盒子模型

简介

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

组成区域

最中间是内容区域。

1. 内容区域（content）
2. 内边距区域（padding）
3. 边框区域（border）
4. 外边距区域（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