首页 > 代码库 > 前端逼死强迫症系列之css

前端逼死强迫症系列之css

一、编写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.css选择器

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>

6.属性选择器

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

<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="http://www.mamicode.com/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)

 

前端逼死强迫症系列之css