国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 > web前端 > css教程 > 正文

Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明

高洛峰
發(fā)布: 2017-02-11 11:49:34
原創(chuàng)
1466人瀏覽過

    Unit02: ?CSS 概述 、 ? CSS 語法 、 ? CSS 選擇器 、 ? CSS聲明    

my.css

立即學(xué)習前端免費學(xué)習筆記(深入)”;

p {
    color: yellow;
}
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo1.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 2.內(nèi)部樣式:在head元素內(nèi)部的style標簽內(nèi)
    寫樣式,這種樣式可以在當前網(wǎng)頁上復(fù)用. --><style>
    /*CSS的注釋是這樣的*/
    h2 {
        color: blue;
    }</style><!-- 3.外部樣式:在單獨的css文件中寫樣式,
    需要通過link標簽將其引入到網(wǎng)頁上才有效.
    這種樣式可以在任意的網(wǎng)頁上復(fù)用. --><link rel="stylesheet" href="my.css"/></head><body>
    <!-- 1.內(nèi)聯(lián)樣式:在元素的style屬性里寫樣式,
        這種樣式只對這一個元素有效,無法復(fù)用. -->
    <h1 style="color:red;">CSS是層疊樣式表</h1>
    <h2>CSS有3種使用方式</h2>
    <p>1.內(nèi)聯(lián)樣式</p>
    <p>2.內(nèi)部樣式</p>
    <p>3.外部樣式</p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo2.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    /*1.繼承性:在父元素上寫的樣式,可以被子元素
        繼承,注意只有字體、顏色可以繼承。*/
    body {
        font-family: 
            "微軟雅黑","文泉驛正黑","黑體";
    }
    /*2.層疊性:先后給一個元素設(shè)置不同的樣式,
        其效果會疊加在一起. */
    h1 {
        color: red;
        font-size: 50px;
    }
    /*3.優(yōu)先級:先后給一個元素設(shè)置相同的樣式,
        其效果是以后者為準,也叫就近原則.*/
    h2 {
        color: blue;
    }
    /*...*/
    h2 {
        color: green;
    }</style></head><body>
    <h1>蒼老師</h1>
    <h2>范傳奇</h2></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo3.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    /*1.元素選擇器:略*/
    /*2.類選擇器:選擇一類(class="某值")
        具有共性的元素*/
    .girl {
        color: pink;
    }
    /*3.id選擇器:根據(jù)id選擇唯一的元素*/
    #p4 {
        color: red;
    }
    /*4.選擇器組:寫出一組選擇器,會選中每個
        選擇器所對應(yīng)的目標的并集(合計).*/
    .girl,#p4 {
        /*字體加粗*/
        font-weight: bold;
    }
    /*5.派生選擇器:
        選擇某元素滿足條件的后代 */
    /*5.1選擇子孫*/
    #p5 b {
        color: red;
    }
    /*5.2選擇兒子*/
    #p5>b {
        font-size: 30px;
    }
    /*6.偽類選擇器:根據(jù)元素的狀態(tài)選擇元素*/
    /*6.1選擇未訪問過的超鏈接*/
    a:link {
        color: green;
    }
    /*6.2選擇已訪問過的超鏈接*/
    a:visited {
        color: red;
    }
    /*6.3選擇激活態(tài)(正在點)的按鈕*/
    #b1:active {
        background-color: green;
    }
    /*6.4選擇有焦點(光標閃爍)的文本框*/
    #t1:focus {
        background-color: yellow;
    }
    /*6.5選擇懸停態(tài)的圖片*/
    img:hover {
        width: 250px;
        height: 250px;
    }</style></head><body>
    <p class="girl">蒼老師呀蒼老師</p>
    <p>范傳奇呀范傳奇</p>
    <p class="girl">王克晶呀王克晶</p>
    <p id="p4">瞧你們那點破事</p>
    <p id="p5">北京市<u>海淀區(qū)<b>北三環(huán)</b>西路</u>甲18號<b>中鼎大廈</b>B座8層</p>
    <p>
        <a href="http://www.tmooc.cn">達內(nèi)</a>
        <a href="http://www.sb.com">隨便</a>
    </p>
    <p><input type="button" value="按鈕1" id="b1"/></p>
    <p><input type="text" id="t1"/></p>
    <p>
        @@##@@
        @@##@@
        @@##@@
    </p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo4.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    /*1.單個邊設(shè)置邊框(left/right/top/bottom)*/
    h1 {
        border-left: 10px solid blue;
    }
    /*2.四個邊設(shè)置相同的邊框*/
    p {
        border: 1px dashed red;
    }</style></head><body>
    <h1>蒼老師</h1>
    <p>
        劉蒼松,系達內(nèi)Java教學(xué)總監(jiān).
        是Java教學(xué)改革的先驅(qū).
        同時他也是一名攝影愛好者,
        他拍的片都很么么噠!
        他最擅長捕捉肉體和靈魂的契合點,
        能夠折射出對人性的思考與鞭撻!    </p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

?demo1.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    p {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
    /*1.四個邊一起設(shè)置相同的邊距*/
    #d1 {
        padding: 20px;
        margin: 30px;
    }
    /*2.四個邊一起設(shè)置不同的邊距(上右下左)*/
    #d2 {
        padding: 10px 20px 30px 40px;
        margin: 40px 30px 20px 10px;
    }
    /*3.單個邊設(shè)置邊距(left/right/top/bottom)*/
    #d3 {
        padding-left: 30px;
        margin-bottom: 20px;
    }
    /*4.對邊設(shè)置邊距(上下   左右)*/
    #d4 {
        padding: 20px 30px;
        margin: 20px 30px;
    }
    /*5.外邊距的特殊用法:
        當采用對邊設(shè)置外邊距的時候,若
        第二個值為auto,則該元素水平居中. */
    #d5 {
        margin: 50px auto;
    }</style></head><body>
    <p id="d0">d0</p>
    <p id="d1">d1</p>
    <p id="d2">d2</p>
    <p id="d3">d3</p>
    <p id="d4">d4</p>
    <p id="d5">d5</p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo2.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    /*1.設(shè)置背景圖*/
    body {
        background-image: 
            url(../images/background.png);
        background-repeat: repeat-y;
        background-position: center;
    }
    p {
        border: 1px solid red;
        width: 125px;
        height: 125px;
        margin: 10px auto;
    }
    /*2.采用簡化的方式設(shè)置背景(色和圖)
        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>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="hero"></p>
    <p class="hero"></p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo3.html

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!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>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

?demo1.html? 演示浮動定位

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    .d0,p {
        width: 400px;
        border: 1px solid red;
    }
    .d1,.d2,.d3 {
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    .d1 {
        background-color: red;
    }
    .d2 {
        background-color: green;
    }
    .d3 {
        background-color: blue;
    }
    /*浮動*/
    .d1,.d2,.d3 {
        float: left;
    }
    /*消除浮動影響*/
    p {
        /*clear: left;*/
    }
    .d4 {
        clear: left;
    }</style></head><body>
    <p class="d0">
        <p class="d1"></p>
        <p class="d2"></p>
        <p class="d3"></p>
        <!-- 僅僅是用來消除浮動影響的 -->
        <p class="d4"></p>
    </p>
    <p>浮動時看看我的位置</p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo2.html?? 照片墻案例,演示浮動定位

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    body {
        background-color: #066;
    }
    ul {
        width: 780px;
        margin: 20px auto;
        /*border: 1px solid red;*/
        /*去掉列表左側(cè)的符號*/
        list-style-type: none;
        /*將列表自帶的內(nèi)邊距去掉*/
        padding: 0;
    }
    li {
        border: 1px solid #ccc;
        width: 218px;
        padding: 10px;
        margin: 10px;
        /*為了保證詩的順序必須左浮動*/
        float: left;
        background-color: #FFF;
    }
    p {
        text-align: center;
    }
    /*鼠標懸停時,讓li偏移2px的位置,
        從而實現(xiàn)一個抖動的特效. */
    li:hover {
        position: relative;
        left: 2px;
        top: -2px;
    }</style></head><body>
    <ul>
        <li>
            @@##@@
            <p>啊,Teacher蒼!</p>
        </li>
        <li>
            @@##@@
            <p>你在何方?</p>
        </li>
        <li>
            @@##@@
            <p>難道是去了東洋?</p>
        </li>
        <li>
            @@##@@
            <p>那邊的癡漢很多很多,</p>
        </li>
        <li>
            @@##@@
            <p>你一定要穿好衣裳,</p>
        </li>
        <li>
            @@##@@
            <p>別走光!</p>
        </li>
    </ul></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo3.html? 演示絕對定位

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    p {
        border: 1px solid red;
        width: 318px;
        /*只聲明定位,不設(shè)置偏移量,
          其位置不動,不受任何影響.
          這樣做僅僅是為了將該元素
          作為絕對定位的目標而已.*/
        position: relative;
    }
    p {
        position: absolute;
        bottom: 50px;
        width: 318px;
        background-color: #FFF;
        text-align: center;
    }
    p {
        height: 318px;
    }</style></head><body>
    <p>
        @@##@@
        <p>蒼老師到此一游</p>
    </p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo4.html? 演示固定定位(回到頂部)

Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    p {
        border: 1px solid #ccc;
        width: 40px;
        line-height: 30px;
        position: fixed;
        right: 10px;
        bottom: 30px;
        text-align: center;
    }</style></head><body>
    <h1>iPhone7 Plus</h1>
    <p>這是一個新款手機</p>
    <p>它可以防火</p>
    <p>它可以防盜</p>
    <p>它可以防閨蜜</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>
        <a href="#">頂部</a>
    </p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

go_to_top.html

?demo1.html? 設(shè)置圖片選中懸浮

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    p {
        width: 800px;
        height: 500px;
        margin: 20px auto;
        background-color: #066;
        position: relative;
    }
    img {
        position: absolute;
    }
    .i1 {
        left: 150px;
        top: 100px;
    }
    .i2 {
        left: 200px;
        top: 150px;
    }
    .i3 {
        left: 250px;
        top: 50px;
    }
    img:hover {
        z-index: 999;
    }</style></head><body>
    <p>
        @@##@@
        @@##@@
        @@##@@
    </p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo2.html? 設(shè)置列表序列樣式

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    ol {
        list-style-type: upper-roman;
    }
    ul {
        list-style-type: square;
    }
    .south {
        list-style-image: 
            url(../images/add.png);
    }</style></head><body>
    <ol>
        <li>河北省</li>
        <li>黑龍江</li>
        <li>山東省</li>
    </ol>
    <ul>
        <li>北京</li>
        <li class="south">上海</li>
        <li class="south">廣州</li>
        <li class="south">深圳</li>
        <li class="south">杭州</li>
    </ul></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

demo3.html?

行內(nèi)元素轉(zhuǎn)成塊元素

塊元素轉(zhuǎn)換成行內(nèi)元素

立即學(xué)習前端免費學(xué)習筆記(深入)”;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
    p {
        display: inline;
    }
    span {
        display: block;
    }
    img {
        display: block;
    }
    p {
        display: none;
    }</style></head><body>
    <p>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
    </p>
    <p>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </p>
    <p>
        @@##@@
        @@##@@
        @@##@@
    </p></body></html>
登錄后復(fù)制

立即學(xué)習前端免費學(xué)習筆記(深入)”;

?更多Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明相關(guān)文章請關(guān)注PHP中文網(wǎng)!

Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明Unit02: CSS 概述 、 CSS 語法 、 CSS 選擇器 、 CSS聲明
最佳 Windows 性能的頂級免費優(yōu)化軟件
最佳 Windows 性能的頂級免費優(yōu)化軟件

每個人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時間的推移,垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進程會占用資源并降低性能。幸運的是,許多工具可以讓 Windows 保持平穩(wěn)運行。

下載
相關(guān)標簽:
css
來源:php中文網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻,版權(quán)歸原作者所有,本站不承擔相應(yīng)法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn
最新問題
開源免費商場系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號