CSS

1.1 CSS 整體重點(diǎn)

選擇器
盒子模型
浮動(dòng)
定位

1.2 CSS

作用： 1.美化網(wǎng)頁（通過css控制標(biāo)簽樣式） 2.網(wǎng)頁布局（通過css控制標(biāo)簽得位置）
書寫方法：
1.內(nèi)嵌式寫法

image.png

標(biāo)簽選擇器（有弊端就是有多個(gè)相同標(biāo)簽的內(nèi)容時(shí)将宪，修改一個(gè)標(biāo)簽的css，所有相同的標(biāo)簽都會(huì)改變夺衍，可以選擇為類選擇器）

image.png

效果：

image.png

css常見屬性總結(jié)：

image.png

在input標(biāo)簽里如果想placeholder里的默認(rèn)字也設(shè)置顏色挪丢，就需要在input標(biāo)簽里加id屬性蹂风，

image.png

效果：

image.png

類選擇器（常用）

通過 .類名來修改樣式，而類名實(shí)則是在標(biāo)簽里添加class=類名

image.png

css里注釋符號(hào) / */
注意 class類可以有多個(gè)名字乾蓬，例如“

image.png

效果：

image.png

類命名的規(guī)范

不能以純數(shù)字或者數(shù)字開頭
不推薦使用漢字
不推薦使用特殊字符開頭
一般我們用具有一定語義的單詞和拼音的類名
css的介個(gè)屬性

image.png

ID選擇器（了解）

image.png

通配符選擇器

image.png

補(bǔ)充屬性

單位：
px: 像素
em：1em==一個(gè)文字的大小
顏色表示方式：

red green.....
十六進(jìn)制表示（#000-fff）

font 屬性

image.png

font屬性聯(lián)寫

image.png

復(fù)合選擇器

image.png

后代選擇器

image.png

效果：

image.png

子代選擇器

image.png

代碼：

image.png

并集選擇器

image.png

結(jié)構(gòu)偽類選擇器

image.png

屬性選擇器

image.png

偽元素選擇器

image.png

標(biāo)簽顯示方式

image.png

塊級(jí)元素

image.png

行內(nèi)元素

image.png

所有行內(nèi)元素都在一行上
行內(nèi)元素不能設(shè)置寬度和高度

行內(nèi)塊元素

代表標(biāo)簽：input img
特點(diǎn)：1.可以設(shè)置寬度和高度 2.元素在一行上顯示

元素模式的轉(zhuǎn)換

轉(zhuǎn)化為塊級(jí)元素：display:block;
轉(zhuǎn)化為行內(nèi)塊元素：display:inline-block硫眨；
轉(zhuǎn)行內(nèi)元素：display:inline;
總結(jié);

image.png

偽元素

image.png

CSS特性

層疊性

image.png

繼承性

image.png

優(yōu)先級(jí)

image.png

繼承的權(quán)重為0

image.png

總結(jié)：

image.png

偽類（也是一種選擇器）

image.png

3（常用:）
設(shè)置鼠標(biāo)懸停在上面顯示的顏色設(shè)置

image.png

默認(rèn)情況下，a標(biāo)簽下有下劃線巢块，可在a:link{text-decoration:noe}去除下劃線礁阁，想要懸停時(shí)出現(xiàn)下劃線可在
a:hover{text-decoration:underline}設(shè)置出來
其他標(biāo)簽也可以用

image.png

靈活便用，可以把鼠標(biāo)放到父類標(biāo)簽上族奢，讓它的子類有變化：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:300px;
        height:300px;
        background-color:red;}
        .two {
        width:30px;
        height:30px;
        background-color:green;}
        .one:hover .two{
        background-color:pink;}
    </style>
</head>
<body>
    <div class='one'>
        <div class='two'></div>
    </div>
</body>
</html>

這樣把鼠標(biāo)放到one類標(biāo)簽姥闭，那么他的子類標(biāo)簽也會(huì)變顏色，不用把標(biāo)簽直接放到子類上

image.png

導(dǎo)航案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        text-align:center;
        height:40px;
        background-color:pink;
        }
        .one a {
        color:red;
        width:50px;
        height:40px;
        text-decoration:none;
        display:inline-block;
        }
        .one a:hover {
        color:orange;
        background-color:yellow;
        text-decoration:underline;}
        .one .public {
        color:blue; }
    </style>
    
</head>
<body>
    <div class='one'>
        <a href="#">首頁1</a>
        <a href="#">首頁2</a>
        <a href="#" class='public'>首頁3</a>
        <a href="#" class='public'>首頁4</a>
    </div>
    
</body>
</html>

效果圖：

image.png

background 屬性介紹

image.png

background-position注意：

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .box {
        width:30px;
        height:40px;
        background-color:red;
        background-image:url('g.jpg');
        background-repeat:no-repeat;
        background-position:top left;
        background-position:top;}
    </style>
</head>
<body>
    <div class='box'>
        
    </div>
</body>
</html>

background 屬性聯(lián)動(dòng) 類似font

image.png

目標(biāo)偽類

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        body {
        height:3000px;}
        div:target{
        background-color:red;}
    </style>
</head>
<body>
    <div>自私的很多很多煩惱防護(hù)設(shè)備設(shè)備</div>
    <div>自私的很多很多煩惱防護(hù)設(shè)備設(shè)備</div>
    <div id='test'>123自私的很多很多煩惱防護(hù)設(shè)備設(shè)備</div>
    <div>自私的很多很多煩惱防護(hù)設(shè)備設(shè)備</div>
    <div>自私的很多很多煩惱防護(hù)設(shè)備設(shè)備</div>
    <div>自私的很多很多煩惱防護(hù)設(shè)備設(shè)備</div>
    
    <a href="#test">找123</a>
</body>
</html>

購物車案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:93px;
        height:46px;
        background-image:url('shopping.png');}
        .one:hover{
        background-position:left bottom;}
    </style>
</head>

<body>
    <div class='one'>
        
    </div>
</body>
</html>

效果：

image.png

或者可以用偽元素的方法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        body::before{
        content:'';
        width:93px;
        height:46px;
        display:inline-block;
        background-image:url('shopping.png');
        }
        body:hover:before{
        background-position:left bottom;}
        
        
    </style>
</head>

<body>
    
</body>
</html>

新知識(shí)學(xué)習(xí)

background-size

image.png

有兩個(gè)屬性：

image.png

做專題頁面時(shí)越走，可以把整個(gè)瀏覽器頁面換成一個(gè)背景圖棚品，可以用到cover屬性,背景圖隨著瀏覽器縮放靠欢，背景圖跟著縮放

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        html,body {
        width:100%;
        height:100%;
        margin:0px;
        padding:0px;}
        a {
        width:100%;
        height:100%;
        display:block;
        background:red url('7.jpg') no-repeat;  
        background-size:cover;
        }
        
    </style>
</head>

<body>
    <a href="#"></a>
</body>
</html>

image.png

多背景

可以給一個(gè)容器設(shè)置多個(gè)背景圖

image.png

漸變

image.png

線性漸變

image.png

效果

image.png

通過角度改變

image.png

注意
0beg 是從上到下漸變

image.png

90beg 從左往右漸變

image.png

可以做進(jìn)度條

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        height:150px;
        width:1000px;
        background-image:linear-gradient(
        135deg,
        red 25%,
        blue 25%,
        blue 50%,
        red 50%,
        red 75%,
        blue 75%
        );
        
        background-size:100px 100px;
        
        }
        
        
        
        
    </style>
</head>

<body>
    <div class="one"></div>
    
</body>
</html>

image.png

徑向漸變（了解）

image.png

行高

image.png

行高單位

px em % 純數(shù)字

盒子模型（重點(diǎn)）

作用：網(wǎng)頁布局【畫盒子】
組成：1.內(nèi)容組成；2.邊框铜跑；3.內(nèi)邊距门怪；4.外邊距

image.png

邊框（border）

與font background一樣可以聯(lián)動(dòng)

image.png

屬性聯(lián)寫

image.png

改變邊框的某一條邊

image.png

去掉輪廓線

image.png

作業(yè)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        border:none;
        border:1px solid red;
        outline-style:none;}
        .one:focus{
        background-color:pink;}
        
    </style>
</head>
<body>
    電話 ：<input type="text" name='uesr' class='one'>
</body>
</html>

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        border:none;
        border-bottom:1px dashed red;
        outline-style:none;}
        .one:focus{
        background-color:pink;}
        
    </style>
</head>
<body>
    郵箱 ：<input type="email" name='uesr' class='one'>
</body>
</html>

image.png

label 標(biāo)簽關(guān)聯(lián)屬性

image.png

可以做細(xì)線表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        table{
        width:400px;
        height:400px;}
        table,td{
        border:1px solid red;
        border-collapse:collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:400px;
        height:40px;
        border:1px solid red;
        border-radius:5px;
        }
    </style>
    
</head>
<body>
    <div class="one"></div>
</body>
</html>

效果

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:400px;
        height:400px;
        border:1px solid red;
        border-radius:200px;
        }
    </style>
    
</head>
<body>
    <div class="one"></div>
</body>
</html>

畫個(gè)圓

image.png

padding介紹（內(nèi)邊距）

image.png

所以：

image.png

盒子的實(shí)際大小（重點(diǎn)）

image.png

讓盒子居中

image.png

案例

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        .one {
        width:400px;
        height:225px;
        background-color:pink;
        padding-left:100px;
        padding-top:75px;
        }
        .two {
        width:300px;
        height:150px;
        background-color:red;}
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>

效果

image.png

分析：首先大盒子的實(shí)際大小是在跟內(nèi)容區(qū)域一樣大锅纺，小盒子在大盒子里面掷空，所以小盒子在大盒子的內(nèi)容里的，通過改變大盒子的內(nèi)邊距padding就可以改變大盒子內(nèi)容區(qū)域（改變小盒子的位置）

外邊距特點(diǎn)

盒子與盒子的距離

image.png

案例學(xué)習(xí)

image.png

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type]='text/css'>
       *{
       margin:0;
       padding:0;
       list-style:none;}
       /* 父元素 */
       .one {
       width:238px;
       height:166px;
       border:1px solid #D9E0EE;
       border-top:3px solid #FF8400;
       margin:0px auto;}
       /* 標(biāo)題 */
       div .title {
       height:35px;
       padding-left:13px;
       border-bottom:1px solid #D9E0EE;
       line-height:36px;}
       /* 內(nèi)容 */
       div .content {
       height:120px;
       padding-top:10px;
       }
       /* 內(nèi)容a */
       .content a {
       height:23px;
       text-decoration:none;
       color:#666666;
       padding-left:16px;  }
       
       .content li {
       background:url('li_bg.jpg') no-repeat 7px 9px;}
       .content a:hover {
       color:pink;
       text-decoration:underline;}
       
   </style>
</head>
<body>
   <div class="one">
       <div class="title"><h6>行業(yè)動(dòng)態(tài)</h6></div>
       <div class="content">
           <ul>
               <li><a href="#">氣質(zhì)不凡絕妙簽名</a></li>
               <li><a href="#">精彩你的手機(jī)生活</a></li>
               <li><a href="#">讓草根推舉草根</a></li>
               <li><a href="#">精彩生活快來看</a></li>
               <li><a href="#">草根名博有伯樂</a></li>
           </ul>
           
       </div>
   </div>
</body>
</html>

效果：

image.png

padding特性

image.png

box-sizing

image.png

浮動(dòng)

image.png

網(wǎng)頁布局

清除浮動(dòng)

1使用clear清除 left | right | both

image.png

2使用偽元素（推薦方式)

image.png

3使用overflow:hadder

image.png

CSS樣式初始化(了解）

overflow （了解）

image.png

定位

image.png

靜態(tài)定位

image.png

絕對(duì)定位（重點(diǎn)）

image.png

相對(duì)定位（重點(diǎn)）

image.png

子絕父相案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
        body,input{
            margin:0;
            padding:0;
            outline-style:none;
            border: 0 none;
        }
        .search {
            width:300px;
            height:50px;
            border:1px solid red;
            margin-left:100px;
            position:relative;
            

        }
        input {
            height:100%;
            width:100%;
        }

        .search a {
            position:absolute;
            right:0px;
            top:13px;
            
        
        }
        
    </style>
</head>
<body>
    <div class="search">
        <input type="text">
        <a href="#">搜索</a>
    </div>
    
</body>
</html>

效果

image.png

絕對(duì)定位（脫標(biāo)）的元素居中顯示

image.png

固定定位

image.png

定位的層級(jí)關(guān)系

image.png

標(biāo)簽規(guī)范

image.png

網(wǎng)頁脫標(biāo)流

image.png

圖片垂直對(duì)齊方式

image.png

行內(nèi)元素不能直接使用margin-top
知道是行內(nèi)塊元素就有基線對(duì)齊囤锉，所以盡量不要設(shè)置行內(nèi)塊元素

image.png

元素隱藏方式

image.png

logo 的移除

image.png

盒子陰影

image.png

精靈圖使用

image.png

滑動(dòng)門

image.png

web 字體

image.png

圖標(biāo)文件

//www.iconfont.cn 在這個(gè)網(wǎng)址里找

過渡（transition）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one {
            width: 300px;
            height:300px;
            background-color:red;
            /*設(shè)置過度*/
            transition:all 1s 1s linear;
        }
        .one:hover {
            width:200px;
            height:200px;
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

2D轉(zhuǎn)換（transform）

image.png

3D轉(zhuǎn)換(transform)【變形】

位移

image.png

最后編輯于：2019.02.12 20:56:00

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末坦弟，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子官地，更是在濱河造成了極大的恐慌酿傍，老刑警劉巖，帶你破解...
沈念sama閱讀 218,122評(píng)論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件驱入，死亡現(xiàn)場(chǎng)離奇詭異赤炒，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)亏较，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,070評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門莺褒，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人宴杀，你說我怎么就攤上這事∈耙颍” “怎么了旺罢？”我有些...
開封第一講書人閱讀 164,491評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)绢记。經(jīng)常有香客問我扁达，道長(zhǎng)，這世上最難降的妖魔是什么蠢熄？我笑而不...
開封第一講書人閱讀 58,636評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任跪解，我火速辦了婚禮，結(jié)果婚禮上签孔，老公的妹妹穿的比我還像新娘叉讥。我一直安慰自己，他們只是感情好饥追，可當(dāng)我...
茶點(diǎn)故事閱讀 67,676評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布图仓。她就那樣靜靜地躺著，像睡著了一般但绕。火紅的嫁衣襯著肌膚如雪救崔。梳的紋絲不亂的頭發(fā)上惶看，一...
開封第一講書人閱讀 51,541評(píng)論 1贊 305
城市分裂傳說
那天，我揣著相機(jī)與錄音六孵，去河邊找鬼纬黎。笑死，一個(gè)胖子當(dāng)著我的面吹牛劫窒，可吹牛的內(nèi)容都是我干的本今。我是一名探鬼主播，決...
沈念sama閱讀 40,292評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼烛亦，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼诈泼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起煤禽，我...
開封第一講書人閱讀 39,211評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤铐达，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后檬果，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瓮孙，經(jīng)...
沈念sama閱讀 45,655評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,846評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年选脊，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杭抠。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,965評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡恳啥，死狀恐怖偏灿，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情钝的，我是刑警寧澤翁垂，帶...
沈念sama閱讀 35,684評(píng)論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站硝桩，受9級(jí)特大地震影響沿猜，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜碗脊，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,295評(píng)論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一啼肩、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧衙伶，春花似錦祈坠、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,894評(píng)論 0贊 22
一樁弒父案颁虐，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至卧须，卻和暖如春另绩，著一層夾襖步出監(jiān)牢的瞬間儒陨，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,012評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工笋籽，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蹦漠，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,126評(píng)論 3贊 370
代替公主和親
正文我出身青樓车海，卻偏偏與公主長(zhǎng)得像笛园，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子侍芝，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,914評(píng)論 2贊 355

CSS

1.1 CSS 整體重點(diǎn)

1.2 CSS

標(biāo)簽選擇器（有弊端就是有多個(gè)相同標(biāo)簽的內(nèi)容時(shí)将宪，修改一個(gè)標(biāo)簽的css，所有相同的標(biāo)簽都會(huì)改變夺衍，可以選擇為類選擇器）

類選擇器（常用）

類命名的規(guī)范

ID選擇器（了解）

通配符選擇器

補(bǔ)充屬性

font 屬性

復(fù)合選擇器

后代選擇器

子代選擇器

并集選擇器

結(jié)構(gòu)偽類選擇器

屬性選擇器

偽元素選擇器

標(biāo)簽顯示方式

塊級(jí)元素

行內(nèi)元素

行內(nèi)塊元素

元素模式的轉(zhuǎn)換

偽元素

CSS特性

偽類（也是一種選擇器）

導(dǎo)航案例

background 屬性介紹

background 屬性聯(lián)動(dòng) 類似font

目標(biāo)偽類

購物車案例

新知識(shí)學(xué)習(xí)

多背景

漸變

徑向漸變（了解）

行高

行高單位

盒子模型（重點(diǎn)）

邊框（border）

padding介紹（內(nèi)邊距）

盒子的實(shí)際大小（重點(diǎn)）

外邊距特點(diǎn)

案例學(xué)習(xí)

padding特性

box-sizing

浮動(dòng)

網(wǎng)頁布局

清除浮動(dòng)

CSS樣式初始化(了解）

overflow （了解）

定位

靜態(tài)定位

絕對(duì)定位（重點(diǎn)）

相對(duì)定位（重點(diǎn)）

子絕父相案例

絕對(duì)定位（脫標(biāo)）的元素居中顯示

固定定位

定位的層級(jí)關(guān)系

標(biāo)簽規(guī)范

網(wǎng)頁脫標(biāo)流

圖片垂直對(duì)齊方式

元素隱藏方式

logo 的移除

盒子陰影

精靈圖使用

滑動(dòng)門

web 字體

圖標(biāo)文件

過渡（transition）

2D轉(zhuǎn)換（transform）

3D轉(zhuǎn)換(transform)【變形】

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