CSS初入门：CSS中常用到的样式（个人学习用）

文本属性渲染

文本颜色

1、在css中通过color属性来修改文字颜色。
格式：color: 值;

2、通常颜色设置有四种方式
方式一：英文单词指定颜色
红色：red；蓝色：blue；黑色：black。。。

方式二：rgb(x,x,x)
rgb其实就是三原色r(red 红色) g(green 绿色) b(blue 蓝色)的缩写
在这种格式中：第一个数字用来设置红色显示的程度，第二个数字用来设置绿色显示的程度，第三个数字用来设置蓝色显示的程度，每一个数字的取值范围是0~255之间，0代表不发光，255代表颜色最深的情况，如：

当红、绿、蓝的值一样的时候显示的是灰色
当三个值越小就越偏向黑色，越大就越偏色浅色（白色）

方式三：rgba（x,x,x）
和rgb一样，只是多了个a，区别就是这个多出来的a是设置透明图的，取值范围0~1，取值越小越透明

方式四：十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是RGB，十六进制中是通过每两位表示一个颜色，例如：
#FFEE00中FF表示r，EE表示g，00表示b

文字斜体

语法：font-style: 取值;
取值：
（1）normal：正常的
（2）italic：倾斜的

文字粗细

格式：font-weight: 取值;
取值：
（1）bold 加粗
（2）bolder 比加粗还粗
（3）lighter 细线，默认
也可以使用数字来取值，范围是100~900之间整百的数字（400等同于normal；700等同于700）

文字大小

格式：font-size: 取值;
取值：像素，单位px（pixel）
如：

注意： 通过font-size设置大小一定要带单位， 也就是一定要写px

特殊字体

格式：font-family: 字体
例如：

补充：
（1）如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加
（2）设置的字体必须是用户电脑里面已经安装的字体
（3）如果设置的字体不存在，那么系统会使用默认的字体来显示（默认是宋体）
（4）给字体设置备选方案：
格式：font-family:字体1，备选方案1，备选方案2…
（5）给中文和英文分别单独设置字体：
中文字体可以处理英文，但英文字体不能处理中文，所以当给界面汇总的英文单独设置字体，那么英文的字体必须写在中文字体的前面。
（6）并不是说中文字体的名称就一定是中文命名的，例如：宋体（SimSun）、黑体（SimHei）等

文本属性缩写格式
font:style weight size family;
font:italic bold 10px '楷体';
size属性一定要放在family属性的前面

文本装饰

格式：text-decoration:underline;
取值：
underline下划线
line-through 删除线
overline 上划线
none 啥也没有，通常用于去掉超链接的下划线

文本水平对齐

格式：text-align:取值
取值：
（1）left 左
（2）right 右
（3）center 中

文本缩进

格式：text-indent:2em;
在这里单位1em表示缩进一个文字的宽度
例如：

在css中单位长度用的最多的是px、em、rem，这三个的区别是：
一、px是固定的像素，它相对于显示器屏幕的分辨率而言是固定的，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布。
三、em是相对于其父元素来设置字体大小的，em会继承父级元素的字体大小，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

字体大小转换

作用：用于文使文本显示为大写或小写
格式：text-transform:取值
取值：
（1）none，防止任何改变
（2）uppercase，将文本转换为大写
（3）lowercase，将文本转换为小写
（4）capitalize，将所有单词的第一个字母转换为大写
（5）full-width，转换为类似于一个等宽字体

字体阴影

格式：text-shadow:h-shadow v-shadow blur color;
取值：
（1）none：取消所有阴影
（2）h-shadow：水平阴影的位置，允许负值。必需
（3）v-shadow：垂直阴影的位置，允许负值。必需
（4）blur：模糊的距离。可选
（5）color：阴影的颜色。可选
例如：

特点：
h-shadow越大，水平方向上阴影离文字的距离越远
v-shadow越大，竖直方向上阴影里文字的距离远远
blur越小，阴影越清晰，越大越模糊
如果h-shadow、v-shadow为负值，那么阴影就会出现在文字的上方和左边

列表样式

默认样式

（1）ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em)
（2）li 元素没有设置默认的空白（行间距）
（3）dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距
（4）dd 元素的margin-left为40px(2.5em)
（5）p 元素的margin-top，margin-bottom为16px(1em)

列表项标志类型

格式：list-style-type: 取值;
取值：
（1）none，无任何显示
（2）disc，实心圆
（3）circle，空心圈
（4）square，实心方块
（5）decimal，有序数字
（6）lower-roman，小写罗马数字，E.g. i, ii, iii, iv, v…
（7）upper-roman，大写罗马数字，E.g. I, II, III, IV, V…
（8） decimal-leading-zero，有序数字，E.g. 01, 02, 03, … 98, 99

设置列表项标志出现的位置

格式：list-style-position: 取值;
取值：
（1）outside，列表项标志出现在主块框的外部
（2）inside，列表项标志出现在主块框的内部
如下：

自定义设置列表项标志

格式：list-style-image: 取值
取值：url()，指定图标位置

其他样式

line-height

设置文本的行高，取值为绝对单位或者相对单位

例如：设置内部标签div的行高为30px

设置内部标签div的行高为50px，与外部div标签的高一样时，文字将会垂直居中

display*

作用：显示方式的切换
格式：display: 取值;
取值：
（1）inline 行内显示，宽高无效
​（2）block 块级显示，宽高有效
​（3）inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素，使得行内显示同时宽高有效
​（4）none 不显示，不占据屏幕空间
​（5）flex 伸缩盒布局

display:none样式表示元素结点的根本销毁

visibility

作用：显示与隐藏
格式：visibility: 取值;
取值：
（1）hidden，隐藏，占据屏幕空间（只是切换了元素的css样式为隐藏不可见，元素结点依然存在）
（2）visible，显示

display:none与visibility:hidden的区别：
display:none 不占页面空间（因为会从根本上销毁标签），会引起重绘和回流，该元素及其子元素都将被隐藏，
visibility:hidden 占据原先页面空间，只引起页面重绘，该元素的子元素可以设置

重绘与回流：
回流：元素的大小或者位置发生改变时（也就是页面布局发生改变时），会触发重新布局导致渲染树重新计算布局和渲染
重绘：只改变自身样式，不影响其他元素
注意：回流一定会触发重绘，重绘不一定会回流

opacity

作用：透明度，0~1之间取值，取值为0的时候隐藏，占据屏幕空间。

overflow

作用：内容溢出处理

hidden，超出内容隐藏（内容会被修剪，并且其余内容不可见）
auto，超出时产生滚动条（由浏览器定夺，如果内容被修剪，就会显示滚动条）
scroll，内容会被修剪，浏览器会显示滚动条以便查看其余内容
visible，内容不会被修剪，会呈现在元素框之外

cursor

作用：指定鼠标光标样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

---

两个好用的图标库

Font Awesome
阿里巴巴iconfont图标库