CSS基础

  • 选择器

    选择器 {
    属性：值；
    属性：值；
}

    • 用于匹配HTML元素

    • 有不同的选择规则

    • 可以叠加

    • 存在优先级问题

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>basic</title>
    <style>
        #test1{
            color:red;
        }
        #test1.test1{
            color:blue;
        }

        .test2{
            color:red;
        }
        div.test2{
            color:blue;
        }

        #test3{
            color:red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color:blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">test1</div>
    <div class="test2">test2</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">
        test3
    </div>
</body>
</html>

    • !important使得元素权重最高

  • 非布局样式

    • 字体
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fonts</title>
    <style>
        body{
            /* font-family: "monaco"; */
            /* font-family: "monaco", "PingFang SC"; */
            font-family: "aaaaa", "monaco", "PingFang SC";
        }
        .chinese{
            font-family: "PingFang SC", "Microsoft Yahei", monospace;
            /* font-family: "Microsoft Yahei", serif; */
            /* font-family: "serif"; */
        }
        .weight{
            font-weight: bold;
            font-weight: bolder;
            font-weight: lighter;
            font-weight: normal;
            font-weight: 100;
        }
        /*自定义字体引入*/
        @font-face {
            font-family: "IF";
            src: url("./IndieFlower.ttf");
        }
        .custom-font{
            font-family: IF;
        }
    </style>
</head>
<body class="body" id="body">
    Hello world 你好，世界
    <div class="chinese">你好</div>
    <!-- <div class="weight">你好 Hello World</div> -->
    <div class="custom-font">你好 Hello World</div>
</body>
</html>

    • iconfont

    • 行高

      • 行高的构成

        • 是lineBox的高度
        • lineBox的高度是由其内部inlineBox的高度而决定的
        <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>inline</title>
    <style>
        span{
            background:red;
        }
        .c1{
            line-height: 20px;
        }
        .c2{
            line-height: 8px;
        }
        .c3{
            line-height: 30px;
        }
        .c5{
            line-height: 28px;
        }
    </style>
</head>
<body>
    <div>
        <span class="c1">inline box xfg中文</span>
        <span class="c2">inline box</span>
        <span class="c3">inline box</span>
        inline box
        <span class="c5">inline box</span>
    </div>
</body>
</html>

        上面的例子中，每个line-height都不一样，但是用浏览器打开之后，发现显示的行高都是一样的。这是由于其外部的形成的lineBox统一决定的，lineBox的行高是由其内部最大的行高决定的。30px

      • 行高相关的现象和方案

        • 不同的字体大小在一行中，是根据baseline来对齐的。
        • 可以使用vertical-align来设置对齐方式
        • 经典问题：文字和图片在一行中，会发现图片出现与下底线之间存在空隙的问题，就是因为图片同文字使用默认的baseline对齐导致的，可以通过设置图片的vertical-align:bottom来解决

    • 背景

      • 背景颜色
      • 渐变色背景
      • 多背景叠加
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background</title>
    <style>
        body{
            background:yellow;
        }
        .c1{
            height:90px;
             background:rgba(255,0,0, .3); 
            /* background:url(./test.png); */
        }
        .c2{
            height:90px;
            /* background: -webkit-linear-gradient(left, red, green); */
            /* background: linear-gradient(to right, red, green); */
            /* background: linear-gradient(180deg, red, green); */
            /* background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%); */
            background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
                linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="c1">

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

    </div>
</body>
</html>
      • 背景图片和属性（雪碧图(很多需要的图标直接在一张图片中，通过设置位置来实现)）
      • base64和性能优化
        • 图片直接使用base64格式，只适用于小图标
      • 多分辨率适配
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background</title>
    <style>
        .c1{
            height:900px;
            background:red url(data:image/png;base64,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);
            background-repeat: no-repeat;
            /* background-position: center top; */
            /* background-position: 20px 30px; */
            /* background-size:100px 50px; */
        }
        .c2{
            width:20px;
            height:20px;
            background:url(./test_bg.png) no-repeat;
            background-position: -17px -5px;
            background-size: 261px 113px;
        }
        .c3{
            width:20px;
            height:20px;
            background:url(./test_bg.png) no-repeat;
            background-position: -169px -23px;
            background-size: 261px 113px;
        }
    </style>
</head>
<body>
    <div class="c1">

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

    </div>
    <div class="c3">

    </div>
</body>
</html>

    • 边框

      • 边框：线型 大小 颜色
      • 边框背景图
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>border</title>
    <style>
        .c1{
            width:400px;
            height: 200px;
            /* border: 1px solid red; */
            /* border:5px solid red; */
            /* border:5px dotted red; */
            border:5px dashed red;
        }
        .c2{
            width:400px;
            height: 200px;
            /* border-width: 30px; */
            border:30px solid transparent;
            border-image:url(./border.png) 30 round;
        }
        .c3{
            width:400px;
            height: 200px;
            border-bottom:30px solid red;
            /* border-right:30px solid blue; */
            border-left:30px solid transparent;
            border-right:30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="c1">

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

    </div>
    <div class="c3">

    </div>
</body>
</html>

    • 滚动

      • 滚动行为和滚动条
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scroll</title>
    <style>
        .c1{
            background:red;
            height:200px;
            overflow: hidden;
            overflow: visible;
            overflow: auto;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="c1">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>
</body>
</html>

    • 文字折行(灰常复杂)

      • word-wrap通用换行控制
      • word-break针对多字节文字
        • 可以设置句子是一个单位,不换行
      • white-space空白处是否断行
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>warp</title>
    <style>
        .c1{
            border: 1px solid;
            width: 8em;
            overflow-wrap: normal;
            word-break: normal;
            white-space: normal;
        }

    </style>
</head>
<body>
    <div class="c1">
        This is a long and Supercalifragilisticexpialidocious sentence. 一二三四五六，七八九零一二，这是一句巨长巨长又没有空间可以换行的句子哦。
    </div>
</body>
</html>
posted @ 2018-12-22 22:53  麦兜爱学习  阅读(2725)  评论(0)  编辑  收藏  举报