CSS 基本样式大全（一）

CSS 样式是美化网页元素必不可少的一部分，同时也是前端开发 里面十分重要且基础的东西。CSS使用方式有2种，一种是写在单独的 CSS 文件里面，最后引入到 HTML 页面里面，第二种也可以直接通过标签写在 HTML 文件里面。由于 CSS 样式及其丰富，今天我们先讲字体和图片的。一些字体和图片基本的 CSS 样式如下所示：

字体：

1.font-size：字体大小；

注意：字体大小单位种类繁多，常见的单位有：px、pc、pt、cm、em、rem等等，但是常用的一般是 px（像素）、cm（厘米）、rem（相对布局单位）这三个，这个 css 样式通常用来为网页中的字体设置大小。

2.font-family：字体类型；

注意：使用它可以改变字体的样式，如我们生活中常见的 黑体、宋体、楷体 等等。除了可以设置英文字体外，它还可以设置中文字体。例如：font-size："宋体"；（设置中文字体）、font-size：ajax；（设置英文字体时可以不带双引号）。也可以同时设置中英文字体，但要注意前后顺序之分，英文在前，中文在后，中间用英文状态下的逗号区隔开，例如：font-family：ajax，"微软雅黑"；。

3.font-style：字体风格；

注意：字体风格样式常用的值有三个，第二个和第三个效果有点相似，只是叫法上有所不同。例如：font-style：normal；，normal（正常）、italic（斜体）、oblique（倾斜）。

4.font-weight：字体粗细；

注意：为字体设置粗细效果，值有两种，一种是数字，一种是英文单词。数字的范围为100~900，数字越小越细，数字越大越粗，例如：font-weight：300；，英文单词有以下几个： lighter（更细的字体）、normal（正常的字体，等同于数值范围里的400）、bold（粗体）、bolder（更粗的字体），例如：font-weight：bold；。

5.font：字体综合属性；

注意：上述学过的4个属性，当需要同时用倒时，一个一个写过于复杂，代码量偏多，可以并在一起写。但是要注意先后顺序，不然可能导致部分效果无法实现。先后顺序为：字体风格----字体粗细----字体大小----字体类型。例如：font：italic  bold  24px  "草书"；。

6.color：字体颜色；

注意：为字体设置颜色，三种方式，可以直接使用英文单词，例如：color：red；；也可以使用 HTML 颜色模式，例如；color：#c0c0c0；还可以使用rgb色彩模式，例如：rgb（0，255，255）；。

7.text-align：文本水平对齐；

注意：设置某一标签文本的水平对齐，有三个值。left（左对齐）、right（右对齐）、center（水平居中对齐）。

8.vertical-align：文本垂直对齐；

注意：设置某一标签文本的垂直对齐，有三个值。top（上对齐）、bottom（下对齐）、middle（垂直居中对齐）。

9.line-height：行高；

注意：为两行或两行以上的多行文本设置行间距。通常以  px 或者是 rem 为单位，例如：line-height：30px；。

10.text-indent：首行缩进；

注意：文本设置首行缩进，通常以 em 和 px 为单位，这里使用 em 主要是为了好计算，因为1 em 代表1个字符的位置，2em 就是我们最常见的首行缩进2字符的文本段落排版。例如：text-indent：2em；。

图片：

1.width：宽度；

2.height：高度；

注意：宽度和高度这两个就不多说了，前面一篇文章讲属性的时候也说过，格式是一样的，使用方式也和前面几乎一样。

3.background-color：背景颜色；

4.background-image：背景图像；

注意：一个是背景颜色，为整个网页设置背景颜色，另一个是背景图片，把背景替换为一张图片，他们不一样。

5.background-position：背景图像位置；

注意：背景图像你想让它在页面的哪个位置显示，它就可以在哪个位置显示，但前提是你要使用这个属性，通常同时设置 x 轴（横轴）和 y 轴（纵轴）。例如： background-position：300px  400px；。

6.background-size：背景图像大小；

注意：为背景图像设置大小，就像为普通图片设置宽高一样。例如：background-size：100px  200px；。

7.background-repeat：背景图像是否平铺；

注意：默认背景图像会根据你页面的大小，从而产生平铺方式，造成多背景同时显示的效果。若你不想让它平铺，需使用这个属性。这个属性常用的值有下面4个：repeat（同时延 x、y 轴平铺）、repeat-x（只延 x 轴平铺）、repeat-y（只延 y 轴平铺）、no-repeat（不平铺）。

8.background：背景综合属性；

注意：跟字体的综合属性一样，都是上述几个属性的集合，但是要注意使用顺序。使用顺序为：背景颜色----背景图像----背景平铺----背景位置。具体用法如下所示：background：red  url("123.png") no-repeat  300px  200px；。