前端基础——CSS常见样式

先简单介绍一下常见的css样式，如下：

width 宽度  height 高度

最基础的一个css属性，可以描述各种元素的宽度，如html，body，div，img，table等。

background 背景  

一个复合属性，属性值包括颜色、图片、重复方式、位置定位、是否滚动。可以直接填写，也可分成单个属性：

background:url(bg.jpg) center 0 no-repeat gray fixed;

<pre name="code" class="css" style="font-size: 12px;">background-attachment: fixed; //背景是否滚动
background-color: gray; //背景颜色
background-image: url(bg.jpg);  //背景图
background-repeat: no-repeat;// 背景图是否重复
background-position: center 0px; //背景图位置

background-attachment: fixed; 背景是否滚动

margin 外边距、border 边框、padding 内边距

详细介绍请看盒子模型，现在说几点特殊的，

先说一说常用的，比如居中：

就可以这样写：

margin-left:auto;
margin-right:auto;

margin（外边距）有如下几点问题：

1、上下外边距会叠压；（比如div1下外边距和div2上边距会重合并不会简单相加）
2、父子级包含的时候子级的margin-top会传递给父级；（父级的内边距替代子级外边距只包括margin-top，其他属性没有这种问题）

文本设置

font-size  文字大小 

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

font-family 字体

值	描述
family-name generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。 默认值：取决于浏览器。
inherit	规定应该从父元素继承字体系列。

color 文字颜色 

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

line-height 行高

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

text-align 文本对齐方式

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

text-indent 首行缩进

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值

font-weight 文字着重

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

font-style 文字样式

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

text-decoration 文本修饰

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

letter-spacing 字母间距

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

word-spacing 单词间距

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。