国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS入門

番茄西紅柿 / 960人閱讀
CSS介紹 CSS：層疊樣式表：Cascading Style Sheets：修改HTML樣式 CSS引用 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用CSStitle>
    
    <link rel="stylesheet" href="style.style">
    
    <style>
        p {
            color: red;
        }
    style>
head>
<body>
    
    <p style="color: red">引用樣式p>
body>
html>

CSS選擇器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器title>
    <style>
        /*標(biāo)簽選擇器
        選擇所有p標(biāo)簽*/
        p {}
        /*id選擇器
        選擇id為xiu的標(biāo)簽*/
        #xiu {}
        /*類選擇器
        選擇所有class為kang的標(biāo)簽*/
        .kang {}
        /*后代選擇器
        選擇div里面所有class為kang的標(biāo)簽*/
        div .kang {}
        /*子代選擇器
        選擇div里面子類的所有p標(biāo)簽*/
        div > p {}
        /*交集選擇器
        選擇p標(biāo)簽且id為kang的標(biāo)簽*/
        p#kang {}
        /*并集選擇器
        選擇id為id的標(biāo)簽和class為kang的兩個(gè)標(biāo)簽*/
        #id,.kang {}
        /*偽類選擇器 :link未訪問的鏈接 :visited已訪問的鏈接 :hover鼠標(biāo)移上去的鏈接 :active選中的鏈接*/
        p:hover {}
        /*結(jié)構(gòu)偽類選擇器
        選擇第一個(gè)p標(biāo)簽*/
        p:first-child {}
        /*結(jié)構(gòu)偽類選擇器
        選擇最后一個(gè)p標(biāo)簽*/
        p:last-child {}
        /*結(jié)構(gòu)偽類選擇器
        選擇第2個(gè)p標(biāo)簽 n表示所有 2n表示偶數(shù) 2n+1表示奇數(shù)*/
        p:nth-child(2) {}
        /*結(jié)構(gòu)偽類選擇器
        選擇所有偶數(shù)的p標(biāo)簽 even偶數(shù) odd奇數(shù)*/
        p:nth-child(even) {}
        /*屬性選擇器
        選擇屬性為href的a標(biāo)簽*/
        a[href] {}
        /*屬性選擇器
        選擇屬性href和屬性title的a標(biāo)簽*/
        a[href][title] {}
        /*屬性選擇器
        選擇屬性和值為href="url"的a標(biāo)簽*/
        a[href="url"] {}
        /*屬性選擇器
        選擇屬性和值為href="url"且title="提示"的a標(biāo)簽*/
        a[href="url"][title="提示"] {}
        /*屬性選擇器
        選擇屬性的值以u(píng)rl開頭的a標(biāo)簽,該值必須是整個(gè)單詞*/
        a[href|="url"] {}
        /*屬性選擇器
        選擇屬性的值以u(píng)rl開頭的a標(biāo)簽*/
        a[href^="url"] {}
        /*屬性選擇器
        選擇屬性的值以u(píng)rl結(jié)尾的a標(biāo)簽*/
        a[href$="url"] {}
        /*屬性選擇器
        選擇屬性的值包含url的a標(biāo)簽,該值必須是整個(gè)單詞*/
        a[href~="url"] {}
        /*屬性選擇器
        選擇屬性的值包含url的a標(biāo)簽*/
        a[href*="url"] {}
    style>
head>
<body>
    <p>段落p>
    <a href="url" title="提示">百度a>
body>
html>

CSS字體

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體title>
    <style>
        p {
            /*設(shè)置字體大小*/
            font-size: 20px;
            /*設(shè)置字體*/
            font-family: "宋體","微軟雅黑";
            /*字體加粗*/
            font-weight: 700;
            /*字體傾斜*/
            font-style: italic;/*normal 取消樣式*/
            /*字體顏色 預(yù)定義顏色:red;十六進(jìn)制顏色:#FF0000;RGB顏色:rgb(255,255,255) */
            color: #aa00cc;/* #aa00cc可以簡寫為#a0c 兩兩相同才可以*/
            /*設(shè)置行高*/
            line-height: 20px;
            /*設(shè)置文字對齊方式*/
            text-align: center;
            /*段落首行縮進(jìn)*/
            text-indent: 2em;
            /*設(shè)置字體裝飾 underline下劃線 overline上劃線 line-through刪除線 none無裝飾 */
            text-decoration: underline;
        }
        h1 {
            /*字體連寫，順序不能交換，size/family不能省略*/
            /*font: font-style font-weight font-size font-family;*/
            font: 25px "宋體";
        }
    style>
head>
<body>

    <p>字體p>
    <h1>標(biāo)題h1>
body>
html>

元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>塊級(jí)元素title>
    <style>
        /*　塊級(jí)元素 block-level
        總是從新行開始
        高度，行高，外邊距都可以控制
        寬度默認(rèn)是容器的１００％
        可以容納內(nèi)聯(lián)元素和其他元素
        常見的塊元素：

CSS的特性

  • 層疊性
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>繼承性title>
    <style>
        /*一般情況下，如果出現(xiàn)樣式?jīng)_突，會(huì)按照CSS的書寫順序，已最后的樣式為準(zhǔn)
        樣式?jīng)_突，遵循的原則為就近原則，那個(gè)樣式離結(jié)構(gòu)進(jìn)，就執(zhí)行那個(gè)樣式,就近原則
        樣式不會(huì)沖突，不會(huì)層疊
        color樣式?jīng)_突了，就執(zhí)行最近的一個(gè)color，font-size沒有沖突，正常執(zhí)行 */
        p {
            color: red;
            font-size: 20px;
        }
        p {
            color: blue;
        }
    style>
head>
<body>
    <p>段落p>
body>
html>
  •  繼承性
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>繼承性title>
    <style>
        /*子標(biāo)簽會(huì)繼承父標(biāo)簽的某些屬性，比如：字體顏色和字號(hào)*/
        .xiu {
            color: red;
        }
    style>
head>
<body>
    <div class="xiu">
        <p>段落p>
    div>
body>
html>
  • 優(yōu)先性
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>優(yōu)先級(jí)title>
    <style>
        /*
        繼承或者*的貢獻(xiàn)值 0000
        每個(gè)元素的貢獻(xiàn)值 0001
        每個(gè)類,偽類的貢獻(xiàn)值 0010
        每個(gè)ID的貢獻(xiàn)值 0100
        行內(nèi)樣式的貢獻(xiàn)值 1000
        每個(gè)!important的貢獻(xiàn)值 無窮大
        貢獻(xiàn)值越大,越先執(zhí)行
        貢獻(xiàn)值可以疊加,比如:
        div ul li {} -- 0003
        .xiu ul li {} -- 0012
        #xiu ul li {} -- 0102
        */
        .xiu {
            color: red!important;/*最先執(zhí)行*/
        }
        .xiu {
            color: blue;
        }
    style>
head>
<body>
    <div class="xiu">
        <p>段落p>
    div>
body>
html>

 背景圖片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>背景圖片title>
    <style>
        body {
            /*添加背景顏色*/
            background-color: red;
            /*添加背景圖片*/
            background-image: url(1.png);
            /*no-repeat圖片不平鋪 repeat-x水平平鋪 repeat-y垂直平鋪*/
            background-repeat: no-repeat;
            /*設(shè)置圖片位置 top上 bottom下 left左 right右 也可以寫數(shù)值x,y值 */
            background-position: right bottom;/*如果只寫一個(gè),剩下一個(gè)為居中center*/
            /*設(shè)置圖片滾動(dòng) fixed固定 scroll默認(rèn)滾動(dòng)而滾動(dòng)*/
            background-attachment: fixed;
            /*設(shè)置圖片透明度*/
            background: rgba(0,0,0,0.5);
            /*設(shè)置背景圖片的大小
            cover 等比例鋪滿整個(gè)盒子，超出范圍將隱藏
            contain 等比例鋪滿整個(gè)盒子，保證圖片始終顯示在盒子內(nèi) */
            background-size: 300px 300px;/*一般設(shè)置一個(gè)值，另外一個(gè)值默認(rèn)auto 等比例縮放*/
            /*background連寫方式*/
            /*background: 背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置*/
        }
    style>
head>
<body>
  
body>
html>

邊框

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框title>
    <style>
        table {
            width: 100px;
            height: 100px;
            /*設(shè)置邊框?qū)挾?/span>*/
            /*border-width: 1px;*/
            /*設(shè)置邊框樣式 none無邊框 solid實(shí)線邊框 dashed虛線 */
            /*border-style: dashed;*/
            /*設(shè)置邊框顏色*/
            /*border-color: red;*/
            /*設(shè)置上邊框*/
            /*border-top: 1px solid red;*/
            /*border連寫*/
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
        table,td {
            /*合并單元格相鄰邊框*/
            border-collapse: collapse;
        }
    style>
head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>修抗td>
            <td>修抗td>
        tr>
        <tr>
            <td>牛皮td>
            <td>牛皮td>
        tr>
    table>
body>
html>

 邊距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內(nèi)邊距與外邊距title>
    <style>
        /* padding 用于設(shè)置內(nèi)邊距:自身的邊框與自身內(nèi)部內(nèi)容的距離
        margin 用于設(shè)置外邊距:自身邊框與相鄰邊框的距離

        margin與padding的語法一樣:
        padding-top 上內(nèi)邊距
        padding-right 右內(nèi)邊距
        padding-bottom 下內(nèi)邊距
        padding-left 左內(nèi)邊距
        padding: 3px; 上下左右都是3px
        padding: 3px 4px; 上下為3px,左右為4px
        padding: 2px 3px 4px;上2px,左右為3px,下為4px
        padding: 1px 2px 3px 4px; 上1px,左2px,下3px,右4px
        
        padding不能為負(fù)數(shù)值
        padding在塊級(jí)元素下,上下左右可以隨意設(shè)置,會(huì)撐開盒子,一般要減去padding設(shè)置的高度寬度
        padding在行內(nèi)元素只有左右邊距有效果,上下不識(shí)別

        margin: 0 auto;設(shè)置水平居中,auto自動(dòng) 只對塊元素起作用
        margin在塊級(jí)元素下,上下左右可以隨意設(shè)置
        margin在行內(nèi)元素只有左右邊距有效果,上下不識(shí)別 */

        
    style>
head>
<body>
    
body>
html>
  • 邊距問題：1
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        /*外邊距合并*/
        .xiu {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 150px;
        }
        .kang {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;/*最終兩個(gè)盒子的距離已最大的那個(gè)為準(zhǔn)*/
        }
    style>
head>
<body>
    <div class="xiu">div>
    <div class="kang">div>
body>
html>
  •  邊距問題2
DOCTYPE html>
<

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2009.html

相關(guān)文章

  • 前端學(xué)習(xí)資源整理

    稍微整理了一下自己平時(shí)看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實(shí)踐 柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機(jī)端頁面自適應(yīng)布局 移動(dòng)前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機(jī)淘寶移動(dòng)端布局 fl...

    siberiawolf 評(píng)論0 收藏0

  • webpack入門學(xué)習(xí)手記（五）

    摘要：另外需要指定這個(gè)參數(shù)，表示在配置的數(shù)值以下的圖片才進(jìn)行編碼，超過的不進(jìn)行處理。代碼如下所以過程就是引入了，然后進(jìn)行打包處理，生成和。目前這個(gè)入門學(xué)習(xí)手記到這里就結(jié)束了。完相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

    AlphaWatch 評(píng)論0 收藏0

  • webpack -> vue Component 從入門到放棄（二）

    摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動(dòng)綁定需要的。當(dāng)需要加載的文件匹配的正則時(shí)，就會(huì)調(diào)用后面的對文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點(diǎn)升華。 First Step 我們給第一篇例子中加個(gè)...

    DobbyKim 評(píng)論0 收藏0

  • webpack -> vue Component 從入門到放棄（二）

    摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動(dòng)綁定需要的。當(dāng)需要加載的文件匹配的正則時(shí)，就會(huì)調(diào)用后面的對文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點(diǎn)升華。 First Step 我們給第一篇例子中加個(gè)...

    xiaochao 評(píng)論0 收藏0

  • CSS入門之引用、選擇器、屬性（六分之三）

    摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準(zhǔn)備說定位的時(shí)候，他們就喊停，不住了。。。選擇器表達(dá)式如下相關(guān)效果見表達(dá)式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇 沒辦法，我直播教小伙伴CSS入門，屬性講完，準(zhǔn)備說定位的時(shí)候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點(diǎn) 解釋 引用 如...

    baishancloud 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<