神奇魔法-CSS

神奇的魔法-CSS

一. 概念与作用

   	CSS概念：CSS全称为Cascading Style Sheets 也就是“层叠样式表”。
   	CSS最大的特点就是它的“层叠性”，设置的样式可以层层叠加，相当灵活。

   首先我们要明白CSS是用来干嘛的，从服务对象上来说，CSS的诞生就是
为了更好的展示图文信息。从功能上来说，就是布局与美化页面。

二. CSS魔法王国

    CSS魔法王国的主要人员是魔法师（属性）以及他们手中的法杖（选择器
），他们每天的工作就是对各种魔法石（各种HTML标签）施展魔法技能（属
性值）。

1. 属性

    CSS的属性众多，有点类似于我们现实世界中的名字，例如高度（height
），宽度（width）。

2. 属性值

    CSS中属性值有多种，可以是英文单词如：left center normal等；也可
以是数字、数字+单位以及百分比；还有表示颜色的值如：#fff表示白色。

3. 选择器

    CSS中的选择器就是瞄准镜，它能精准地帮你锁定你所需要的目标元素。

    下面简单介绍一些常用的选择器种类：
    ①标签选择器：直接选中标签即可如：div span；
    ②类选择器：根据定义好的类名来选择标签如：.w960 .header；
    ③ID选择器：根据定义好的ID选择对应标签，具有唯一性，如：#lbl；
    ④后代选择器：在父标签后加个空格然后选中子标签即可，如：div p
    ⑤通用选择器：选中所有标签，通常用于reset.css。

        如：   *{ margin: 0 ; padding : 0 ;}

4. 声明和声明块

    声明就是属性名+属性值，也叫键值对，例如：

    font-style: normal;

    声明块就是一系列的声明，例如：

    width:100px;
    height:100px;
    font-style: normal;
    color:#ccc;

5. 规则集

    当拥有了选择器和声明块，规则集就形成了，它是构成CSS大厦的一
    块块砖。结构如下：

    .business h3{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

三. CSS特性

1. 继承性

	子元素可以继承父元素的部分样式（以text-，font-，line-开头
的属性以及color属性）。

2. 层叠性

	当我们对某一个标签以多种不同的方式设置同样的样式时，哪种方式
设置的样式会起作用呢？
    ①行内样式 > 内部样式 = 外部样式（就近原则）；
    ②ID选择器 > 类选择器 > 标签选择器；
    ③自身的默认样式 > 继承的样式 ；
    ④根据权重进行比较  ID选择器:100   类选择器:10  标签选择器:1
加一起，哪种方式多哪种方式的样式就起效，如果一样多，采取就近原则；
    ⑤可以使用!important 改变优先级。

四. CSS布局

    CSS布局需要注意的主要有两块：①盒子模型；②块级元素的并排显示。

1. 盒子模型

    每一个元素都可以看成一个盒子，盒子分为男盒子和女盒子。
    	①男盒子：男标签、块级元素
    	②女盒子：女标签，行内元素
    盒子有六大属性，学习盒子模型就是学习这六大属性：
    	①宽  width  
    	②高  height
    	③边框 border
    	④内填充 padding
   		⑤外填充 margin
    	⑥背景  background

    <div class="box">
        box
    </div>

    .box{
            width: 100px;
            height: 100px;
            border: 3px solid gold;
            padding: 50px ;
            margin: 30px auto;
            background:#0f0;
        }

效果如下：

2. 块级元素并排显示

1）行内块：

	我们可以直接将需要并排显示的块级元素设置为行内块：
display：inline-block；	

2）浮动：

	浮动最初实现的功能是字围效果，后被用于实现块级元素的并排显示。
	左右浮动float：left/right  可使元素半脱离标准文档流，有点类
似与display：inline-block的效果，且具灵活性。
	
	元素浮动后会对其前后的元素造成影响，因此需要清除浮动。
	a. 清除对父元素造成的影响：
		①给父元素添加声明：overflow：hidden；
		②给父元素添加高度（加高法/内墙法）
	b. 清除对兄弟元素造成的影响：
		给被影响的兄弟元素添加声明：clear：both；

3）定位

	通过position：relative/absolute可以将块级元素设置在浏览
器的任何位置，并且其原本存在的位置继续保存。使用定位前我们需要
给它的父元素设置一个定位点，即position属性，不需要设置具体位置
，然后就可以定位块级元素了。

    .father{
            position:relative;
}
    .son{
    		position:relative:
    		top:xxxpx;
    		left:xxxpx;
}

五. CSS美化

1. 字体设置

	常用的CSS字体属性如下：
		①font-family：设置字体类型；
		②font-size: 设置字体尺寸；
		③font-weight:设置字体粗细；
		④font-style:设置字体风格；
		⑤font：以上四个的复合属性；
		⑥color：设置字体颜色。

2. 文本设置

	常用的CSS文本属性如下：
		①color：设置文本颜色；
		②text-align：设置文本对齐方式；
		③text-indent：设置文本首行的缩进；
		④text-decoration：给文本添加修饰；
		⑤line-height：设置文本的行高；
		⑥white-space：设置文本中空白的处理方式；

3. 列表设置

	常用的CSS列表属性如下：
		①list-style-type：设置列表前标志类型；
		②list-style-image：将图象设为列表标志；
		③list-style-position：设置列表标志的位置；
		④list-style：以上的复合属性。

4. 表格设置

	常用的CSS表格属性如下：
		①border-collapse：表格边框是否合并为单元边框；
		②border-spacing：设置单元格边距；
		③empty-cells：设置空白单元格的显示与隐藏；
		④caption-side：设置表格标题的位置。