前端基礎---CSS

CSScss


1.CSS語法html

CSS 規則由兩個主要的部分構成選擇器以及一條或多條聲明api

        selector{瀏覽器

                  property:value;ide

                  property:value;佈局

             ... property: value字體

         

          }url

例如spa

h1 {color:red; font-size:14px;}orm

wKioL1nEoyDx9D4FAAB7jfS8kao212.png

 

2.CSS的四種引入方式

a.行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS

<p style="background-color:rebeccapurple">hello yuan</p>

 

b.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中

<head>

    <metacharset="UTF-8">

    <title>Title</title>

    <style>

        p{

            background-color: #2b99ff;

        }

    </style>

</head>

 

c.連接式

將一個.css文件引入到HTML文件中
<linkhref="mystyle.css" rel="stylesheet" type="text/css"/>

 

t.約pan style="font-family:'微軟雅黑', 'sans-serif';">導入式

將一個獨立的.css文件引入HTML文件中導入式使用CSS規則引入外部CSS文件<style>標記也是寫在<head>標記中

<style type="text/css">

          @import"mystyle.css";此處要注意.css文件的路徑

</style>

注意

      導入式會在整個網頁裝載完後再裝載CSS文件所以這就致使了一個問題若是網頁比較大則會兒出現先顯示無樣式的頁面閃爍一下以後再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件所以顯示出來的網頁從一開始就是帶樣式的效果的它不會象導入式那樣先顯示無樣式的網頁而後再顯示有樣式的網頁這是連接式的優勢

 

3.CSS選擇器

a.基本選擇器

wKioL1nEo1HCvTEDAACiY6Qs45U693.png



b.組合選擇器:

E,F     多元素選擇器,同時匹配全部E元素或F元素,逗號分隔     

:div,p { color:#f00; }

 

E F     後代元素選擇器,匹配全部屬於E元素下的F元素,空格分隔

:li a { font-weight:bold;

 

E > F    子元素選擇器,匹配全部E元素的子元素

:div > p { color:#f00; }

  

E + F    毗鄰元素選擇器,匹配全部緊隨E元素以後的同級元素F

(只匹配下面緊挨着的同級元素F,且只匹配一個) 

:div + p { color:#f00; } 

 

E ~ F    普通兄弟選擇器,以破折號分隔

(只匹配下面的同級元素F,匹配多個)

:.div1 ~ p{font-size: 30px; }

 

關於標籤嵌套:

塊級元素能夠包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。須要注意的是,p標籤不能包含塊級標籤

c.屬性選擇器

E[att]      匹配全部具備att屬性的E元素,不考慮它的值

(注意:E在此處能夠省略好比「[cheacked]」,如下同)

        p[title]{ color:#f00; }

 

E[att=val]    匹配全部att屬性等於「val」E元素

div[class=」error」] { color:#f00; }

 

E[att~=val]     匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」E元素

            td[class~=」name」] { color:#f00; }

 

E[attr^=val]    匹配屬性值以指定值開頭的每一個元素

         div[class^="test"]{background:#ffff00;}

 

E[attr$=val]   匹配屬性值以指定值結尾的每一個元素   

div[class$="test"]{background:#ffff00;}

 

E[attr*=val]   匹配屬性值中包含指定值的每一個元素   

div[class*="test"]{background:#ffff00;}

 

練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--屬性選擇器-->
    <style>
        /*自定義屬性*/
        [egon]{     /*具備egon屬性的標籤*/
        color:red;
    }

        [egon="ooo"]{   /*egon屬性的值爲ooo的標籤*/
            color: #2459a2;
        }
        [egon][alex]{   /*同時具備egon和alex屬性的標籤*/
            color: darkgreen;
        }
        [egon~="cow"]{  /*egon屬性的其中一個值爲cow的標籤*/
            color: rebeccapurple;
        }
        [egon^="na"]{   /*egon屬性的值開頭爲na字符的標籤*/
            color: black;
        }
        [egon$="o"]{    /*egon屬性的值結尾爲o字符的標籤*/
            color: darkgoldenrod;
        }
        [egon*="me"]{   /*egon屬性的值含有me字符的標籤*/
            color: coral;
        }
    </style>

</head>
<body>
<p egon="xxx" alex="sb">P4</p>
<p egon="ooo">P5</p>
<p egon="name cow">P6</p>
</body>
</html>

 

d.僞類選擇器

anchor僞類       專用於控制連接的顯示效果

a:link          (沒有接觸過的連接),用於定義了連接的常規狀態

a:hover (鼠標放在連接上的狀態),用於產生視覺效果

a:visited      (訪問過的連接),用於閱讀文章,能清楚的判斷已經訪問過的連接

a:active (在連接上按下鼠標時的狀態),用於表現鼠標按下時的連接狀態

       

 僞類選擇器 :

僞類指的是標籤的不一樣狀態:

a ==>點過狀態沒有點過的狀態 鼠標懸浮狀態 激活狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{     /* 未訪問的連接 */
          color: goldenrod;
        }
        a:hover{    /* 已訪問的連接 */
            color: green;
        }
        a:visited{  /* 鼠標移動到連接上 */
            color: darkgrey;
        }
        a:active{    /* 選定的連接,格式: 標籤:僞類名稱{ css代碼; }*/
            color: lightgreen;
        }
    </style>
</head>
<body>

<a href="">連接</a>
</body>
</html>


before after僞類 

a:before   p:before        在每一個<p>元素以前插入內容

a:after      p:after         在每一個<p>元素以後插入內容(追加)   

例:p:before{content:"hello";color:red;display:block;}

練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer:after{
            content: "world";
            color: red;
        }
    </style>
</head>
<body>
<div class="outer">
    <p>hello</p>
</div>
</body>
</html>

 

e.選擇器的優先級

1.css的繼承

依賴於祖先-後代的關係的,繼承是一種機制,它容許樣式不只能夠應用於某個特定的元素,還能夠應用於它的後代

例如一個BODY定義了的顏色值也會應用到段落的文本中

body{color:red;}      

<p>helloyuan</p>

這段文字都繼承了由body{color:red;}樣式定義的顏色,然而CSS繼承性的權重是很是低的,是比普通元素的權重還要低的0,任何顯示申明的規則均可以覆蓋其繼承樣式

有一些屬性不能被繼承,如:border,margin, padding, background

 

2.css的優先級

CSS樣式在瀏覽器中被解析的前後順序

樣式表中的特殊性描述了不一樣規則的相對權重,它的基本規則是:


內聯樣式表的權值最高         style=""------------1000

統計選擇符中的ID屬性個數       #id--------------100

統計選擇符中的CLASS屬性個數  .class-------------10

統計選擇符中的HTML標籤名個數     p --------------1

按這些規則將數字符串逐位相加,就獲得最終的權重,而後在比較取捨時按照從左到右的順序逐位比較

1、文內的樣式優先級爲1,0,0,0,因此始終高於外部定義

2、有!important聲明的規則高於一切

3、若是!important聲明衝突,則比較優先權

4、若是優先權同樣,則按照在源碼中出現的順序決定,後來者居上。

5、由繼承而獲得的樣式沒有specificity的計算,它低於一切其它規則(好比全局選擇符*定義的規則)

 

f.CSS屬性操做

1.文本屬性(CSS text屬性)

文本顏色:color

顏色的三種表示方式:

十六進制值 - FF0000

一個RGB - : RGB(255,0,0)

顏色的名稱 - :  red

 

文本的水平對齊方式:text-align

left           把文本排列到左邊。默認值:由瀏覽器決定

right     把文本排列到右邊

center        把文本排列到中間

justify        實現兩端對齊文本效果

 

文本的其餘屬性:

font-size: 10px;       字體大小

line-height: 200px;              文本行高,通俗的講,文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:4px             設置元素內容的垂直對齊方式 ,只對行內元素有效,對塊級元素無效(底線、中線、基線)

text-decoration:none           設置或刪除文本的裝飾。主要是用來刪除連接的下劃線

font-family: 'Lucida Bright'     字體(宋體等)

font-weight: lighter/bold/border/  文本粗細

font-style: oblique         字體傾斜(意大利斜等)

text-indent: 150px;            首行縮進150px

letter-spacing: 10px;           字母間距

word-spacing: 20px;           單詞間距

text-transform:capitalize/uppercase/lowercase ;        文本轉換,用於全部字句變成大寫或小寫字母,或每一個單詞的首字母大寫

 

2.背景屬性

屬性介紹

background-color          背景顏色

background-p_w_picpath         背景圖片

background-repeat        設置背景的重複方式(平鋪)

background-position      設置背景的位置(兩個座標)

 

練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        
        .c1{
            width: 100%;
            height: 500px;
            /*background-color: green;*/
            /*background-p_w_picpath: url("2.png");*/
            /*background-repeat: no-repeat;*/
            /*background-position: center center;*/
            /*以上三個屬性能夠簡寫*/
            background: url("2.png") no-repeat center center;
        }


    </style>
</head>
<body>
<div class="c1">yan</div>
</body>
</html>

 

3.邊框屬性

 

4.列表屬性

list-style-type          設置列表項標誌的類型

list-style-p_w_picpath        將圖象設置爲列表項標誌

list-style-position     設置列表中列表項標誌的位置

list-style          簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中

 

list-style-type屬性指定列表項標記的類型:ul { list-style-type: square;}

使用圖像來替換列表項的標記:

ul {

     list-style-p_w_picpath:url('');

            }

 

5.display屬性

none          隱藏某標籤(不佔空間位置)

p{display:none;}

注意與visibility:hidden的區別:

visibility:hidden  能夠隱藏某個元素,但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響佈局。

display:none           能夠隱藏某個元素,且隱藏的元素不會佔用任何空間。也就是說,該元素不但被隱藏了,並且該元素本來佔用的空間也會從頁面佈局中消失

 

練習:

none的應用:鼠標放置實現懸浮效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            border: 1px solid red;
        }
        .ico,.egon{
            display: inline-block;
        }
        /*設置圖片隱藏*/
        .myhide{
            display: none;
        }
        /*設置鼠標懸浮後顯示*/
        .box:hover img{
            display: block;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="text">absdfjkd</div>
    <div class="text">
        <div class="ico">????????????????????</div>
        <div class="egon"><img class="myhide" src="2.png" alt="" width="30px" height="30px"></div>
    </div>
</div>
</body>
</html>

 

block          內聯標籤設置爲塊級標籤

span {display:block;}          

注意:一個內聯元素設置爲display:block是不容許有它內部的嵌套塊元素

 

inline          塊級標籤設置爲內聯標籤

div {display:inline;}

練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: green;
            /*把塊級標籤設置爲內聯標籤*/
            display: inline;
        }
        span{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*把內聯標籤設置爲塊級標籤*/
            display: block;
        }

    </style>
</head>
<body>
<div class="c1">div</div>
<span>span</span>
</body>
</html>

 

inline-block        把一個標籤設置爲可設置長寬的內聯標籤

CSS佈局關鍵點:如何可以在一行顯示多個能夠調節長寬的元素

思路一:float

思路二:display:inline-block

 

練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: green;
            display: inline-block;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: beige;
            display: inline-block;
        }
        .c3{
            width: 200px;
            height: 200px;
            background-color: coral;
            display: inline-block;
        }
        /*調整inline-block之間的間隙*/
        div{
            margin-left: -5px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</body>
</html>

 

6.外邊距(margine)和內邊距(padding

margin:           用於控制元素與元素之間的距離;margin的最基本用途就是控制元素周圍空間的間隔,從視覺角度上達到相互隔開的目的。

padding:          用於控制內容與邊框之間的距離;  

Border(邊框):     圍繞在內邊距和內容外的邊框。

Content(內容):   盒子的內容,顯示文本和圖像

 

margine(外邊距)

單邊外邊距屬性:

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

簡寫屬性:

margin:10px 20px 20px 10px

       上邊距爲10px

       右邊距爲20px

       下邊距爲20px

       左邊距爲10px

 

margin:10px 20px 10px;

 

       上邊距爲10px

       左右邊距爲20px

       下邊距爲10px

 

margin:10px 20px;

 

       上下邊距爲10px

       左右邊距爲20px

 

margin:25px;

 

       全部的4個邊距都是25px

 

居中應用:

margin: 0 auto;

 

7.float屬性

基本浮動規則

block元素一般被現實爲獨立的一塊,獨佔一行,多個block元素會各自新起一行,默認block元素寬度自動填滿其父元素寬度。block元素能夠設置widthheightmarginpadding屬性;

常見的塊級元素有 divformtableppreh1h5dlolul 

inline元素不會獨佔一行,多個相鄰的行內元素會排列在同一行裏,直到一行排列不下,纔會新換一行,其寬度隨元素的內容而變化。inline元素設置widthheight屬性無效

常見的內聯元素有spanastrongemlabelinputselecttextareaimgbr

所謂的文檔流,指的是元素排版佈局過程當中,元素會自動從左往右,從上往下的流式排列

脫離文檔流,也就是將元素從普通的佈局排版中拿走,其餘盒子在定位的時候,會當作脫離文檔流的元素不存在而進行定位。

      假如某個div元素A是浮動的,若是A元素上一個元素也是浮動的,那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素,那麼A元素會被擠到下一行);若是A元素上一個元素是標準流中的元素,那麼A的相對垂直位置不會改變,也就是說A的頂部老是和上一個元素的底部對齊。此外,浮動的框以後的block元素元素會認爲這個框不存在,但其中的文本依然會爲這個元素讓出位置。 浮動的框以後的inline元素,會爲這個框空出位置,而後按順序排列

 

 

非徹底脫離文檔流

 左右結構div盒子重疊現象,通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上,但內容不會形成覆蓋現象,只有DIV造成覆蓋現象

解決方法:要麼都不使用浮動;要麼都使用float浮動;要麼對沒有使用float浮動的DIV設置margin樣式

父級坍塌現象

.containerbox3的佈局是上下結構,上圖發現box3跑到了上面,與.container產生了重疊,但文本內容沒有發生覆蓋,只有div發生覆蓋現象。這個緣由是由於第一個大盒子裏的子元素使用了浮動,脫離了文檔流,致使.container沒有被撐開。box3認爲.container沒有高度(未被撐開),所以跑上去了。

>>>>解決方法:

1、固定高度

.container設置固定高度,通常狀況下文字內容不肯定多少就不能設置固定高度,因此通常不能設置「.container」高度(固然能肯定內容多高,這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。

或者給.container加一個固定高度的子div

<div>

                <divid="box1">box1 向左浮動</div>

                <divid="box2">box2 向右浮動</div>

                <div id="empty"style="height: 100px"></div>

</div>

<div id="box3">box3</div>

可是這樣限定固定高度會使頁面操做不靈活,不推薦!

2、清除浮動(推薦)

clear語法:
clear : none | left | right | both

取值:
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象

可是須要注意的是:clear屬性只會對自身起做用,而不會影響其餘元素

把握住兩點:1、元素是從上到下、從左到右依次加載的。

                   2clear: left;對自身起做用,一旦左邊有浮動元素,即切換到下一行來保證左邊元素不是浮動的,依據這一點解決父級塌陷問題

3overflow:hidden

overflowhidden的含義是超出的部分要裁切隱藏,float的元素雖然不在普通流中,可是他是浮動在普通流之上的,能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下,它要計算內容的所有高度才能肯定在什麼位置hidden,這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開,清除浮動

 

 

 

8.position(定位)

相關文章
相關標籤/搜索