WEBBASIC Unit03 CSS声明

最新推荐文章于 2020-06-11 06:21:22 发布

KopWelkin

最新推荐文章于 2020-06-11 06:21:22 发布

阅读量485

点赞数

分类专栏： Java

Java 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

一.box

这里写图片描述

二.line-height

这里写图片描述

二.选择器的优先级

元素选择器: 1
类选择器: 10
ID选择器: 100
.content>div : 10+1=11
.data : 10
.content>.data : 10+10=20

demo1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
    /*1.四个边一起设置相同的边距*/
    #d1 {
        padding: 20px;
        margin: 30px;
    }
    /*2.四个边一起设置不同的边距(上右下左)*/
    #d2 {
        padding: 10px 20px 30px 40px;
        margin: 40px 30px 20px 10px;
    }
    /*3.单个边设置边距(left/right/top/bottom)*/
    #d3 {
        padding-left: 30px;
        margin-bottom: 20px;
    }
    /*4.对边设置边距(上下   左右)*/
    #d4 {
        padding: 20px 30px;
        margin: 20px 30px;
    }
    /*5.外边距的特殊用法:
        当采用对边设置外边距的时候,若
        第二个值为auto,则该元素水平居中. */
    #d5 {
        margin: 50px auto;
    }
</style>
</head>
<body>
    <div id="d0">d0</div>
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">d4</div>
    <div id="d5">d5</div>
</body>
</html>

demo2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /*1.设置背景图*/
    body {
        background-image: 
            url(../images/background.png);
        background-repeat: repeat-y;
        background-position: center;
    }
    div {
        border: 1px solid red;
        width: 125px;
        height: 125px;
        margin: 10px auto;
    }
    /*2.采用简化的方式设置背景(色和图)
        background:颜色  图片  平铺  位置;
        上述4个值可以酌情省略,但至少要保留
        颜色或图片之一  */
    .enemy {
        background: 
            url(../images/airplane.png)
            no-repeat center;
    }
    .hero {
        background: 
            url(../images/hero0.png)
            no-repeat center;
    }
    /*3.固定背景图*/
    body {
        background-attachment: fixed;
    }
</style>
</head>
<body>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="hero"></div>
    <div class="hero"></div>
</body>
</html>

demo3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    h1,p {
        border: 1px solid red;
        width: 300px;
    }
    h1 {
        text-align: center;
        text-decoration: underline;
    }
    p {
        text-indent: 2em;
        line-height: 2em;
    }
    h1 {
        height: 100px;
        /*当行高=元素的高时,文字垂直居中*/
        line-height: 100px;
    }
</style>
</head>
<body>
    <h1>范传奇</h1>
    <p>
        华灯轻抚蚕丝被,
        锦墙呢喃诉床帏.
        情郎翘首索芳心,
        佳人回眸送秋水.
        丹心不畏相思苦,
        浓情何惧岁月催.
        万水千山终有路,
        几度良宵几轮回.
    </p>
</body>
</html>