css入门知识总结一

本文是基于css3的。

css的类型

内联式

内联式就是把css代码直接写到现有的html标签的开始标签中。
例子：

<p style="color:red; font-size:12px">这里文字是红色。</p>

嵌入式

嵌入式css必须写在之间，并且一般情况下嵌入式css式样式写在标签内

外部式

就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

<link href="base.css" rel="stylesheet" type="text/css" />

rel=“stylesheet” type=“text/css” 是固定写法不可修改。

三种类型的优先级，相同权值前提下：
就近原则：
内联式 > 嵌入式 > 外部式
嵌入式>外部式的前提是
嵌入式的位置一定在外部式的后面。

      <!--外部式，字体设置为蓝色-->
    <link href="style.css" rel="stylesheet" type="text/css">
       <!--嵌入式--> 
    <style type="text/css">
    span {
        color: red;
    }
    </style>

注意：
外部式 嵌入式，显示的是嵌入式

    <!--嵌入式-->
    <style type="text/css">
    span {
        color: red;
    }
    </style>
    <!--外部式-->
    <link href="style.css" rel="stylesheet" type="text/css">

嵌入式 外部式，显示的是外部式

背景

• background-origin
  设置位置的起始位置
  background-origin ： border-box | padding-box | content-box;
  从边框，从内边距（默认值），从内容
  
  只有在background-repeat 属性为no-repeat时，这个属性才有效。

• background-color

background-color:rgba(100,120,60,0.5);

参数G，R，B，A，
GRB是颜色参数，0-225，A是透明度参数，取值在0-1之间。

扩展：渐变色彩

线性渐变效果

径向渐变效果

颜色的值是可以直接用英文表示，red，orange等。

• background-clip
  用来将背景图片做适当的裁剪以适应实际需要。
  
  background-clip ： border-box(默认） | padding-box | content-box | no-clip
  参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。

• background-size
  background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；
在这里插入图片描述

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

multiple backgrounds

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

边框

圆角效果border-radius(边界半径）

例子：

实现：

border-radius: 10px;
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

实心圆：

方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。
如下代码：

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

阴影

• 外阴影：
  
  实现：

 box-shadow:4px 2px 6px #333333; 

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

x轴正方向是右侧，y轴正方向是下侧。

当x轴和y轴偏移量都取负数时，那么应该是向上向左。

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

为0时的效果：

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

• 内阴影
  内阴影和偏移量取负值是不一样的
  
  内阴影实现

.box_shadow{
  box-shadow:4px 2px 6px #333333 inset; 
}

偏移量取复数时的阴影时不一样的
效果：

• 多阴影
  
  添加多个阴影只要用逗号隔开就可以

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

为边框应用图片

为边框添加图片

• 应用背景图片
  background:url(xx.jpg) 10px 20px no-repeat;
• border-image：
  
  repeat：四个角对应背景图片的四个角
  其余的是从中心向两边/四周重复，因此如果不能被整除那么就是裁掉。

实例：
背景图

round参数：round 可以理解为圆满的铺满，为了实现圆满所以会拉伸或压缩

stretch 就是拉伸，拉长至填充完屏幕

字体和文本样式

字体样式

字体大小 font-size :
字体颜色 color :
background-color和color的区别。
字体加粗 font-weight : bold
行间距 line-height:
改变字体： font-family:“宋体”；
Microsoft Yahei等
要使用自定义字体：font-face
添加如下代码段:

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

字体样式（斜体，正常字体normal等）

/*意大利斜体*/
font-style:Italic;

font样式简写

就是将属性写在一起，但是就是必须要有font-size和font-family属性，其他属性可以不指定，使用默认值。在缩写时font-size 和line-height之间要有"/"。

body{
font:12px/1.5em “宋体”,sans-serif;
}

文本样式

text-overflow用来设置是否使用一个省略标记（……）标示对象内文本的溢出。

text-overflow 用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

文本阴影text-shadow

实现

text-shadow: 2px 2px 0 grey;

语法：
text-shadow: X-Offset Y-Offset blur color;

使用text-decoration添加文本修饰

text-decoration：overline | underline | line-through | none（默认值）

text-indent添加首行缩进
2em的意思就是文字的2倍大小。

p{text-indent:2em;}

使用letter/word-spacing增加或减少字符间的空白

中文字间隔、字母间隔设置：

letter-spacing:50px;

单词间距设置：

word-spacing:50px;

使用text-align设置文本、图片对齐方式

text-align:right| left |center;