HTML基础笔记【三】

Css属性：

一、文字属性

1. 文字颜色 color
2. 文字大小 font-size:数字+单位;

• 文本修饰

1. 去掉下划线：text-decoration:none;

• 文本属性

1. 文本水平对齐 text-align:left/center/right
2. 文本首行缩进 text-indent:2em;
3. 文本行高 line-height

注意：

想要文本在水平方向居中，用text-align属性

想要文本在垂直方向居中，用line-height属性

• 列表属性

1. 去掉项目符号 list-style:none;

• 背景属性

1. 背景颜色 background-color:
2. 背景图片 background-image:url(图片路径);
3. 背景平铺 background-repeat:repeat-x;(水平方向平铺)

repeat-y;（垂直方向平铺）

no-repeat;（不平铺）

1. 背景位置 background-position: 先水平，后垂直

水平方向属性值：左left/中center/右right

垂直方向属性值：上top/中center/下bottom

数字表示方式：

百分比表示方式：

盒模型 <div></div>

盒子必须有宽高

宽 width

高 height

边框 border（可以改变盒子大小）

边框宽度 border-width

边框颜色 border-color

边框样式 border-style:solid(实线)、dashed(虚线)、dotted(点线)

边框是个复合元素，三者属性值可以写在一起，但是三者缺一不可，顺序没有 关系

上边框 border-top:颜色 宽度 样式;

右边框 border-right:颜色 宽度 样式;

下边框 border-bottom:颜色 宽度 样式;

左边框 border-left:颜色 宽度 样式;

没有边框 none;

内填充：内容到边框的距离padding（可以改变盒子大小）

padding:10px; 一个值表示四周都有相同距离的内填充

padding:10px 20px; 第一个值表示上和下，第二个值表示右和左

padding:10px 20px 30px; 上/右左/下

padding:10px 20px 30px 40px; 上/右/下/左

上内填充 padding-top:

右内填充 padding-right

下内填充 padding-bottom

左内填充 padding-left

外边距：元素与元素的距离 margin

margin:10px;一个值表示四周都有相同的外边距

margin:10px 20px;上下/右左

margin:10px 20px 30px;上/右左/下

margin:10px 20px 30px 40px;上/右/下/左

上外边距 margin-top

右外边距 margin-right

下外边距 margin-bottom

左外边距 margin-left

盒子宽=定义的宽度+左/右内填充+左/右边框

盒子高=定义的高度+上/下内填充+上/下边框

去掉元素自带边距

*{

padding:0;

margin:0;

}

让盒子在水平方向居中，前提盒子必须有宽高

div{

margin:0 auto;

}

浮动 float

浮动出发点：让元素在用一行排列

float:left; 左浮动

float:right; 右浮动

clear: both; 清除浮动