css核心属性

一、字体类属性

1.字体类型

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

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

注：

• font-family可以设置多个字体，多个字体之间用逗号分隔
• 中文字体要加双引号，英文字体由多个单词组成也要加双引号
• 特殊字体一律用图片

2.字体大小

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

eg: h1{font-size:32px;}

注：

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

• 字体一般设置偶数不设置奇数

• font-size:16px; 等价于 font-size:medium;

3.字体加粗

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

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

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

4.字体倾斜

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

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

5.文本是否大小写

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

注：只对英文起作用

6.font复合写法

语法：font:字体大小 字体类型;

eg: font:12px "黑体";

注：

• 在复合写法中，多个属性值之间用空格隔开

• size和family不能互换位置，同时也不能和其他属性互换位置，只能放在末尾

• font:12px/1.5 "宋体"; 代表字体大小为12px，行高为字体大小的1.5倍，字体类型为宋体

7.字体颜色

语法：color:颜色值;

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

• 十六进制写法

color:#000; color:#fff;

• rgb模式

color:rgb(0,0,0); color:rgb(255,255,255);

• 使用颜色值单词

color:black; color:white;

二、文本类属性

1.水平对齐方式

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

注

• justify两端对齐只对英文起作用

• 要让文本，图片等行内元素水平居中时，通过给父元素添加text-align:center;来实现

2.行高

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

注：

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

• line-height不允许设置负值

• line-height设置数值不加单位时，行高为字体大小的倍数

3.文本修饰

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

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

4.首行缩进

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

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

5.字符间距

语法：letter-spacing:数值+单位; (允许设置负值)

注：主要用来设置中文字与字，英文字母与字母之间的间距

6.词间距

语法：word-spacing:数值+单位; （允许设置负值）

注：只对英文起作用

7.文本是否大小写

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

注：只对英文起作用

8.长单词换行

语法：word-wrap:break-word|normal(默认值);

注：主要用于长单词换行或较长的url地址换行

9.强制在一行显示

语法：white-space:nowrap;

10.文本流控制

语法：layout-flow:horizontal(从左到右)|vertical-ideographic(从上到下);

11.垂直对齐方式

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

注：

• 此属性可设置table单元格框中的内容的垂直对齐方式
• 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

三、列表类属性

1.列表符号样式

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

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

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

3.设置列表符号的位置

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

4.列表属性简写方式

语法：list-style:none; (去掉列表符号)

eg: ul,ol{list-style:none;} 或 li{list-style:none;}

四、背景类属性

1.背景颜色

语法：background-color:颜色值;

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

2.背景图

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

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

• 插入图片：数据型图片，需要频繁更换的图使用img标签引入
• 背景图：用来装饰网页，在一定时期内不需要更换的图片，使用background引入
  并且在背景图上可以显示任意的文字和图片

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

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

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

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

3.背景平铺属性

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

4.背景图位置

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

注：

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

• background-position的属性值有两个，第一个值代表水平方向，第二个值代表垂直方向

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

5.背景属性简写方式

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

eg: background:blue url(flower.jpg) no-repeat right bottom;

6.背景图固定

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

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

扩展：

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

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

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

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

五、浮动属性

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

注：

• 设置浮动可以让自上而下排列的元素脱离默认的文档流，在一行显示
• 如果只是需要在一行排列设置左浮动即可，如果由很明显的左右显示效果，设置左浮动和右浮动

六、清除浮动

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

注：当某个元素的前面存在左浮动或右浮动，对该元素的正常显示造成影响，那么给受影响的该元素添加clear属性

扩展：
图片默认有空隙，解决方案：

• 给img标签添加float属性