浅谈css2.0

#css2.0入门
##css简述
CSS（ Cascading Style Sheet ）是指层叠样式表，这些样式定义如何显示HTML元素。这是由于如果是一个大型的网页，所有代码都写在一个HTML文件里面的话，会很不容易管理，同时代码的简洁度也不够，所以讲HTML文件内相同的样式提取出来，写到专门的CSS文件内，在通过引用的方式得以展现，大大提高了代码的复用率，提高了整体开发的效率,学习CSS就是学习一堆的选择器和属性。
##css主要作用
css 主要作用有两点布局与美化

1. 布局
   盒子模型
   

   • width:盒子内容部分的宽度 height：盒子内容部分的高度
     在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

   • padding：盒子内填充区域（如图，盒子内容部分与边框之间的区域）

     padding
     用来设置内填充，也叫补白 表示内容区域和边框之间的距离
     四个方向： 用的也比较多的
     padding-top:
     padding-right:
     padding-bottom:
     padding-left:

     padding后面也可以跟一个值，二个值，三个值，四个值：
     一个值：padding:10px 四个方向的padding都是10px
     二个值：padding:10px 20px; 上下是10px 左右是20px
     三个值：padding:10px 20px 30px; 上是10px 左右是20px 下是30px
     四个值：padding:10px 20px 30px 40px; 上 右 下 左

     注意点：
     1）有些标签是有默认的padding 如ul ol… 等 一刀切 *{ padding:0; }
     2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是>padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
     3）对于块级元素来说，上下padding可以撑起男盒子的高度。

   • border：盒子边框

     边框的粗细 border-widht
     边框的样式 border-style
     边框的颜色 border-color
     一般情况下，不会单独设置 border是一个复合属性
     注意点：
     1）border:1px solid red; border后面的属性是没有顺序的，但是一般都是先写>border-width,然后是border-style，最后是border-color。
     2）粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细>是不一样的
     3）边框的样式也非常多 用的非常多的有这几个：solid 实线 dotted 点画线 dashed 虚线 none 没有线 …
     4）边框的颜色设置 单词 用的最多还是16进制 也可以使用rgb函数
     5）也可以单独设置某一个方向上的border border-top:1px solid red; 用的也比较多

   • margin：盒子外填充部分（如图，盒子边框之外的部分）

     表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
     四有个方向：
     margin-top
     margin-right
     margin-bottom
     margin-left
     margin后面也可以跟一个值，二个值，三个值，四个值：
     一个值：margin:10px 四个方向的margin都是10px
     二个值：margin:10px 20px; 上下是10px 左右是20px
     三个值：margin:10px 20px 30px; 上是10px 左右是20px 下是30px
     四个值：margin:10px 20px 30px 40px; 上 右 下 左

     注意点：
     1）有此标签有默认的margin 一刀切 *{ margin:0; padding:0; }
     2）对于行内元素来说，margin在垂直方向上是无效的
     3）margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
     4）margin可以设置负值
     5）对于块级元素来说，margin有重叠问题（塌陷问题）

   • background：背景色与背景图（注：img标签也是一个盒子，也可以添加背景）

     背景色
     可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

     {background-color: gray;}

     背景色从元素中的文本向外少有延伸，只需增加一些内边距：

     {background-color: gray; padding: 20px;}

     background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
     背景图
     要把图像放入背景，需要使用 background-image 属性。
     如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

     {background-image: url(/i/eg_bg_04.gif);}

     如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
     属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
     可以利用 background-position 属性改变图像在背景中的位置
     将一个背景图像居中放置：

      { 
     background-image:url('/i/eg_bg_03.gif');
     background-repeat:no-repeat;
     background-position:center;
     }

   浮动设置
   浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

   • float

   float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任>何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
   如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
   注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
   left:元素向左浮动。
   right:元素向右浮动。
   none:默认值。元素不浮动，并会显示在其在文本中出现的位置。
   inherit:规定应该从父元素继承 float 属性的值。
   元素浮动会造成影响：
   1）对父元素造成的影响
   2）对后面的兄弟元素影响
   我们需要清除浮动所造成的的影响，也叫清除浮动：
   1）清除对父元素所造成影响
   A）overflow:hidden
   B）加高法
   元素浮动也会对它后面的元素造成影响：
   后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
   最最专业的：clear: left/right/both clear:both
   注释：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。

2. 美化
   美化常用的是字体与文本设置
   CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

   • 系列

   使用 font-family 属性 定义文本的字体系列

   • 大小

   font-size 属性设置文本的大小。
   通过像素设置文本大小
   可以对文本大小进行完全控制：

   h1 {font-size:60px;}
   h2 {font-size:40px;}
   p {font-size:14px;}

   使用 em 来设置字体大小
   1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在>设置字体大小时，em 的值会相对于父元素的字体大小改变。
   浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
   可以使用下面这个公式将像素转换为 em：pixels/16=em
   （注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
   结合使用百分比和 em
   在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

   body {font-size:100%;}
   h1 {font-size:3.75em;}
   h2 {font-size:2.5em;}
   p {font-size:0.875em;}

   • 加粗

   font-weight 属性设置文本的粗细
   使用 bold 关键字可以将文本设置为粗体。
   关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预>定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
   如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会>导致浏览器将加粗度下移而不是上移。

   • 风格（文字是否倾斜）

   font-style 属性最常用于规定斜体文本
   该属性有三个值：
   normal - 文本正常显示
   italic - 文本斜体显示
   oblique - 文本倾斜显示

   • 变形（如小型大写字母）

   font-variant 属性可以设定小型大写字母
   小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

   p {font-variant:small-caps;}

   css文本设置，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

   • 文本颜色

   color属性用来设置文本颜色

   body {color:red}
   h1 {color:#00ff00}
   p.ex {color:rgb(0,0,255)}

   • 文本装饰

   text-decoration 属性通常用来装饰文本
   none 关闭原本应用到一个元素上的所有装饰
   underline 对元素加下划线
   overline 在文本的顶端画一个上划线
   line-through 在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素
   blink 会让文本闪烁

   • 文本缩进

   text-indent 属性用来设置文本缩进
   通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
   注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
   2em 空两个汉字的宽度
   -1000em 把隐藏一个盒子中的文本

   • 对齐方式

   text-align属性用来设置文本对齐方式
   left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

   • 设置行高

   line-height 属性用来设置行高
   如果是子标签是男标签，行高可以撑起子标签的高度
   把隐藏一个盒子中的文本

   • 对齐方式

   text-align属性用来设置文本对齐方式
   left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

   • 设置行高

   line-height 属性用来设置行高
   如果是子标签是男标签，行高可以撑起子标签的高度
   如果是子标签是女标签，行高不能撑起子标签的高度