CSS核心属性

一、文本类属性

1.字体类型

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

eg:  font-family:"微软雅黑","黑体";

注：a) 多个字体之间用逗号分隔，浏览器会优先识别字体1，如果找不到，识别字体2，如果列出的所有字体都无法识别，显示浏览器默认字体

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

c) 特殊字体一律用图片

2.文本大小

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

eg:  font-size:18px;

注：a）设置字体大小的单位有px，em，rem，pt

b）字体大小一般设置偶数不设置奇数

c）浏览器默认字体大小为16px

d）font-size:medium; 等价于 font-size:16px;

3.文本加粗

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

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

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

4.文本倾斜

语法：font-style:normal(去掉倾斜，常规显示)|italic(倾斜)|oblique（倾斜）;

eg:  em,i{font-style:normal;}

5.文本是否大小写

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

注：此属性只对英文起作用

6.font复合写法

语法：font: style variant  weight  size  family;

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

上述写法代表字体大小为12px，行高为字体大小的1.5倍即18px，字体类型为微软雅黑

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

b) 字体大小和字体类型不能互换位置，必须放在最后

7.文本颜色

语法：color:颜色值;

注：颜色值的三种设置方法：

a) 十六进制写法：

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

b) rgb模式写法

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

c) 颜色值单词

color:red;

8.水平对齐方式

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

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

b) 设置文本，图片等行内元素水平居中，是通过给父元素设置text-align为center来实现

9.行高

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

注：a)当line-height只设置数值不加单位时，代表行高为字体大小的多少倍

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

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

10.文本修饰

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

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

11.首行缩进

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

注：设置为正值时向后缩进，负值向前缩进，当设置较大负值时，类似于隐藏的效果

12.字符间距

语法：letter-spacing:数值+单位;

注：允许设置负值，主要用来设置汉字与汉字，英文字母与字母之间的间距

13.词间距

语法：word-spacing:数值+单位;

注：该属性只对英文起作用，允许设置负值

14.文本转换大小写

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

注：只对英文起作用

15.长单词换行

语法：word-wrap:normal|break-word;

16.强制在一行显示

语法：white-space:normal|nowrap|pre|pre-wrap|pre-line;

normal 默认值，忽略空白符和换行符，自动换行

nowrap 强制在一行显示，忽略空白符和换行符

pre 保留空白符和换行符，并且强制在一行显示

pre-wrap 保留空白符和换行符，自动换行

pre-line 合并空白符，保留换行符，自动换行

17.垂直对齐方式

语法：vertical-align:baseline(默认值)|top(顶部对齐)|middle(中部对齐)|bottom(底部对齐);

注：a）vertical-align应用在表格单元格内容垂直对齐方式设置
b）定义行内元素的基线相对于该元素所在行的基线的垂直对齐

二、列表类属性

1.列表符号类型

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

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

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

3.设置列表符号的位置

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

4.列表属性简写方式

语法: list-style: type  image  position;

eg:  ul,ol,li{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:left|center|right|数值  top|center|bottom|数值;

注：a）background-postion有两个属性值，第一个值代表水平方向，第二个值代表垂直方向

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

c) 当两个值都为center时，可以省略第二个值

5.背景属性简写方式

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

eg:  background:red url(img/1.jpg)  no-repeat  right bottom;

注：a） 所有省略的属性值都采用默认值

b）简写方式中多个属性值之间用空格隔开

6.背景图固定

语法：background-attachment:scroll(默认值,滚动)|fixed(固定);

注：设置为fixed时，当容器出现滚动条时，背景图固定不跟随滚动条滚动

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

a）jpg:有损压缩格式，靠损失图片本省的质量来减小图片体积，适用于颜色较丰富的图像

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

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

四、浮动属性

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

注：给元素设置float后，会让元素脱离默认的文档流，在一行显示

五、清除浮动

语法：clear:none(默认值)|left(清除左浮动)|right(清除右浮动)|both(清除左浮动和右浮动);

注：如果某个元素前边存在浮动，影响到了该元素的正常显示，给受影响的元素添加clear属性