18-27

时间 2020-02-02

原文原文链接

1-18 CSS选择器

行内样式css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: cornflowerblue;">head</div>
    <div>body</div>
    <div>foot</div>
</body>
</html>

代码：
通常网页分为3个部分，头部，中间，尾部
在标签内些 style叫作行内样式，只对所在的标签设计起做用。html

上图：能够为其编辑背景颜色，这样能更方便的设计样式，好比能更好的观察期高度、宽度等。chrome

上图：该颜色能够在chrome浏览器中，来调色。浏览器

RGB颜色表：https://tool.oschina.net/commons?type=3ide

上图：在上面的网址中，能够查看相应的颜色，而后经过颜色表格上面的工具来调整颜色。工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: cornflowerblue; height: 48px; width: 100px">head</div>
    <div>body</div>
    <div>foot</div>
</body>
</html>

代码：设计高度、宽度字体

上图：图中看到的背景色宽度和高度与代码中的设计相同spa

页内样式.net

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: cornflowerblue;
        }
        #i2{
            background-color: goldenrod;
        }
        #i3{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="i1">head</div>
    <div id="i2">body</div>
    <div id="i3">foot</div>
</body>
</html>

代码：
在head中使用style设计叫作业内样式，能够针对当前页面的代码进行样式设计。
id是惟一的，不可重复。设计

上图：选择不一样的id设计了不一样的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div id="i1">head</div>
    <div id="i2">body</div>
    <div id="i3">foot</div>
</body>
</html>

代码：将3个id使用逗号组合起来，一块儿设计其样式。

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div class="c1">head</div>
    <div class="c1">body</div>
    <div class="c1">foot</div>
</body>
</html>

代码：多个标签能够设计成一类标签，针对这一类标签进行样式设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c2,.c3{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div class="c1">head</div>
    <div class="c2">body</div>
    <div class="c3">foot</div>
</body>
</html>

代码：使用逗号将不一样类的标签组合起来设计样式。

层级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="c1">
        <span>head</span>
    </div>
    <div class="c2">body</div>
    <div class="c3">foot</div>
</body>
</html>

代码：使用div加span的关联方式，来关联这两个标签，而后对其设计样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 span{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="c1">
        <span>head</span>
    </div>
    <div class="c2">body</div>
    <div class="c3">foot</div>
</body>
</html>

代码：使用.c1加span的方式关联

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='text']{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>

代码：设计input标签且其中属性是type='text'的标签

1-19

CSS的选择优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background: red;
            color: white;
        }
        .c2{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="c1 c2">testtest</div>
</body>
</html>

代码：当针对同一个标签进行多个样式设计时，如过没有冲突，就会叠加效果。

上图：两个样式的设计，体如今了同一个标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background: red;
            color: white;
        }
        .c2{
            font-size: 50px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="c1 c2">testtest</div>
</body>
</html>

代码：样式设计冲突时，使用离标签最近的设计样式（也就是使用.c2的设计）

上图：能够看到字体是黑色，使用了.c2的设计样式。

行内设计>页面设计（页面比较最近的设计）>外部设计

外部设计

<!--html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="c1 c2">testtest</div>
</body>
</html>

代码：使用link rel="stylesheet" href="index.css" 引入外部css文件的设计样式

<!--css文件-->
.c1{
    background: red;
    color: white;
}
.c2{
    font-size: 50px;
    color: black;
}

代码：该css文件中的设计样式，能够同时被多个html引用。

1-20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 4px  dotted red;
        }
    </style>
</head>
<body>
    <div>123123123</div>
</body>
</html>

代码：border: 4px dotted red; 边框宽度样式颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 48px;
            width: 80%;
            border: 1px solid red
        }
    </style>
</head>
<body>
    <div>123123123</div>
</body>
</html>

代码：
宽度设计为80%，这样会根据屏幕的宽度自动缩进80%；
高度不建议直接使用百分比，由于高度是能够无穷高的，会有滚动条，因此高度使用百分比是不合理的；能够写两个层级标签，父集标签设计好高度和宽度之后，在子标签中设计百分比时，是根据父集标签高度宽度来自动缩进的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 48px;
            width: 80%;
            border: 1px solid red;
            font-size: 16px;  /*设计字体大小*/
            text-align: center;  /*水平居中*/
            line-height: 48px;  /*与height相同，就是垂直居中*/
            font-weight: bold;  /*字体加粗*/
        }
    </style>
</head>
<body>
    <div>123123123</div>
</body>
</html>

1-21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
        }
        #i2{
            width: 80%;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代码：设计两个div标签一个宽度为20%，一个为80%。

上图：两个标签个占一行，这是由于他们是块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 60%;
            background-color: cornflowerblue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代码：使用float能够让div标签浮动，浮动起来的话就不会再占用整行了。

上图：红色占20%，蓝色占60%；都向左浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 60%;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代码：蓝色向右浮动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 80%;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代码：蓝色占80%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 81%;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代码：蓝色占81%

上图：红色20%+蓝色81%，超出100%，就不会再同一行显示。

1-23

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{

            background-color: red;
            display: inline;
        }
        #i2{

            background-color: cornflowerblue;
            display: inline;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代码：display: inline;将块级标签改成行内标签

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。