18-27

时间：2019-10-25 23:06:39 阅读：84 评论：0 收藏：0 [点我收藏+]

1-18 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叫做行内样式，只对所在的标签设计起作用。

技术图片

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

技术图片

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

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

技术图片

上图：在上面的网址中，可以查看相应的颜色，然后通过颜色表格上面的工具来调整颜色。

<!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>

代码：设计高度、宽度

技术图片

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

页内样式

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;将块级标签改为行内标签

技术图片

18-27

标签：href 浏览器效果背景色 doctype 一起占用 ted 背景颜色

原文地址：https://blog.51cto.com/daimalaobing/2445603

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行