css样式效果大全-CSS基础样式百科（一）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

CSS样式是美化网页元素必不可少的一部分，也是后端开发中非常重要和基础的东西。 CSS的使用有两种方式，一种是写在单独的CSS文件上，最后引入到HTML页面中css样式效果大全，第二种也可以通过标签直接写在HTML文件上。 因为CSS样式极其丰富，明天我们先讲字体和图片。 字体和图像的一些基本 CSS 样式如下：

字体：

1.font-size：字体大小；

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

2.font-family：字体类型；

注：用它来改变字体样式，比如我们生活中常见的宋、宋、楷等。 不仅可以设置中文字体，还可以设置英文字体。 例如：字体大小：“粗体”； （设置英文字体），font-size：ajax； （可以设置中文字体不带双冒号）。 也可以同时设置中英文字体，但要注意前后顺序，先英文，后英文，英文状态下用冒号分隔，例如：font-family: ajax， “谷歌雅黑”；。

3.font-style：字体样式；

注意：字体样式有3个常用值。 第二个和第三个值有些相似，但名称不同。 如：font-style：normal；、normal（正常）、italic（粗体）、oblique（倾斜）。

4.font-weight：字体粗细；

注意：设置字体的粗细效果。 有两个值，一个是数字，另一个是英文短语。 数字范围为100~900。 数字越小，越薄，数字越大，越厚。 例如：字体粗细：300； 英文短语包括以下几种：lighter（较细的字体）、normal（普通字体，相当于（数值范围内的400）、bold（斜体）、bolder（较粗的字体），如：font-weight:bold;。

5.font：综合字体属性；

注意：上面学到的四个属性需要同时使用时，一一写起来太复杂，需要的代码太多，所以可以一起写。 并且要注意顺序，否则可能很难达到一些疗效。 顺序是：字体样式----字体粗细----字体大小----字体类型。 如：字体：italicbold24px“伟贝”；。

6.color：字体颜色；

注：设置字体颜色有三种形式，可以直接使用英文短语，如：color: red;; 也可以使用HTML颜色模式，例如； 颜色：#c0c​​0c0； 也可以使用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主要是为了方便估计。 由于1em代表1个字符的位置，所以2em就是我们最常见的文本段落，第一行缩进2个字符。 排版。 如：text-indent:2em;。

图片：

1.宽度：长度；

2.height：高度；

注：长度和高度我就不多说了。 上面文章也说了，在讲属性的时候，格式是一样的，使用方法也和上面几乎一样。

3.background-color：背景颜色；

4.background-image：背景图片；

注意：一种是背景色，设置整个网页的背景颜色，另一种是背景图片css样式效果大全，用图片代替背景，它们是不同的。

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

注意：如果你想让背景图片显示在页面的那个位置，就可以显示在那个位置，但是前提是你要使用这个属性，一般设置x轴（垂直轴）和y 轴（水平轴）同时。 如：background-position:300px400px;。

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

注意：设置背景图像的大小与设置普通图像的宽度相同。 如：background-size:100px200px;。

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

注意：默认背景图片会根据页面大小进行平铺，从而达到同时显示多个背景的效果。 如果您不希望它平铺，请使用此属性。 该属性常用的值有以下四种：repeat（同时沿x轴和y轴平铺）、repeat-x（仅沿x轴平铺）、repeat-y（仅沿y轴平铺）轴），无重复（不平铺）。

8.background：背景综合属性；

注意：和字体的综合属性一样，它是以上属性的集合，使用时要注意顺序。 使用顺序为：背景颜色----背景图片----背景平铺----背景位置。 具体用法如下：background: redurl("123.png") no-repeat300px200px;。