前端基础学习笔记(css)1.3

一、字体类属性

1.字体类型

语法：font-family:字体1,字体2;

eg: body{font-family:"微软雅黑";}

注：
a) 当设置多个字体时，用逗号分隔

b) 中文字体建议加双引号，英文字体由多个单词组成也建议加双引号

c) 特殊字体一律用图片

2.字体大小

语法：font-size:数值+单位;

eg: font-size:32px;

注：
a) 浏览器默认字体大小为16px

b) 字体一般设置偶数不设置奇数

c) 常用字体大小单位为px

3.字体加粗

语法：font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100~900;

eg: h1,h2,h3,h4,h5,h6{font-weight:normal;}

注：当设置为数值时，100–500为常规字体，600–900为加粗字体

4.字体倾斜

语法：font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

eg: em,i{font-style:normal;} 去掉倾斜

扩展：文本大小写

语法：font-variant:normal(常规字体)|small-caps(小型大写字母字体);

注：只对英文起作用

5.font复合写法

语法：font: weight style size family;

eg: font:600 italic 14px "宋体";

注：
I.font复合写法中，多个属性值之间用空格隔开

II.字体大小和字体类型不能和其他属性互换位置，必须放在最后

III.字体大小和字体类型本身也不能互换位置

eg: font:12px/1.5 “微软雅黑”;

注：含义为字体大小为12px，行高为字体大小的1.5倍，字体类型为微软雅黑

6.字体颜色

语法：color:属性值;

注：color属性值的三种写法：

a) 十六进制写法

color:#000; (黑色) color:#fff; (白色)

b) rgb模式写法

color:rgb(0,0,0); (黑色) color:rgb(255,255,255); (白色)

c) 颜色值单词

color:black;

二、文本类属性

1.水平对齐方式

语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);

注：
a) justify两端对齐只对英文起作用

b) 当需要图片居中时，给图片所在的容器（父元素）去设置text-align:center;

2.行高

语法：line-height:数值+单位;

注：
a) 当行高等于容器高时，可以实现单行文本在定高容器中垂直居中

b) 当属性值为数值时，代表行高为字体大小的几倍

eg: line-height:3; 行高为字体大小的3倍

c) line-height不允许设置负值

3.文本修饰

语法：text-decoration:none(去掉文本修饰)|underline(下划线)|overline(上划线)|line-through(删除线);

eg: a{color:black; text-decoration:none;}
a:hover{color:blue; text-decoration:underline;}

4.文本缩进

语法：text-indent:数值+单位;

注：正值向后缩进，负值向前缩进

5.文本大小写

语法：text-transform:none|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

注：只对英文起作用

三、列表类属性

1.列表符号类型

语法：list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号);

2.使用图片作为列表符号

语法：list-style-image:url(图片路径);

3.列表符号位置

语法：list-style-position:outside(外)|inside(里);

4.列表属性简写方式

语法：list-style:类型 图片 位置;

eg1: list-style:none url(1.jpg) inside;

eg2: list-style:none; 去掉列表符号

四、背景类属性

1.背景色

语法：background-color:颜色值;

注：属性值的设置方法同color属性值

2.背景图

语法：background-image:url(图片路径);

注：在网页中有两种图片形式：插入图片和背景图

a) 插入图片

凡是数据型的图片，需要实时更新的，都使用img标签插入图片

b) 背景图

用来装饰网页的某个版块，一定时期内不需要更换的图片，使用背景图的方式。我们可以在背景图上显示其他的文字内容和图片

注：背景图的三种显示原则

a) 当背景图尺寸等于容器尺寸时，背景图恰好显示在容器中

b) 当背景图尺寸小于容器尺寸时，背景图默认平铺，直至铺满整个容器

c) 当背景图尺寸大于容器尺寸时，只能显示容器范围以内的背景图

3.背景平铺属性

语法：background-repeat:repeat(平铺)|no-repeat(不平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.背景图位置

语法：background-position:值1 值2;

注：第一个值代表水平方向，第二个值代表垂直方向，即

background-position:left|center|right|数值 top|center|bottom|数值;

注：当设置为数值时，水平方向，向右为正，向左为负，垂直方向，向下为正，向上为负

5.背景属性简写方式

语法：background: 背景色 背景图 背景平铺 背景图位置;

eg: background:black url(1.jpg) no-repeat right bottom;

注：background简写方式中多个属性值可以互换位置，建议按照这样的顺序来写

扩展：背景图固定，不跟随滚动条滚动，设置如下：

background-attachment:scroll(默认值)|fixed(固定);

扩展：网页中常见的三种图片格式：

a) jpg: 有损压缩格式，靠损失图片本身的质量来减小图片体积，适用于色彩丰富的图像。

b) gif: 有损压缩格式，靠损失图片的色彩数量来减小图片体积，支持动画，支持透明

c) png: 有损压缩格式，靠损失图片的色彩数量来减小图片体积，支持透明

五、浮动属性

语法：float:none(默认值)|left(左浮动)|right(右浮动);

注：当需要让自上而下排列的元素在一行显示时，通过给这些元素添加浮动来实现

---

div和span

1.div

语法：<div class="***"></div>

作用：用来划分版块

2.span

语法：<span></span>

注：span没有固定的表现形式，给它设置样式后，才会产生视觉上的变化

---