HTML中使用CSS样式（上）

在每一个标签上都可以设置style属性，这就是CSS样式：

<div style="height:48px;border: 1px solid red;text-align:center;line-height:48px;">FGF</div>

<div style="height:48px;border: 1px solid red;text-align:center;line-height:48px;">FGF</div>

但是上面的样式没有重用性。如何提高重用性呢？

一、编写css样式

1、ID选择器

由于ID唯一，所以也是写多遍。

<head>

    <style>

        #i1{

            background-color: #2459a2;

            height: 48px;

        }

        #i2{

            background-color: #2459a2;

            height: 48px;

        }

    </style>

</head>

<body>

    <div id="i1">ff</div>

    <div id="i2">ff</div>

</body>

2、class选择器

class选择器是最常用的。

<head>

    <style>

        .c1{

            background-color: #2459a2;

            height: 48px;

        }

    </style>

</head>

<body>

    <div class="c1">ff</div>

    <div class="c1">ff</div>

</body>

3、标签选择器

不管那一层，只要是这个标签就应用这个样式。

<head>

    <style>

        div{

            background-color: black;

            color: white;

        }

    </style>

</head>

<body>

    <div >ff</div>

    <span >f

        <div >fgf</div>

    </span>

</body>

4、层级选择器（空格）

也叫关联选择器。如下：span里面的div才应用样式。

<head>

    <style>

        span div{

            background-color: black;

            color: white;

        }

    </style>

</head>

<body>

    <div >ff</div>

    <span >f

        <div >fgf</div>

    </span>

</body>

　　层级也可以标签和类选择器做层级，比如:

.c1 .c2 div a h1{

　　...

}

5、组合选择器（逗号）

ID组合

<head>

    <style>

        #i1, #i2{

            background-color: #2459a2;

            height: 48px;

        }

    </style>

</head>

<body>

    <div id="i1">ff</div>

    <div id="i2">ff</div>

</body>

class 组合

<head>

    <style>

        .c1, .c2{

            background-color: #2459a2;

            height: 48px;

        }

    </style>

</head>

<body>

    <div class="c1">ff</div>

    <div class="c2">ff</div>

</body>

六、属性选择器

对选择到的标签再通过属性再进行一次筛选。

<head>

    <style>

        .c1[type="text"]{ width:100px; height:200px; }

        input[name="fgf"]{width:40px; height:40px; }

    </style>

</head>

<body>

    <input class="c1" type="text" n="alex">

    <input class="c1" name="fgf" type="password">

</body>

二、CSS的存在形式及优先级

如果对一个内容指定多个样式，样式没有重合，就都应用上了。
如果有重合，优先级，标签上style优先，编写顺序，就近原则,越往下越优先。

<head>

    <link rel="stylesheet" href="css/commons.css" />

    <!--引入CSS文件-->

    .c1{

        background-color: #2459a2;

        height: 10px;

    }

    <!--优先级：看是这里c1写在下面，还是c2在下面-->

    .c2{

    }

</head>

<body>

    <div class="c1 c2" style="color: pink">asdf</div>

</body>

css文件写法，直接写，不用再写<style>。

.c1{

    background-color: #2459a2;

    height: 10px;

}

<!--优先级：看是这里c1写在下面，还是c2在下面-->

.c2{

}

三、css边框以及其他常用样式

<body>

    <div style="border: 1px solid red;">

        <!--border：边框；solid：实体的-->

        asdfasdf

    </div>

    <div style="height: 48px;  /*高度（像素）*/

    width:80%;  /*宽度（百分比）*/

    border: 2px dotted red;

    /*dotted：虚线的 （border-left）*/

    font-size: 16px;  /*字体大小*/

    text-align: center;  /*水平居中*/

    line-height: 48px;  /*垂直居中根据标签高度*/

    font-weight: bold;  /*字体加粗*/

    color: white;  /*字体颜色*/

    background-color: lawngreen;  /*背景色*/

    ">asdf</div>

</body>

四、css之float样式

html标签中，div是块级标签，一个标签占一整行。显然好多网站都是分左右栏的，那怎么实现呢？
这里就需要用到float样式，让块级标签飘起来。自己有多少占多少。

<body>

    <div style="width: 20%;background-color: red;float: left">1</div>

    <div style="width: 50%;background-color: black;float: left">2</div>

    <div style="width: 20%;background-color: blue;float: right">2</div>

</body>

float飘起来之后，撑不起父标签，需要加一句，如下。

    <div style="width: 300px;border: 1px solid red;">

        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>

        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>

        <div style="clear: both;"></div>

        <!--float有个坑：孩子飘起来了，父亲没飘起来，就撑不起来了，需要加上上面那一句。-->

    </div>

五、css之display样式

    ******

    行内标签：无法设置高度，宽度，padding  margin

    块级标签：设置高度，宽度，padding  margin

    display: none; -- 让标签消失

    display: inline; -- 让标签变成行内标签

    display: block; -- 让标签变成块级标签

    display: inline-block; -- 拥有两者的属性↓

             具有inline,默认自己有多少占多少

             具有block，可以设置高度，宽度，padding  margin

六、css之内外边距

margin：外边距（离上面的边距增加了，本身没有增加。）
padding：内边距（上边边距增加了，自身内部增加边距。）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            height: 38px;

            background-color: #dddddd;

            line-height: 38px;

        }

    </style>

</head>

<body style="margin: 0">

    <div class="pg-header">

        <div style="width: 980px;margin: 0 auto;">

            <!--margin: 0 auto; 网页上边距为零，置顶；auto：当前宽度左右居中-->

            <div style="float: left;">收藏本站</div>

            <div style="float: right;"><a>登录</a></div>

            <div style="clear: both"></div>

        </div>

    </div>

</body>

</html>

七、css总结

CSS

    在标签上设置style属性：

        background-color: #2459a2;

        height: 48px;

        ...

    编写css样式：

        1. 标签的style属性

        2. 写在head里面 style标签中写样式

            - id选择区

                  #i1{

                    background-color: #2459a2;

                    height: 48px;

                  }

            - class选择器 ******

                  .名称{

                    ...

                  }

                  <标签 class='名称'> </标签>

            - 标签选择器

                    div{

                        ...

                    }

                    所有div设置上此样式

            - 层级选择器（空格） ******

                   .c1 .c2 div{

                   }

            - 组合选择器（逗号） ******

                    #c1,.c2,div{

                   }

            - 属性选择器 ******

                   对选择到的标签再通过属性再进行一次筛选

                   .c1[n='alex']{ width:100px; height:200px; }

            PS:

                - 优先级，标签上style优先，编写顺序，就近原则

        2.5 css样式也可以写在单独文件中

            <link rel="stylesheet" href="commons.css" />

        3、注释

            /*   */

        4、边框

             - 宽度，样式，颜色  (border: 4px dotted red;)

             - border-left

        5、

            height，         高度 百分比

            width，          宽度 像素，百分比

            text-align:center, 水平方向居中

            line-height，垂直方向根据标签高度

            color、     字体颜色

            font-size、 字体大小

            font-weight 字体加粗

        6、float

            让标签飘起来，块级标签也可以堆叠

            老子管不住：

                <div style="clear: both;"></div>

        7、display

            display: none; -- 让标签消失

            display: inline; -- 让标签变成行内标签

            display: block; -- 让标签变成块级标签

            display: inline-block; -- 拥有两者的属性↓

                     具有inline,默认自己有多少占多少

                     具有block，可以设置高度，宽度，padding  margin

            ******

            行内标签：无法设置高度，宽度，padding  margin

            块级标签：设置高度，宽度，padding  margin

        8、padding  margin(0,auto)

巴特西