2019-04-29

基于CSS入門基礎(chǔ)必備

CSS選擇器:
    標(biāo)簽選擇器:
            標(biāo)簽名{樣式名1:樣式值1;.......}
            作用: 會(huì)將當(dāng)前網(wǎng)頁內(nèi)的所有該標(biāo)簽增加相同的樣式
    id選擇器:
           #標(biāo)簽的id屬性值{樣式名1:樣式值1;.......}
           作用:給某個(gè)指定的標(biāo)簽添加指定的樣式
    類選擇器:
            .類選擇器名{樣式名1:樣式值1;.......}
            作用:給不同的標(biāo)簽添加相同的樣式
    全部選擇器:
            *{樣式名1:樣式值1;.......}
            作用:選擇所有的HTML標(biāo)簽,并添加相同的樣式

----------------------------------------------------------------------------------
    組合選擇器:
            選擇器1,選擇器2,.....{樣式名1:樣式值1;.......}
            作用:解決不同的選擇器之間重復(fù)樣式的問題
    子標(biāo)簽選擇器:
            選擇器1 子標(biāo)簽選擇器{樣式名1:樣式值1;.......}
    屬性選擇器:
            標(biāo)簽名[屬性名=屬性值]{樣式名1:樣式值1;.......}
            作用:選擇某標(biāo)簽指定具備某屬性并且屬性值為某屬性的標(biāo)簽
CSS使用過程:
    1.聲明css代碼域
    2.使用選擇器選擇要添加樣式的標(biāo)簽
            根據(jù)需求:
                使用*選擇器給整個(gè)頁面添加基礎(chǔ)樣式
                使用類選擇器給不同的標(biāo)簽添加基礎(chǔ)樣式
                使用標(biāo)簽選擇器來給某類標(biāo)簽添加基礎(chǔ)樣式
                使用id,屬性選擇器,style屬性聲明的方式給某一個(gè)標(biāo)簽添加個(gè)性化樣式
    3.書寫樣式單
            邊框設(shè)置
                    border:solid 1px;
             字體設(shè)置
                    font-size:10px設(shè)置字體的大小
                    font-family:"黑體"; (設(shè)置字體的格式)
                    font-weight:bold; (設(shè)置字體加粗)
             字體顏色設(shè)置
                    color:顏色;
             背景色設(shè)置
                    background-color:顏色;
             背景圖片設(shè)置
                    background-img:url(圖片的相對(duì)路徑)
                    background-repeate:no-repeate; 設(shè)置圖片不重復(fù)
                    background-size:cover;圖片平鋪整個(gè)頁面
             寬高設(shè)置
             浮動(dòng)設(shè)置:
                    float:left;  ||  float:right;
             行高設(shè)置:
                     line-height:10;
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css選擇器</title>
        <style>
            /*標(biāo)簽選擇器*/
            table{

                background-color: aquamarine;
                border: solid 1px;
            }
            /*id選擇器*/
            #t1{
                background-color: blue;
            }
            /*類選擇器*/
            .common{
                width: 300px;
                color: black;
                height: 20px;
                background-color: blueviolet;
            }
            /*全部選擇器*/
            /*
            *{
                background-color: crimson;
            }*/
            /*組合選擇器*/
            #t1,table{
                width: 200px;
                height: 200px;
            }
            /*子標(biāo)簽選擇器*/
            p a{
               color: crimson;
            }
            /*屬性選擇器*/
         table[id=t2]{
             background-color: blueviolet;
         }

        </style>
    </head>
    <body>
        <h3>css選擇器</h3>
        <br>
        <hr class="common">
        <hr>
        <table id="t1" class="common">
            <tr>
                <td ></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table id="t2">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    <p id="as">
        <a >百度一下</a>
        <a>360搜索</a>
    </p>
    </body>
</html>
CSS選擇器的使用
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css選擇器使用</title>
        <style>
            table{
               /* background-image: url("../img/1.jpg");
                background-repeat: no-repeat;
                background-size: cover;*/
            }
            body{
                background-image: url("../img/1.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            td{
                width: 100px;/*設(shè)置寬*/
                color: yellow;/*設(shè)置文本的顏色*/
                border: solid 1px red;/*設(shè)置邊框的顏色和大小*/
                border-radius:10px;/*設(shè)置表框的角度*/
                text-align: center;/*設(shè)置文本位置*/
                font-weight: bold;/*設(shè)置文本加粗*/
                letter-spacing: 10px;/*設(shè)置字體間距*/
            }
            ul{
                background-color: gray;
                height: 50px;
            }
            /*使用屬性選擇器*/
            li{
                list-style-type: none;/*設(shè)置li標(biāo)識(shí)符*/
                float: left;/*設(shè)置菜單左浮動(dòng)*/
                /*display: inline;  !*也表示設(shè)置去除li的小黑點(diǎn)或者空心原點(diǎn)等標(biāo)識(shí)符*!*/
            }
            /*子標(biāo)簽選擇器*/
            li a {
                color: blueviolet;
                text-decoration: none; /*去掉超鏈接的下劃線*/
                font-weight: bold;/*加粗超鏈接文字*/
                font-size: 20px;/*設(shè)置超鏈接內(nèi)部標(biāo)簽字間距*/
                margin-left: 20px;/*設(shè)置超鏈接標(biāo)簽的間距*/
            }

        </style>
    </head>
    <body>
        <h3>css樣式獲取</h3>
        <table>
            <tr>
                <td>姓名</td>
                <td>學(xué)號(hào)</td>
                <td>成績</td>
            </tr>
            <tr>
                <td>張三</td>
                <td>101</td>
                <td>88</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>102</td>
                <td>99</td>
            </tr>
        </table>
        <ul>
            <li><a  target="_blank">百度</a></li>
            <li><a  target="_blank">京東</a></li>
            <li><a  target="_blank">淘寶</a></li>
        </ul>

    </body>
</html>
顯示效果
CSS制作照片墻
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墻</title>
    <style>
        body{
            background-color: aqua;
            text-align: center;
        }
        img{
            width: 200px;
            height: 200px;

            padding: 10px;
            background-color: white;
            margin: 30px;
            transform: rotate(-10deg) ;/*設(shè)置*/
        }
        /*偽類選擇器*/
        img:hover
        {
            transform:rotate(0deg)  scale(1.5);/*設(shè)置傾斜角度和縮放比例*/
            z-index: 1;/*設(shè)置顯示優(yōu)先級(jí)別*/
            transition: 1.5s;/*設(shè)置顯示時(shí)間*/
        }
    </style>
</head>
<body>
<br>
<br>
<br>
<br>
    <img src="../img/c8.jpg" alt="">
    <img src="../img/c14.jpg" alt="">
    <img src="../img/c9.jpg" alt=""><br>
    <img src="../img/c4.jpg" alt="">
    <img src="../img/c5.jpg" alt="">
    <img src="../img/c10.jpg" alt="">
</body>
</html>
效果顯示:
圖片.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鹰服,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子碍侦,更是在濱河造成了極大的恐慌,老刑警劉巖别洪,帶你破解...
    沈念sama閱讀 211,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件母债,死亡現(xiàn)場離奇詭異暇昂,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)掰烟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門爽蝴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人纫骑,你說我怎么就攤上這事蝎亚。” “怎么了先馆?”我有些...
    開封第一講書人閱讀 157,435評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵发框,是天一觀的道長。 經(jīng)常有香客問我煤墙,道長梅惯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,509評(píng)論 1 284
  • 正文 為了忘掉前任仿野,我火速辦了婚禮铣减,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘脚作。我一直安慰自己葫哗,他們只是感情好缔刹,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著劣针,像睡著了一般校镐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上捺典,一...
    開封第一講書人閱讀 49,837評(píng)論 1 290
  • 那天鸟廓,我揣著相機(jī)與錄音,去河邊找鬼辣苏。 笑死肝箱,一個(gè)胖子當(dāng)著我的面吹牛哄褒,可吹牛的內(nèi)容都是我干的稀蟋。 我是一名探鬼主播,決...
    沈念sama閱讀 38,987評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼呐赡,長吁一口氣:“原來是場噩夢啊……” “哼退客!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起链嘀,我...
    開封第一講書人閱讀 37,730評(píng)論 0 267
  • 序言:老撾萬榮一對(duì)情侶失蹤萌狂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后怀泊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茫藏,經(jīng)...
    沈念sama閱讀 44,194評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評(píng)論 2 327
  • 正文 我和宋清朗相戀三年霹琼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了务傲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,664評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡枣申,死狀恐怖售葡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情忠藤,我是刑警寧澤挟伙,帶...
    沈念sama閱讀 34,334評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站模孩,受9級(jí)特大地震影響尖阔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜榨咐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評(píng)論 3 313
  • 文/蒙蒙 一介却、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧祭芦,春花似錦筷笨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽轴或。三九已至,卻和暖如春仰禀,著一層夾襖步出監(jiān)牢的瞬間照雁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評(píng)論 1 266
  • 我被黑心中介騙來泰國打工答恶, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留饺蚊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,389評(píng)論 2 360
  • 正文 我出身青樓悬嗓,卻偏偏與公主長得像污呼,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子包竹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 第1章 HTTP資源 1.1 媒體類型 ??互聯(lián)網(wǎng)上的數(shù)據(jù)有很多不同的類型燕酷,Web服務(wù)器會(huì)把通過Web傳輸?shù)拿總€(gè)對(duì)...
    淺唱吶鍛慯閱讀 543評(píng)論 0 1
  • 靜態(tài)、動(dòng)態(tài)周瞎、偽靜態(tài)網(wǎng)頁1苗缩、什么是靜態(tài)網(wǎng)頁資源?放在服務(wù)器上看到的是什么,顯示的就是什么声诸,一旦存在于服務(wù)器上酱讶,就不會(huì)...
    苦丿咖啡閱讀 165評(píng)論 0 0
  • 充電樁其功能類似于加油站里面的加油機(jī),可以固定在地面或墻壁彼乌,安裝于公共建 筑(公共樓宇泻肯、商場、公共停車場等)和居民...
    尹曉峰_107c閱讀 571評(píng)論 0 0
  • 北望兮玉盤懸青空囤攀, 回首兮桂樹立鏡中软免! 高歌詩賦嘆其美艷絕倫于天地, 察納雅言贊其素潔無華耀乾坤焚挠。 月兮月兮膏萧, 山...
    Oia1993閱讀 580評(píng)論 0 0
  • 一.setter/getter方法 objc_setAssociatedObject objc_getAssoci...
    zcz朝閱讀 209評(píng)論 0 0