CSS基础（样式）

样式

颜色设置

颜色给值的方式有背景颜色和字体颜色，使用方法为“#6个字符”。

透明度设置：

• 使用rgba（0~255 ,0~255 ,0~255 ,0_{1）设置，a代表透明度，值为0}1，其中0是完全透明，1是完全不透明，只针对当前设置的颜色的内容透明
• 使用opcity设置元素的透明度，其中0是完全透明，1是完全不透明

display

display可以设置以下三种属性:

• block块元素：独占一行，可以设置宽高，可以设置内外边距
• inline行内元素：宽度由内容撑起，可以与其他行内元素或者文本同行显示，不能设置宽高，不能设置上下的内外边距
• inline_block行内块元素：行内元素,块元素的特点都有，可以让块元素同行显示

display: block;/*块元素*/
display: inline;/*行内元素*/
display: inline-block;/*行内块*/

背景样式

• 设置元素的背景颜色：

background-color:#ff0000;

• 设置元素的背景图像：默认情况下，背景图像进行平铺重复显示

background-image:url("paper.gif");

• 设置背景图片是否平铺：平铺（repeat），不平铺（no-repeat）等

background-repeat: no-repeat;

• 设置背景图片大小：

background-size: 500px;

• 设置背景图片位置：像素值，百分比，方向位置的单词(left right top bottom center)

background-position: center;  /*默认x轴  y轴默认居中*/

• 设置背景图片跟随滚动问题：
  • scroll：跟随滚动
  • fixed：固定，不跟随滚动，固定相对于窗体的边界

background-attachment: fixed;

• 复合属性：

background: url("image/image.png") no-repeat right top #FF00FF  scroll;

文本样式

样式	备注
color	字体颜色
font-size	字体大小
font-style	字体样式，正常为normal，斜体为italic
font-family	字体设置
font-weight	加粗
text-decoration	设置下换线|中划线|上划线
text-indent	首行缩进，使用em为单位，代表当前内容几个字符的大小
text-align	文本居中，针对块元素

居中样式

• text-align：行内块元素，块元素中的内容在元素中水平对齐方式
• line-height：行高，利用行中的内容在行高中垂直居中的特点，让文本的行高与块元素，行内块元素等高，就能实现文本在元素中垂直居中

浮动

浮动

浮动（float）：元素向指定方向移动，当遇到其他浮动元素或者浏览器的边界的时候停下，css中的浮动是为了让块元素同行显示。

float:left;/*向左浮动*/
float:right;/*向右浮动*/

注：浮动会半脱离文档流，即块元素一旦浮动，让出文档流的位置，后面的块元素会占据前面浮动元素的位置。其中文档流指的是块元素从上到下，行内元素从左到右。

清除浮动

清除浮动使用clear，让元素的某一个方向没有浮动元素。

clear:left;/*当前元素的左边不能有浮动元素*/
clear:right;/*当前元素的右边不能有浮动元素*/
clear:both;/*当前元素的两边都不能有浮动元素*/