html5 基础学习 （欢迎探讨）

1.文本大小属性

文本属性值为——font

文本大小属性：font-size

设置文本大小时，属性只要为加上单位（到目前为止只有html内部操作无需使用单位可有可无）——单位通常是px

格式为

font-size：20px；

浏览器中默认字体大小是16px

浏览器是可以设置比12px更小的字体—但是浏览器中显示的最小字体为12px（可设置）

（除了px以外还有以下常见单位）

em 需要与父级进行比较—首行缩进—

rem 非常重要的单位(第四周写移动端) 是相对于根元素html进行计算的

pt 磅 硬件设备

2.文本类型

font-family

中文加上单引号

英文：属性值只有一个时候可以不加，有多个属性值（备胎字体）需要加单引号

3.字体加粗和倾斜

字体加粗（b、strong）

属性：font-weight

属性值（可以用100—900，有变化的区间在600—900）（bold—加粗、bolder—更粗的、normal 正常的 表示清除加粗的默认样式）

字体倾斜（i、em）

属性：font-style

属性值（italic—倾斜的 oblique—更倾斜的 normal 正常的 表示清除加粗的默认样式）

4文本行高

属性：line-height — 基线对齐

当行高与容器高度一致的时候 会在垂直方向居中

当行高大于高度 文本会往下移动

当行高小于高度 文本会往上移动

（注意：支队单行有用，当出现换行时，并且是对于单行文本，需要调整数值）

5.文本的符合属性

复合属性（简写）

属性：font

属性值：font-weight文本加粗、font-style文本倾斜、font-size文本字体大小、font-family文本字体风格、line-height行高

使用方法如下

格式—font：weight style size/line (位置不可更换) family

- font-weight和font-style可写可不写 两者位置是可以互换的

- font-szie/line-height固定写法 不可以省略或者是换位置

- font-family不可以省略 即使没有设置项 默认为微软雅黑

6.文本颜色

属性—>直接使用color便可

属性值—>有多个（rgb）（以#开头 后面加上六位字符—>0~9A~F）

rgba（透明度 0，0，0，alpha）只会设置单个属性透明

opacity：0-1 控制所有颜色都会变成半透明

7.文本属性的设置

前端的坐标轴X轴从左到右为正

Y轴从上到下为正

首行缩进 属性：text-indent

属性值：数值+单位

首行缩进也可以使用负值，但是只针对文本第一行

字间距 letter-spacing

词间距 word-spacing

例如

8.文本修饰

属性：text-decoration

属性值： underline 下划线

overline 上划线

line-through 删除线 /del

none （重要）清楚默认下划线—例如清楚a标签自带的下划线

9.列表属性—列表属性的使用 ul>li ol>li dl>dd+dt

定义列表符号样式 lias-style-type

属性值：disc 实心圆 默认值

circle 空心圆

square 实心方块

none 清楚列表默认样式

使用图片作为列表符号 list-style-image

属性值：url（图片当前地址）

定义列表符号位置 属性：list-style-pisition

属性值：inside 小符号放入内部

outside 小符号放置在外部

重点——列表符号是有兼容问题的，在低版本的浏览器中有些符号是无法显示出来的

需要记住的属性 list-style-type-none可直接写成list-style-none

10边框属性

边框的属性实现（ html属性中的边框 ，默认样式为实线，颜色为黑色，大小需要手动设置）

在浏览器中想看见边框需要以下几个条件

border-width 边款的高度以及厚度

border-style 边框的样式（solid-实线）（dashed虚线）（dotted电线）（double双实线）

border-color 边框的颜色英文单词 十六进制 rgb、rgba 中间可加上（top、bottom、left、rihgt）从而控制四个方向边框的颜色

让某一个方向上的边框小时（border-方向：none/0）可以通过transparent将边框透明化

11背景属性

背景颜色属性background-color / background

背景图片

属性 ： background-image

属性值：url（）

当容器大于背景图片的时候 背景图片默认会在容器中铺满(平铺)

当容器等于背景图片的时候 背景图片完整覆盖

当容器小于背景图片的时候 背景图片只会显示一部分

img结构图片 是： 图片标签是一个HTML结构 属于一个实体

背景图片 ： 属于css样式，需要容器支持

背景平铺属性 background-rapeat

属性值：rapeat-x / rapeat-y（X轴和Y轴）

no-rapeat

背景图片的固定 属性：background-position

属性值：横向 left rihgt center

纵向 top bottom center

也可以使用数值 分前后 先X轴 后Y轴

复合/简写

属性：background

属性值：颜色 图片 平铺 位置 固定