常用CSS样式

1、字体样式

font-family: "方正舒体";   /* 字体类型 ："隶书"、"楷书"   【必须是系统拥有的文字库】*/
font-size: 50px;          /* 字体大小  像素：px  */
font-style: italic;       /* 字体风格 【normal:默认值，标准文档样式  italic:斜体】*/
font-weight: 300;         /*字体粗细   【bold：定义粗体字符  100-900定义由细到粗的字符】*/

2、文本样式

 /* 设置文本颜色 */
 color: red;       /* 颜色名称直接定义 */
 color: #362596;    /* 16进制表示颜色 */
 color: rgb(32,250,50);   /* 三原色表示颜色 */

/* 设置元素水平对齐方式 */
 text-align: left;   /* 靠左对齐 */
 text-align: right;  /* 靠右对齐 */
 text-align: center;  /* 中心对齐 */

/* 设置首行文本的缩进 */
text-indent: 20px;   /* 像素：px */

 /* 设置文本的行高 */
line-height: 20px;   /* 像素：px */

/* 设置文本的装饰 */
text-decoration: none;        /* 标准文本 */
text-decoration: underline;    /* 定义文本下划线 */
text-decoration: overline;     /* 定义文本上划线 */
text-decoration: line-through;   /* 定义穿过文本的一条线 */

3、鼠标样式（cursor）

cursor: default;      /* 默认光标 */
cursor: pointer;      /* 超链接指针 */
cursor: wait;         /* 等待状态*/
cursor: help;         /* 指示可用的帮助 */
cursor: text;         /* 指示文档 */
cursor: crosshair;    /* 鼠标呈十字状 */

4、背景样式

/* 背景颜色 */
background-color: red;       /* 颜色名称直接定义 */
background-color: #362596;    /* 16进制表示颜色 */
background-color: rgb(32,250,50);   /* 三原色表示颜色 */

/* 背景重复方式 */
background-repeat: no-repeat;   /* 不重复 */
background-repeat: repeat-x;    /* 水平重复 */
background-repeat: repeat-y;    /* 垂直重复 */
background-repeat: repeat;      /* 默认重复 */

/* 背景图片地址 */
background-image:url(图片路径) ;  /* 【图片绝对路径/图片相对路径】 */

/* 背景定位 */
background-position:10px left  top ;
/*  像素：px
水平方向：left、center、right
垂直方向：top、center、bottom
 */

5、列表样式

/*  无序列表列表前标记 */
list-style-type: disc;        /* 实体圆心 */
list-style-type: circle;      /* 空心圆 */
list-style-type: square;      /* 实体方心 */
list-style-type: none;        /* 无列表标记 */

/* 有序列表标记 */
list-style-type: 1/a/A/i/I;     /* 数字，小/大写字母，小/大写希腊数字 */

list-style-image: url(图片路径);  /* 自定义列表标记为图片 */

list-style-position: outside/inside;    /* 列表标记定位：（outside/inside） */

6、CSS伪类(hover)：用于向某些选择器添加特殊的效果

link(单击访问前)==》visited(单机访问后)==》hover(鼠标悬浮其上)==》active(单机未释放)

7、盒子模型之边框

（1）

边框样式（border-style）

border-top-style: none;     /* 上边框样式 -------  无边框 */
border-bottom-style:solid ;  /* xia边框样式 -------  实线边框 */
border-left-style: dashed;   /* 左边框样式 -------  虚线框 */
border-right-style: dotted;   /* 右边框样式 -------  点状边框 */
border-style: double;         /* 四个边框样式 -------  双线边框 */

 （2）边框颜色（border-color）

border-top-color: red;     /* 上边框颜色*/
border-bottom-color:rgb(32,250,50) ;  /* 下边框颜色 */
border-left-color: #362596;   /* 左边框颜色*/
border-right-color: #cdaf37;   /* 右边框颜色 */
border-color: rgb(123, 71, 22);         /* 四个边框颜色 */

（3）边框粗细 

border-width     (像素：px)

8、盒子模型之内外边距

（1）内边距（padding） 

box-sizing 属性

box-sizing:content-box;       盒子的实际宽高仅应用于元素内容，不包含内边距和边框（撑开）

box-sizing:border-box;        盒子的实际宽高包含元素内容，内边距和边框（不撑开）

（2）外边距（margin） 

9、display属性

属性值：

none：设置元素隐藏

inline：元素显示为内联（行内）元素

block：元素显示为块级元素

inline-block：元素显示为行内块元素

10、（float）浮动属性 

float:left;     元素向左浮动

float:right;   元素向右浮动

float:none;   元素不浮动（默认值）

11、clear 属性 

clear:left;     清除左浮动

clear:right;   清除右浮动

clear:none;   清除所有浮动

12、overflow 属性

overflow:auto;   自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容

overflow:scroll;  内容会被修剪，但是浏览器回显示滚动条

overflow:hidden;  内容会被修剪，并且超出内容是不可见的

overflow:visible;   默认值，内容不会被修剪，会呈现在盒子之外

 13、position 属性

一、fixed 固定定位

            (1) 使用了固定定位的元素【会】脱离标准文档流

            (2) 基于 浏览器窗口 进行偏移

            (3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

二、relative 相对定位

            (1) 使用了相对定位的元素【不会】脱离标准文档流

            (2) 基于 自身原来在网页中位置 进行偏移

            (3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

三、absolute 绝对定位

            (1) 使用了固定定位的元素【会】脱离标准文档流

            (2) 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

            (3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移