css知识归纳总结(1)

一.背景

1.背景颜色:

①英文单词 如:red;
②十六进制 如:#ffffff;
③rgb() 如:rgb(2,2,2);
④rgba() 如:rgb(2,2,2,0.5);

2.背景图片:

background-image:url('图片路径');

3.背景平铺:

background-repeat:后跟三种方式的值
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 不平铺

4.背景定位

background-position:第一个值 第二个值;
①第一个值是x轴的偏移位置 如 100px; 或者 left/right/center;
②第一个值是y轴的偏移位置 如 100px; 或者 top/bottom/center;

背景的复合写法:

background: 背景颜色 背景图片 背景定位 背景平铺;

5.背景大小(背景大小是css3的样式,IE6,7,8不认识)

background-size:第一个值 第二个值;
①第一个值 是x轴的大小 如100px,也可以是百分比
②第二个值 是y轴的大小,如100px,也可以是百分比
③cover 覆盖
④contain 包含,容纳

6.背景跟随 background-attachment:fixed;

二.边框
注意:边框占标签元素在页面中的大小

border   边框宽度 border-width:10px;
   边框样式
   solid 实线
   dashed 虚线
   dotted 点线（IE6不支持）
   边框颜色：
   如上四种方式
   边框的复合写法
   border:边框宽度 边框样式 边框颜色;

css3中圆角的位置设置（顺时针）

border-radius: 4中形式的值（可以为具体的值，也可以是百分比）
①一个值：表示所有的值都是这只的圆角
②两个值：一个值表示左上右下，一个表示右上左下
③三个值：左上 （右上，左下）右下
④四个值：左上 右上 右下 左下

三、边距(margin,padding)
内边距：内容到边框的距离，内边距占空间的大小

padding-top 上内边距
padding-right  右内边距
padding-bottom 下内边距
padding-left  左内边距
padding的复合写法：（顺时针）
①一个值：表示上下左右的内边距都是这个值
②两个值：一个值表示左右，一个表示上下
③三个值：上 （右，左）下
④四个值：上 右 下 左

外边距：快递和快递间的距离，外边距不影响标签元素的所占空间大小，但是会影响标签位置

margin-top 上外距
margin-right 右外距
margin-bottom 下外距
margin-left 左外距
复合写法：（同padding）

标签：就是在一个标签里面写另一个标签，用来确定父子级关系的

<div>
     <div></div>
</div>	

magin的小性子

1.第一层的子级的margin-top会穿透父级
     ①.给父级加边框
     ②.给父级加overflow：hidden
     ③.不要用子级的margin-top，用父级的padding-top代替：
2.兄弟间的margin-top和margin-bottom会叠压，但margin-left和margin-right不会

四、字体（font）（浏览器默认字体是16px,最小字体大小是12px）
1.字体大小(font-size）
font-size：

     1.具体数值：30px;
     2.长度单位(em):如2em->父级字体大小的倍数
     3.长度单位(rem):如2rem->html字体大小的倍数

font-weight:

     1. bold 加粗
     2. bolder 更粗
     3. 100~900之间的数值，100最细，900最粗

font-style(字体样式）：

     1.italic 斜体
     2.normal 普通
 注意：em，i字体本身是斜体

font-family(字体字族）

      1.simsun   宋体
      2.simhei  黑体
      3.kaiti  楷体
      4.microsoft yahei   微软雅黑

line-hieght(字体行高）

  line-height:可接具体数值，如：line-height:28px;
  1.行高包括：文字上面的距离+文字本身的字体大小+文字下面的距离
  2.测量方式：从一行文字的顶端，测量到下一行文字的顶端之间的距离

3.文本样式的复合写法：
font:字体加粗 字体样式 字体大小/行高 字体字族

font:30px /100px 'simhei';

字体颜色 (color) (颜色的四种样式）
文字对齐：text-align

     1.left 左对齐
     2.right 右对齐
     3.center 中间对齐

文本修饰
text-decoration:

         1.overline 上划线
         2. underline 下划线
         3. line-through 中划线
         4.none   没有划线

首行缩进 text-indent:

        1.具体数值：2px;
        2.具体的长度单位：2em

  单词间隙   word-spacing
  字符间隙   letter-spacing 

文本样式的继承
1.父级设置的文本样式，子级即使不设置，也享有相同的样式
2.a标签的color和text-decoration:underline不会继承父级的文本样式
文本水平居中 text-align:center;
文本竖直居中 line-height等于块的height 如height：100px；line- height:100px;