天天看點
傳回

第13天，CSS

目錄 

一、css文法
二、css的四種引入方式
    2.1 行内式
    2.2 嵌入式
    2.3 連結式
    2.4 導入式
    
三、css選擇器
    3.1 基本選擇器
    3.2 組合選擇器
    3.3 屬性選擇器
    
四、css屬性操作
    4.1 文本屬性
        4.1.1 文本顔色：color
        4.1.2 水準對齊方式：text-align
        4.1.3 文本其它屬性
    4.2 背景屬性
    4.3 邊框屬性
    4.4 清單屬性
    4.5 display屬性
        none （隐藏某标簽）
        block （内聯标簽設定為塊級标簽）
        inline （塊級标簽設定為内聯标簽）
        inline-block
    4.6 外邊距（margin）和内邊距（padding）
        4.6.1 盒子模型
        4.6.1 margin（外邊距）
        4.6.2 padding（内邊距）
        4.6.3 執行個體
        4.6.4 思考
    4.7 float屬性
        4.7.1 基本浮動規則
            非完全脫離文檔流
            父級坍塌現象

一、css文法

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

selector {
    property: value;
    property: value;
    property: value
    ...
  }

例如：

h1 {color:red; font-size:14px;}
第13天，CSS

Paste_Image.png

二、css的四種引入方式

2.1 行内式

行内式是在标記的style屬性中設定CSS樣式。這種方式沒有展現出CSS的優勢，不推薦使用。

例：

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

2.2 嵌入式

嵌入式是将CSS樣式集中寫在網頁的

<head></head>

标簽對的

<style></style>

标簽對中。格式如下：

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

2.3 連結式

将一個.css檔案引入到HTML檔案中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

2.4 導入式

将一個獨立的.css檔案引入HTML檔案中，導入式使用CSS規則引入外部CSS檔案，<style>标記也是寫在<head>标記中，使用的文法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css檔案的路徑
 
</style>

注意：

導入式會在整個網頁裝載完後再裝載CSS檔案，是以這就導緻了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。

使用連結式時與導入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，是以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

三、css選擇器

3.1 基本選擇器

第13天，CSS

基本選擇器

3.2 組合選擇器 

E,F   多元素選擇器，同時比對所有E元素或F元素，E和F之間用逗号分隔      :div,p { color:#f00; }
 
E F   後代元素選擇器，比對所有屬于E元素後代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝
 
E > F   子元素選擇器，比對所有E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗鄰元素選擇器，比對所有緊随E元素之後的同級元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟選擇器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }
注意，關于标簽嵌套：
一般，塊級元素可以包含内聯元素或某些塊級元素，但内聯元素不能包含塊級元素，它隻能包含其它内聯元素。需要注意的是，p标簽不能包含塊級标簽。

3.3 屬性選擇器 

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;}

四、css屬性操作

4.1 文本屬性

4.1.1 文本顔色：color

顔色屬性被用來設定文字的顔色。

顔色是通過CSS最經常的指定：

  • 十六進制值 - 如: ＃FF0000
  • 一個RGB值 - 如: RGB(255,0,0)
  • 顔色的名稱 - 如: red

p { color: rebeccapurple; }

4.1.2 水準對齊方式：text-align

text-align 屬性規定元素中的文本的水準對齊方式。

  • left 把文本排列到左邊。預設值：由浏覽器決定。
  • right 把文本排列到右邊。
  • center 把文本排列到中間。
  • justify 實作兩端對齊文本效果。

h2 {text-align:center;}

4.1.3 文本其它屬性 

font-size: 10px;    文本字型大小

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基于字型大小的百分比；将文本行高（line-height）的值設定的和框高(height)的值一樣時，就可以實作文本行在框内垂直居中的效果。

vertical-align:－4px  設定元素内容的垂直對齊方式 ,隻對行内元素有效，對塊級元素無效；

text-decoration:none       text-decoration 屬性用來設定或删除文本的裝飾。主要是用來删除連結的下劃線；

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 ; 文本轉換，用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。

4.2 背景屬性

  • background-color: green; 背景色
  • background-image:url('1.jpg'); 以圖檔為背景
  • background-repeat: repeat; 背景平鋪滿，no-repeat不平鋪滿，repeat-x水準鋪滿，repeat-y垂直鋪滿；
  • background-position: right top; 背景定位，也可以用像素表示（100px 50px），第一個值表示水準方向，第二個值表示垂直方向；

以上四項也可以簡寫：

background:#ffffff url('1.png') no-repeat right top;

4.3 邊框屬性

  • border-width: 2px; 邊框寬度
  • border-style (required): solid; 邊框線的樣式，solid: 實線; dashed: 虛線；
  • border-color: red; 邊框線的顔色；

以上三項也可以簡寫為一行：

border: 30px rebeccapurple solid;

邊框也可以單獨設定各邊的屬性：

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

4.4 清單屬性 

list-style-type     設定清單項标志的類型。
list-style-image    将圖象設定為清單項标志。
list-style-position 設定清單中清單項标志的位置。
 
list-style          簡寫屬性。用于把所有用于清單的屬性設定于一個聲明中

list-style-type

屬性指定清單項标記的類型：

ul { list-style-type: square; }

使用圖像來替換清單項的标記:

ul { list-style-image: url('s.png'); }

4.5 display屬性

display屬性值有以下四個：

  • none
  • block
  • inline
  • inline-block

none （隐藏某标簽）

p{display:none;}

注意與

visibility: hidden;

的差別：

  • visibility:hidden;

     可以隐藏某個元素，但隐藏的元素仍需占用與未隐藏之前一樣的空間。也就是說，該元素雖然被隐藏了，但仍然會影響布局。

  • display: none;

     可以隐藏某個元素，且隐藏的元素不會占用任何空間。也就是說，該元素不但被隐藏了，而且該元素原本占用的空間也會從頁面布局中消失。

block （内聯标簽設定為塊級标簽）

span {display:block;}
注意：一個内聯元素設定為display:block是不允許有它内部的嵌套塊元素。

inline （塊級标簽設定為内聯标簽）

li {display:inline;}

display:inline-block

可做清單布局，其中的類似于圖檔間的間隙小bug可以通過如下設定解決：

#outer{
   border: 3px dashed;
   word-spacing: -5px;
}

4.6 外邊距（margin）和内邊距（padding）

4.6.1 盒子模型

第13天，CSS

盒子模型

  • margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到互相隔開的目的。
  • padding: 用于控制内容與邊框之間的距離；
  • border(邊框): 圍繞在内邊距和内容外的邊框。
  • content(内容): 盒子的内容，顯示文本和圖像。

4.6.1 margin（外邊距）

盒子與盒子之間的距離

單邊外邊距屬性：

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;

将盒子水準居于螢幕正中間，距離螢幕頂部為0像素；如果這裡的0換成20px，則會将盒子向下移動20像素；

4.6.2 padding（内邊距）

單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。

設定同

margine

；

4.6.3 執行個體

頁碼執行個體：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            width: 80%;

        }

        .content{
            background-color: darkgrey;
            height: 500px;

        }

        a{
            text-decoration: none;
        }

        .page-area{

            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f0ad4e;

        }

        .page-area ul li{
            display: inline-block;
        }


       .page-area ul li a ,.page-area ul li span{

            display: inline-block;
            color: #369;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;

            padding: 8px;
            margin-left: 8px;

            border: 1px solid #e1e1e1;
            border-radius: 15%;

        }

       .page-area ul li .page-next{
           width: 70px;
           border-radius:0
       }


       .page-area ul li span.current_page{
           border: none;
           color: black;
           font-weight:900;
       }

       .page-area ul li a:hover{

           color: #fff;
           background-color: #2459a2;
       }
    </style>
</head>
<body>
<div class="outer">

<div class="content"></div>

<div class="page-area">

             <ul>

                 <li><span class="current_page">1</span></li>
                 <li><a href="#" class="page-a">2</a></li>
                 <li><a href="#" class="page-a">3</a></li>
                 <li><a href="#" class="page-a">4</a></li>
                 <li><a href="#" class="page-a">5</a></li>
                 <li><a href="#" class="page-a">6</a></li>
                 <li><a href="#" class="page-a">7</a></li>
                 <li><a href="#" class="page-a">8</a></li>
                 <li><a href="#" class="page-a">9</a></li>
                 <li><a href="#" class="page-a">10</a></li>
                 <li><a href="#" class="page-a page-next">下一頁</a></li>

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

代碼實作的效果如下圖：

第13天，CSS

4.6.4 思考

思考1: body的外邊距

邊框在預設情況下會定位于浏覽器視窗的左上角，但是并沒有緊貼着浏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），在預設情況下， body距離html會有若幹像素的margin，具體數值因各個浏覽器不盡相同，是以body中的盒子不會緊貼浏覽器視窗的邊框了，為了驗證這一點，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>解決方法：

body{
    margin: 0;
}

思考2：margin collapse（邊界塌陷或者說邊界重疊）

1、兄弟div：

上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值

2、父子div：

if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個标簽包括border，padding，inline content中的其中一個，然後按此div 進行margin；

如下代碼實作：

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

overflow: hidden;

4.7 float屬性

4.7.1 基本浮動規則

先來了解一下block元素和inline元素在文檔流中的排列方式。

block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；

inline元素不會獨占一行，多個相鄰的行内元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度随元素的内容而變化。inline元素設定width、height屬性無效。

  • 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
  • 常見的内聯元素有span、a、strong、em、label、input、select、textarea、img、br等。

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

脫離文檔流，也就是将元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

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

非完全脫離文檔流

左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導緻DIV不是在同個“平面”上，但内容不會造成覆寫現象，隻有DIV形成覆寫現象。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;

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

<div class="r1"></div>
<div class="r2">region2</div>
</body>
</html>

>>>解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設定margin樣式。

父級坍塌現象 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container産生了重疊，但文本内容沒有發生覆寫，隻有div發生覆寫現象。這個原因是因為第一個大盒子裡的子元素使用了浮動，脫離了文檔流，導緻.container沒有被撐開。box3認為.container沒有高度（未被撐開），是以跑上去了。

>>>解決方法:

1. 固定高度

給.container設定固定高度，一般情況下文字内容不确定多少就不能設定固定高度，是以一般不能設定“.container”高度(當然能确定内容多高，這種情況下“.container是可以設定一個高度即可解決覆寫問題。

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

<div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="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屬性隻會對自身起作用，而不會影響其他元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: left;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>

</body>
</html>

把握住兩點：

1、元素是從上到下、從左到右依次加載的。

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

思考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: both;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

解決父級塌陷：

'''

    .clearfix:after {             <----在類名為“clearfix”的元素内最後面加入内容；
    content: ".";                 <----内容為“.”就是一個英文的句号而已。也可以不寫。
    display: block;               <----加入的這個元素轉換為塊級元素。
    clear: both;                  <----清除左右兩邊浮動。
    visibility: hidden;           <----可見度設為隐藏。注意它和display:none;是有差別的。
                                       visibility:hidden;仍然占據空間，隻是看不到而已；
    line-height: 0;               <----行高為0；
    height: 0;                    <----高度為0；
    font-size:0;                  <----字型大小為0；
    }
    
    .clearfix { *zoom:1;}         <----這是針對于IE6的，因為IE6不支援:after僞類，這個神
                                       奇的zoom:1讓IE6的元素可以清除浮動來包裹内部元素。


整段代碼就相當于在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。
之是以用它，是因為，你不必在html檔案中寫入大量無意義的空标簽，又能清除浮動。
<div class="head clearfix"></div>

'''

3. overflow: hidden;

overflow：hidden;

的含義是超出的部分要裁切隐藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明确設定包含容器高度的情況下，它要計算内容的全部高度才能确定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

前端開發 容器 移動開發 css 移動端前端開發 連接配接css 移動前端開發 移動web前端開發
上一篇: 第11天，Python操作MySQL
下一篇: 一個讀書人的2016

繼續閱讀