HTML 基礎 2

標籤：

1. 認識CSS樣式：    CSS：層疊樣式表（Cascading Style Sheets），主要用於定義HTML內容在瀏覽器內的顯示樣式    文法：        選擇符{ 屬性: 值}    舉例：        p{ color: blue}    選擇符：又稱選取器，指明要應用樣式規則的元素，如<html>、<body>、<h1>、<p>、<img>...    聲明：指的是冒號”:“    多條聲明：使用分號”;“隔開，最好每行都加上分號    注釋：CSS使用 /**/，HTML注釋則使用<!--內容-->2. CSS樣式分類：    1. 內聯式        <p style="color:red;font-size:12px">這裡文字是紅色。</p>    2. 嵌入式        較通用的一類，CSS樣式放置在<style>標籤中，而<style>通常要放置在<head>內        <style type="text/css">            span{               color:blue;               font-size:12px;            }        </style>    3. 外部式        把CSS代碼寫到一個單獨的外部檔案中，以.css副檔名結尾，在<head>內使用<link>標籤引入，如：        <link href="base.css" rel="stylesheet" type="text/css" />        href: .css檔案路徑        rel和type: rel="stylesheet" type="text/css" 是固定寫法，不能改    三種方法的優先順序：        內聯式 > 嵌入式 > 外部式        就近原則，嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面        以上規則適用於相同權值的情況3. CSS 類別選取器    文法：        .類選器名稱{css樣式代碼;}    舉例：        <style type="text/css">        .stress{            color:red;        }        </style>    注意：前邊的小圓點是必須要有的    使用：        <span class="stress">膽小如鼠</span>4. CSS ID選取器    文法：        #ID選取器名稱{css樣式代碼}    舉例：        #setGreen{color:green;}        <span id="setGreen">膽小如鼠</span>     區別：        起始於 ‘.‘ 與 ‘#‘        調用時 class= 與 id=         ID選取器只能在文檔中使用一次，類別選取器則可以使用多次        一個元素可以使用多個類別選取器同時設定多個樣式，而ID選取器是不可以的，如 <span class="stress bigsize">三年級</span>5.CSS 子選取器    還有一個比較有用的選取器子選取器，即大於符號(>),用於選擇指定標籤元素的第一代子項目。舉例：        .food>li{border:1px solid red;}    若大於符號換成空格( ),用於選擇指定標籤元素的所有後輩元素，舉例：        .first span{border:1px solid red;}6. CSS 通用選取器    通用選取器是功能最強大的選取器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素：        * {color: red;}    此時，所有元素的字型都為紅色7. CSS 偽類選擇符    偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色        a:hover{color:red;}    此時，把滑鼠放置到元素上邊，顏色就會切換為紅色8. CSS 分組選擇符    多個標籤使用逗號隔開：        h1,span{color:red;}    相當於：        h1{color:red;}        span{color:red;}9. CSS 繼承    CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代    如：        p{color:red;} /*可被span繼承*/        p{border:1px solid red;} /*此時，span將不繼承，邊框顯示紅色*/10. CSS 特殊性（權值）    權值：        p{color:red;} /*權值為1*/        p span{color:green;} /*權值為1+1=2*/        .warning{color:white;} /*權值為10*/        p span.warning{color:purple;} /*權值為1+1+10=12*/        #footer .note p{color:yellow;} /*權值為100+10+1=111*/    注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。    層疊：        相同權值時，最後一個將被應用    重要性：        相同權值時，使用 !important 將得到最高權重，如 p{color:red!important;}        樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，使用 !important 優先順序比 使用者自己設定 還高11. CSS 文字排版    1. 字型        body{font-family:"宋體";}        body{font-family:"Microsoft Yahei";}    2. 字型大小，顏色        body{font-size:12px;color:#666}    3. 粗體        p span{font-weight:bold;}        a{font-weight:bold;}    4. 斜體        p a{font-style:italic;}        p{font-style:italic;}    5. 底線        p a{text-decoration:underline;}    6. 刪除線        .oldPrice{text-decoration:line-through;}    7. 縮排        p{text-indent:2em;} /*2em 表示兩倍文字大小*/    8. 行間距        p{line-height:1.5em;}    9. 字間距、字母間距        h1{letter-spacing:50px;word-spacing:50px;} /*分別是字母、單詞間距*/    19.對齊        h1{text-align:center;} /*left、right和center*/12. CSS 元素分類    塊狀元素：        <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>    內嵌元素：        <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>    內聯塊狀元素：        <img>、<input>    1. 塊狀元素：        1、每個區塊層級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個區塊層級元素獨佔一行）        2、元素的高度、寬度、行高以及頂和底邊距都可設定。        3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。        注意：a{display:block;} /*可以把內嵌元素 a 轉換為 塊狀元素*/    2. 內嵌元素：        1、和其他元素都在一行上；        2、元素的高度、寬度、行高及頂部和底部邊距不可設定；        3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。        注意：display:inline 可以轉換成內嵌元素    3. 內聯塊狀元素：        1、和其他元素都在一行上；        2、元素的高度、寬度、行高以及頂和底邊距都可設定。        注意：display:inline-block 可以轉換成內聯塊狀13. CSS 盒模型    1. 邊框        div{ border:2px  solid  red;}        相當於：        div{            border-width:2px;            border-style:solid;            border-color:red;        }        border-style: dashed（虛線）| dotted（點線）| solid（實線）        border-color:#888;    //前面的井號不要忘掉。        border-width: 有 thin | medium | thick（但不是很常用），最常還是用象素（px）    2. 上下左右邊框：        div{border-bottom:1px solid red;} /*top、bottom、left和right*/    3. 高度和寬度        div{            width:200px;    /*寬度*/            height:30px;    /*高度*/            padding:20px;   /*元素到邊框的距離，又名為“填充”*/            border:1px solid red;            margin:10px;    /*兩盒子距離，又名為“邊界”*/        }14. CSS 布局模型    元素有三種布局模型：    1、流動模型（Flow）        網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的        第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%        第二點，在流動模型下，內嵌元素都會在所處的包含元素內從左至右水平分布顯示    2、浮動模型 (Float)        現在我們想讓兩個塊狀元素並排顯示        任何元素在預設情況下是不能浮動的，但可以用CSS定義為浮動，如div、p、table、img等元素都可以被定義為浮動        舉例：            #div1{float:left;}            #div2{float:right;}    3、層模型（Layer）        就像是映像軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層布局沒能受到熱捧        層模型有三種形式：            1、絕對位置(position: absolute)                需要設定position:absolute(表示絕對位置)，這條語句的作用將元素從文檔流中拖出來                然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對位置                如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗                舉例：                    div{                        xxxx:yyyy;                        position:absolute;                        right:100px;                        top:20px;                    }            2、相對定位(position: relative)                position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的位移位置                相對定位完成的過程是首先按static(float)方式產生一個元素(並且元素像層一樣浮動了起來)，                然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，位移前的位置保留不動                舉例：                    #div1{                        width:200px;                        height:200px;                        border:2px red solid;                        position:relative;                        left:100px;                        top:50px;                    }                                        <div id="div1"></div>            3、固定定位(position: fixed) 如彈窗廣告                fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（螢幕內的網頁視窗）本身                它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中行動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，                因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文檔流動影響                舉例：                    #div1{                        width:200px;                        height:200px;                        border:2px red solid;                        position:fixed;                        left:100px;                        top:50px;                    }            Relative與Absolute組合使用：                1、參照定位的元素必須是相對定位元素的前輩元素                <div id="box1"><!--參照定位的元素（前輩）-->                    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->                </div>                2、參照定位的元素必須加入position:relative;                #box1{                    width:200px;                    height:200px;                    position:relative;                        }                3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行位移定位了                #box2{                    position:absolute;                    top:20px;                    left:30px;                         }15. 代碼簡寫：    1. 盒模型：            margin:10px; 相當於 margin:10px 10px 10px 10px; （上右下左順序）        margin:10px 40px; 相當於 margin:10px 40px 10px 40px; （上右 下左順序）        padding, border和 margin是一致的；    2. 顏色值：        p{color:#000000;} 相當於 p{color: #000;}        p{color: #336699;} 相當於 p{color: #369;}    3. 字型：        body{            font-style:italic;            font-variant:small-caps;             font-weight:bold;             font-size:12px;             line-height:1.5em;             font-family:"宋體",sans-serif;        }        編寫為：            body{font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;}        注意：            1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性未指定將自動使用預設值。            2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。16. 長度值    1. 像素        像素為什麼是相對單位呢？因為像素指的是顯示器上的小點（CSS規範中假設“90像素=1英寸”）    2. em        假定 font-size設定 14px，那麼 1em=14px    3. 百分比        p{font-size:12px;line-height:130%}

HTML 基礎 2