WEBBASIC Unit03 CSS声明

来源：互联网发布：美团数据采集编辑：程序博客网时间：2024/06/07 03:46

一.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>

阅读全文

0 0