码迷,mamicode.com
首页 > 其他好文 > 详细

18-27

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

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

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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!