前端基礎之---css

時間 2019-11-17

標籤前端基礎 css 欄目 CSS 简体版

原文原文鏈接

css 介紹

css 規則有兩個主要的部分構成 : 選擇器 , 以及一條或多條聲明.css

如今的互聯網前端分爲三層 : html

　　　　● HTML :超文本標籤機語言,從語義的角度描述頁面結構.前端

　　　　● CSS : 層疊樣式表 , 從審美的角度負責頁面樣式.linux

　　　　● JS : JavaScript . 從交互的角度描述頁面行爲.css3

CSS : Cascading Style Sheet , 層疊樣式表.CSS的做用就是給HTML頁面標籤添加各類樣式,定義網頁的顯示效果 , 簡單的說 : CSS將頁面內容和顯示樣式進行分離 ,提升了顯示功能.web

使用CSS的緣由瀏覽器

HTML的缺陷 : 網絡

　　　　● 不可以適應多種設備ide

　　　　● 要求瀏覽器必須智能化足夠龐大佈局

　　　　● 數據和顯示沒有分開

　　　　● 功能不夠強大

CSS的優勢 :

　　　　● 是數據和顯示分開

　　　　● 下降網絡流量

　　　　● 使整個網站視覺效果一致

　　　　● 使開發效率提升了(耦合性下降,一我的負責寫html,一我的負責寫css)

好比說 : 有一個樣式須要在一百個頁面上顯示,若是是html來實現,須要些一百遍.可是要是css則只要一遍.因此如今html值提供數據和一些控件,css提供各類各樣的樣式.

CSS的四種引入方式

　　(1). 行內式　　

行內式是在標記的style屬性中設定css樣式,這種方式沒有體現出css的優點,不推薦使用.

<div>
    <p style="color : green">寶強</p>
</div>

　　(2) . 內接模式(嵌入式)　　

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;     #背景色
        }
    </style>
</head>

　　(3) . 連接式

將一個 .css 文件引入到 HTML 文件中

<link rel="stylesheet" href="./index.css">

　　(4) . 外接樣式---導入式　　

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

<style type="text/css">

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

</style>

注意 :

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

CSS 選擇器

　　1) . 基本選擇器

　　(1) . 標籤選擇器

標籤選擇器能夠選中全部的標籤元素,好比 div , ul ,li , p 等等,無論標籤藏的多深,都能選中,選中的是全部的,而不是某一個 ,因此說"共性"而不是"特性"

body{
    color:gray;
    font-size: 12px;
}
/*標籤選擇器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

標籤選擇器

　　(2) . id選擇器

#選中id

同一個頁面中id不能重複

任何標籤均可以設置id

id 命名規範 : 能夠是字母,下劃線-大小寫嚴格區分 , aa和AA是不同的屬性值

 1 #box{
 2     background:green;
 3 }
 4             
 5 #s1{
 6     color: red;
 7 }
 8 
 9 #s2{
10     font-size: 30px;
11 }

id選擇器

　　(3) . 類選擇器

所謂類 : 就是 class. class 和 id 很是相識,任何的標籤均可以加類,可是類是能夠重複的,屬於類的概念.同一個標籤中能夠攜帶多個類,用空格隔開.

 .lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }

 <!-- 公共類    共有的屬性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>

　　(4) . 通配符選擇器

通配符選擇器的做用就是重置樣式

*{
    padding:0;
    margin: 0;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
}

總結 :

　　　　不要試圖用一個類將咱們的頁面寫完,這個標籤要攜帶多個類,共同設置樣式

　　　　每一個類要儘量的小,有公共的概念,可以讓更多的標籤使用

究竟是使用id仍是class

答案 : 儘量的使用class,一些特殊狀況用 id
緣由 : id通常用於JS ,JS是經過id來獲取到標籤的

　　2) . 高級選擇器

　　(1) . 後代選擇器

使用空格表示後代選擇器.顧名思義,父元素的後代(包括兒子,孫子,重孫子)

　　(2) . 子代選擇器

使用 > 標籤子代選擇器.好比 div > p ,僅僅表示的是當前 div 元素中的子代(不包括孫子...)元素p.

　　(3) . 組合選擇器

多個選擇器之間使用逗號 "," 隔開.表示選中的頁面中的多個標籤,一些共性的元素,可使用組合選擇器.

好比像百度首頁使用的組合選擇器.

 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/

View Code

　　(4) . 交集選擇器

使用 . 點表示交集選擇器.第一個標籤必須是標籤選擇器,第二個標籤必須是類選擇器. 語法 : div.active ,好比有個<h4 class="active"><h4>

表示二者選中以後元素共有的特性.

　　3) . 屬性選擇器　　

屬性選擇器,就是根據標籤中的屬性,選中當前的標籤.

1./*根據屬性查找*/
            /*[for]{
                color: red;
            }*/
            
2.            /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
            /*[for='username']{
                color: yellow;
            }*/
            
3.            /*以....開頭  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
4.            /*以....結尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
5.            /*包含某元素的標籤*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
6.            /*指定單詞的屬性*/
            label[for~='user1']{
                color: red;
            }
            ************
            input[type='text']{
                background: red;
            }

　　4) . 僞類選擇器

僞類選擇器通常會用在超連接a標籤中,使用a標籤的僞類選擇器,咱們必定要遵循"愛恨準則",LoVe HAte.

 1               /*沒有被訪問的a標籤的樣式*/
 2         .box ul li.item1 a:link{
 3             
 4             color: #666;
 5         }
 6         /*訪問事後的a標籤的樣式*/
 7         .box ul li.item2 a:visited{
 8             
 9             color: yellow;
10         }
11         /*鼠標懸停時a標籤的樣式*/
12         .box ul li.item3 a:hover{
13             
14             color: green;
15         }
16         /*鼠標摁住的時候a標籤的樣式*/
17         .box ul li.item4 a:active{
18             
19             color: yellowgreen;
20         }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*a:hover{
            color: #ff6700
        }*/
        /*愛恨準則 LoVe HAte*/
        /*沒有被訪問的a標籤的顏色*/
        a:link{
            color: green;
        }
        /*訪問事後的a標籤的顏色*/
        a:visited{
            color: yellow;
        }
        /*鼠標懸停的時候a標籤的顏色*/
        a:hover{
            color: red;
        }
        /*鼠標按住是a標籤的顏色*/
        a:active{
            color: blue;
        }
        /*鼠標中止span時的變化*/
        span:hover{
            color: red;
            font-size: 24px;
            text-decoration: underline;
        }
        /*隱藏標籤*/
        .child{
            display: none;
        }
        /*鼠標中止父類時,隱藏的標籤出現*/
        .father:hover .child{
            color: red;
            display: block;
        }

    </style>
</head>
<body>
    <a href="#">百度一下</a>

    <span>aeale</span>

    <div class="father">
        tom
        <p class="child">feike</p>
    </div>
    
</body>
</html>

示例

css3的選擇器nth-child()

 /*選中第一個元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*選中最後一個元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*選中當前指定的元素 數值從1開始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示選中全部,這裏面必須是n, 從0開始的 0的時候表示沒有選中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶數*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇數*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔幾換色 隔行換色 隔4換色 就是5n+1,隔3換色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

　　5) . 僞元素選擇器　　

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
        
        
/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

　　6) . css的繼承性和層疊性

(1) . 繼承性

面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。

記住：有一些屬性是能夠繼承下來： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。

可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

(2) . 層疊性

層疊性：權重的標籤覆蓋掉了權重小的標籤，說白了，就是被幹掉了
權重：誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大？很是簡單就是小學的數數。
數：id的數量 class的數量標籤的數量，順序不能亂

總結 :

　　　　● 行內 > id > class > 標籤

　　　　● 繼承來的屬性,權重爲0,與選中的標籤沒有可比性

　　　　● 選中的標籤,權重同樣大,後來者居上

　　　　● 若是都是繼承來的屬性,保證就近原則(離標籤進的優先)

　　　　● 都是繼承來的標籤,選中的標籤同樣進,再去數權重

盒模型

盒模型的屬性

　　width：內容的寬度

　　height: 內容的高度

　　padding：內邊距，邊框到內容的距離

　　border: 邊框，就是指的盒子的寬度

　　margin：外邊距，盒子邊框到附近最近盒子的距離

盒模型的計算

若是一個盒子設置了padding，border，width，height，margin

盒子的真實寬度=width+2*padding+2*border

盒子的真實寬度=height+2*padding+2*border

那麼在這裏要注意看了。標準盒模型，width不等於盒子真實的寬度。

另外若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。真實高度同樣設置。

padding(內邊距)

padding：就是內邊距的意思，它是邊框到內容之間的距離

另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域

1.寫小屬性,分別設置不一樣方向的padding

padding-top: 30px;           距離上方30px
padding-right: 30px;         距離右邊30px
padding-bottom: 30px;     距離下面30px
padding-left: 30px;           距離左邊30px

2.寫綜合屬性,用空格隔開

/*上 右 下 左*/  (順時針)
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/ (集體移動)
padding: 20px;

border(邊框)

border : 邊框的意識,描述盒子的邊框.

邊框的三要素 : 粗細 , 線性樣式 , 顏色.

1.基本寫法

/*實線*/
border: 5px solid green;
/*圓點線*/
border: 1px dotted yellow;
/*雙實線*/
border: 5px double purple;
/*虛線*/
border: 1px dashed purple;

若是顏色不寫，默認是黑色。若是粗細不寫，不顯示邊框。若是隻寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，而且黑色的邊框。

2.按照方向劃分 :

/*實線*/
border-left: 5px solid green;
/*圓點線*/
border-right: 1px dotted yellow;
/*雙實線*/
border-top: 5px double purple;
/*虛線*/
border-bottom: 1px dashed purple;

效果 :

　　　　border:none；

　　　　border：0；

　　　　表示border沒有設置樣式。

3.使用border來製做三角形和圓形

###########箭頭向上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*color: transparent;*/
            width: 0px;
            height: 0px;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            

        }
    </style>
</head>
<body>
    <div>
        

    </div>
    
</body>
</html>

三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*color: transparent;*/
            width: 200px;
            height: 200px;
            background-color: red;
            /*製做圓角*/
            /*border-radius: 3px;*/
            /*border-radius: 100px;*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>
        

    </div>
    
</body>
</html>

圓形

margin(外邊距)

外邊距表示邊框到盒子的最近距離.

/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;
/*表示盒子向下移動了100px*/
margin-bottom: 100px;

注意 : 計算有個前提---在標準文檔流離

　　　　padding : 父子之間調整距離

　　　　margin : 兄弟之間調整距離

標準文檔流

咱們說margin要在標準文檔流下才能夠,那麼什麼是標準文檔流呢 ?

1.空白摺疊現象 : 多個空格被合併成一個空格顯示在瀏覽器頁面中.好比用 img 換行寫會出現圖片之間出現間隙.

2.高矮不齊,底邊對其 : 文字還有圖片大小不一,都會讓咱們的頁面有一種高愛不氣的現象,可是底邊對齊.

3.自行換行,一行寫不滿換行寫.: 僅限中文

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

（1）浮動
（2）絕對定位
（3）固定定位

display

display : 塊級元素與行內元素的轉換 :

display: block :將標籤當即變成塊級元素.

獨佔一行 / 能夠設置寬高, 若是不設置,則默認父盒子寬高的100%

display: inline :將標籤變成行內元素

　　　　　　　　在一行內顯示 / 不能夠設置寬高 ,根據內容顯示寬高.

display: inline-block :行內塊

　　　　　　　　　　在一行內顯示 / 能夠設置寬高 .

display: none :不顯示,隱藏 ,不在文檔上佔位置.

visibility: hidden :隱藏 ,在文檔上佔位置.

浮動

　浮動是css裏面佈局最多的一個屬性，也是很重要的一個屬性。

　　float：表示浮動的意思。它有四個值。

- none: 表示不浮動，默認
- left: 表示左浮動
- right：表示右浮動

注意 : 當盒子向右/左浮動時,若是右/左右浮動的盒子,那麼會貼近以浮動的盒子,沒有就去貼邊.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*<!--將屏幕沒有縫隙-->*/
        *{
            padding:0;
            margin: 0; 
        }
        /*這個div是將高爲40px的一條所有沾滿*/
        .top-Bar{
            width:100%;
            height: 40px;
            background-color: #333; 
        }
        /*須要的長度1226,高40,居中--綠色到黃色右邊的舉例*/
        .container{
            width: 1226px;
            height: 40px;
            /*background-color: red;*/
            margin-right: auto;
            margin-left: auto;
        }
        .top-Bar .top-l{
            width: 550px;
            height: 40px;
            background-color: green;
            /*浮動,要否則div是換行的*/
            float: left;
        }
        .top-Bar .top-shop{
            width: 100px;
            height: 40px;
            background-color: yellow;
            float: right;
        }
        .top-Bar .top-info{
            width: 200px;
            height: 40px;
            background-color: purple;
            float: right;
            /*距離右邊距20px*/
            margin-right: 20px;
        }
    </style>
</head>
<body>
    
    <div class="top-Bar">
        <div class="container">
            <div class="top-l">
                
            </div>
            <div class="top-shop"></div>
            <div class="top-info"></div>
        </div>
    </div>
</body>
</html>

示例

浮動的四大特性 :

　　　　1.浮動的元素脫標(脫離標準文檔流)

　　　　2.浮動的元素互相貼靠

　　　　3.浮動的元素有"子圍"的效果

　　　　4.收縮效果 : 一個浮動元素,若是沒有設置 width ,那麼自動收縮爲文字的寬度.

在標準文檔流下 : margin的垂直方向會出現塌陷問題.

　　　　盒子居中 : margin: 0 auto; 若是盒子浮動了 ,margin: 0 auto; 就沒有用了 .

文本水平居中 : text-align:center;

　　　　文本垂直居中: 行高=盒子的高度. (盒子若是浮動了,那麼垂直方向上不會出現塌陷問題)

在css中有三種方法讓盒子"脫表"

　　　　浮動float / 絕對定位 / 固定定位

　　　　注意 : 要浮動一塊兒浮動,有浮動,要清除浮動***************************

浮動的好處與缺點 :

　　　　　　---好處 : 使元素實現並排 / 就在頁面上佔位置

　　　　　　---缺點 : 子盒子浮動,不在頁面佔位置,若是父盒子不設置高度,那麼撐不起父盒子的高度,頁面會出現絮亂.

清除浮動

清除浮動的方法 :

　　　　1 . 給父盒子設置高度.(後期很差維護)

　　　　2 . clear:both

　　　　3 . 僞元素清除法

　　　　4 . overflow: hidden

clear:both

clear: 清除的意思

有三個值 :

left : 清除當前元素左邊的浮動元素

right : 清除當前元素右邊的浮動元素

both : 清除當前元素兩邊的浮動元素.

給浮動元素的後面加一個空的 div ,而且該元素不浮動 ,而後設置 clear (在該元素上面表示清除左邊.)

示例 :

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both  清除別人對個人浮動影響-->
            <!-- 內牆法 -->
            <!-- 平白無故加了div元素  結構冗餘 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

html

       *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

css

僞元素清除方法

給浮動元素的父盒子,也就是不浮動元素 ,添加一個 clearfix 的類,而後設置 :

.clearfix:after{
    /*必需要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}

新浪首頁推薦的僞元素清除法的寫法 :

            /*新浪首頁清除浮動僞元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

overflow: hidden 清除法

overflow 屬性規定當內容溢出元素框時發生的事情.

說明 :

　　這個屬性定義溢出元素內容區的內容如何處理.若是值爲 scroll ,不管是否須要,用戶代理都會提供一種滾動機制.所以,有可能即便元素框中能夠放下全部的內容也會出現滾動條.

有五個值 :

其實這是一個 BFC 區域: http://www.javashuo.com/article/p-ezyacvwn-v.html

記住 : BFC 內的元素之間互不影響.

css經常使用屬性.

// 中心對齊
text-align: center;
// 兩端對齊
text-align: justify;
/*首行縮進*/
text-indent: 2em;
// 字體大小
font-size: 14px;
// 修飾文本
text-decoration
        none;//沒有線
            underline;//有下劃線
line-height:
        //單行文本垂直居中：
                     line-height =  height

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。