css样式总结2

4.盒模型:所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子,这些盒子都要按照可见板式模型在页面上排布。可见的板式模型主要由3个属性控制:position属性  display属性和float属性。

1. position属性控制页面上元素间的位置关系。
2. display属性控制元素是堆叠、并排或者不在页面上显示
3. float属性提供控制的方法,以便把元素组成多栏布局。

盒模型讲解:在默认情况下,每个盒子的边框是不可见的,背景也是透明的。所以我们不能直接的看到页面中的盒子结构。我们先从每个元素的属性开始，者些属性分为3组:1边框(border):可以设置边框的宽度、样式、颜色。

           2内边距(padding):可以设置盒子内容区(content)和边框的间距。

           3外边距(margin):可以设置盒子和邻元素的间距。

   解释:内容(content)就是盒子里装的东西。

                             内边距(padding) 怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。属性(padding-top,padding-right,padding-bottom,padding-left)

                             边框(border)就是盒子的本身。属性(border-top,border-right,border-bottom,border-left)

                             外边距(margin)就是两个盒子之间的距离。(margin-top,margin-right,margin-bottom,margin-left)

         简写样式：

        CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。

        在每个声明中，属性值得顺序都是上右下左的顺序，想象一下顺时针旋转就可以了。

    例如：{margin-top:3px;margin-right:4px;margin-bottom:5px;margin-left:7px;}

    简写：{margin:3px 4px 5px 7px;}

    有时不需要将4个值全部写出，哪一边没写，就用对边的值。

        {margin:3px 4px 5px;}那么左边的值就和右边的值一样，4px。

        {margin:3px 4px;}

        {margin:3px;}

5.继承与层叠

(1)继承:这里的继承和对我们C#的继承是一样的, 其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的。例如边框、内外边距。

(2)层叠: 层叠是CSS的核心机制。层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。

层叠规则：①层叠规则一：找到应用给每个元素和属性的声明。说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，并标识出所有受到影响的HTML元素。

    ②层叠规则二：按照顺序和权重排序。按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。权重排序：!import   

③层叠规则三：按特指度排序。

    计算特指度(ICE 公式)

     I     C      E

    id   class   Element

    1.选择器中有一个ID，就在I的位置上加1；

    2.选择器中有一个类(class),就在C的位置上加1；

    3.选择器中有一个元素(标签)名，就在E的位置上加1；

    4.得到一个三位数。得到的这个数就是我们的特指度。

    例如：    I     C      E

     p        0     0      1     特指度=1

    p.largetext   0     1      1     特指度=11

    p#largetext   1     0      1     特指度=101

    body p.largetext 0     1      2     特指度=12

    body p#largetext 1     0      2     特指度=102

④层叠规则四：顺序决定权重。说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，则位置最靠下的胜出。

6.伪类:伪类这个叫法源于它们跟类相似,但实际上并没有类会附加到标记中的标签上。

伪类分为两种(以及新增的伪类选择器):

(1).UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。

Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。

    Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。

    Selector:hover ：匹配Selector选择器且处于鼠标悬停状态的元素。

    Selector:active ：匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)的状态的元素。

    Selector:focus ：匹配Selector选择器且已得到焦点的元素。

    Selector:enabled ：匹配Selector选择器且当前用于处于不可用状态的元素。

    Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。

    Selector：checked :匹配Selector选择器且当前处于选中状态的元素。

    Selector：default :匹配Selector选择器且页面处于打开时选中状态的元素(即使当前没有被选中亦可)。

    Selector：read-only :匹配Selector选择器且当前处于只读状态的元素

    Selector：read-wirte :匹配Selector选择器且当前处于读写状态的元素

       Selector：selection :匹配Selector选择器的元素中当前被选中的内容。

    特别提示：1、一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。

                       2、上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种状态下的多个元素。

例: <style type="text/css">

#diva {

         width: 800px;

         height: 200px;

         margin: 0 auto;

         line-height: 160px;

         border: 2px solid #C00;

         text-align: center

}/*设置div样式*/

#divothers {

         width: 800px;

         height: 200px;

         margin: 20px auto;

         padding: 30px 0px;

         border: 2px solid #C00;

         text-align: center;

}/*设置div样式*/

input {

         width: 200px;

         height: 25px;

         font-size: 15pt;

         text-align: center;

}/*设置input标签样式*/

/*当文本框获取焦点时，添加下划线*/

button {

         width: 200px;

         height: 30px;

         display: block;

         margin: 10px auto;

         font-size: 14pt;

}

a {

         font-size: 26px;

}

/*链接在初始状态是蓝色的*/

a:link {

         color: blue;

}

/*当链接被点击之后，变成灰色(确切的说，到浏览器访问历史中

的这个URL过期之前或被用户删除之前都是灰色)*/

a:visited {

         color: gray;

}

/*鼠标移动到a标签上的时候，下划线消失*/

a:hover {

         text-decoration: none;

}

/*用户在链接上按下鼠标时(活动状态)，链接颜色为红色*/

a:active {

         color: red;

}

/*当input标签获取焦点时，添加下划线*/

input:focus {

         text-decoration: underline;

         border:3px solid #F00;

}

/*没有选择器的情况下，会将所有处于disabled状态下的元素的CSS样式改变*/

:disabled {

         font-famliy: "黑体";

         color:#3F0;

}

</style>

</head>

<body>

<div id="diva"> <a href="https://www.baidu.com/">用于link、visited、active、hover伪类选择器讲解</a> </div>

<div id="divothers">

  <input type="text" value="获得焦点时"/>

  <button>可用按钮</button>

  <button disabled="disabled">不可用按钮</button>

  <input type="text" disabled value="不可用文本框"/>

</div>

(2)结构化伪类:会在标记中存在某种结构上的关系(例如:某元素是一组元素中的第一个或最后一个),为该元素应用CSS样式。

结构化伪类选择器如下：

Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是<html>元素

Selector:first-child : 表示一组同胞元素中的第一个元素。

Selector:last-child  : 表示一组同胞元素中的最后一个元素。

Selector:nth-child(n)  : 表示一组同胞元素中的第n个元素。(顺数第n个)

Selector:nth-last-child(n)  : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)

Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。

还有其他的几个结构化选择器：和上面的类似

Selector:first-of-type

Selector:last-of-type

Selector:nth-of-type(n)

Selector:nth-last-of-type(n)

Selector:empty

(3):not和:target(CSS3新增的两个特殊的伪类选择器)

Selector1:not(Selector2) 匹配Selector1，但不匹配Selector2，

                                                         相当于从Selector1中减去Selector2

Selector:target  (target 目标)说明：如果用户点击一个指向页面中其他元素的链接，

                                                         则那个元素就是目标(target)

(4)伪元素：就是在你的文档中若有实无的元素.

伪元素：::first-letter 伪元素   ::first-line 伪元素    ::before 和:after 伪元素

<style type="text/css">

/*将段落中的第一个字母放大到原来的300%*/

p::first-letter {

         font-size: 300%;

}

/*将段落中的第一行放大到原来的200% 并将字体的样式设置为斜体*/

p::first-line {

         font-size: 200%;

         font-style: italic;

}

#myp {

         font-size: 15pt;

         text-align: center;

}

/*在#myp这个段落的开始添加文字*/

#myp::before {

         content: "同学们，";

}

/*在#myp这个段落的末尾添加文字*/

#myp::after {

         content: "现在是上课时间。";

}

</style>

</head>

<body>

<p>The owner felt quite surprised. He asked the man,

  "Why are you back so soon? Have you tested him already?"

  "I don't want to test him any more," replied the man, "

  From the companion he chose for himself, I could see what

  sort of animal he is."</p>

<p  id="myp">下午好！</p>