CSS學習筆記，css學習

CSS學習筆記，css學習

整理自某學習視屏（具體也忘了，或許是兄弟連，或許是其他人的）

<!--CSS    cascading style sheets層疊樣式表    CSS就是要對網頁的顯示效果實現與Word一樣的排版控制    一個樣式表由示範規則群組成    HTML是為了將內容放到頁面上，而CSS是為了樣式    任何一個標籤都可以有四個屬性：        id class style name    例1：一個段落，字型：紅色；背景：黃色;有一個2個像素的實現邊框，字型大小為4cm    實現：文法：    格式：屬性1：值；屬性2：值；屬性3：值……          屬性和值用冒號隔開；多個屬性用分號隔開        color，background-color，font-size，border邊框，text-align    單位：        顏色：#rgb #8fa #aaffaa red（green） 數字（0-255）        字元大小：em  元素的字型的高度              px  像素（常用）              上述是相對單位              pt磅 cm mm in  絕對單位              百分比：%  + -        URL：    注釋：/*開始       */結尾        注意： 注釋裡面不能再包含注釋四種設定    內聯樣式表        在任何一個標籤中使用style指定樣式，就是內聯式        如：<p >        靈活，但不利於更新，且標籤不能共用一種樣式    內建樣式表        通過html的<style></style>將CSS嵌入到HTML裡面        <style>            樣式        </style>        可以控制當前頁面的所有的樣式        但不能控制所有頁面的樣式    外部樣式表        將樣式單獨定義在一個尾碼名為.css的文檔中，並且在HTML中通過link串連到HTML中使用        所有的頁面都可以使用該文檔，也就使得所有的頁面能夠共用樣式        <link rel="stylesheet" type="text/css" href="css檔案所在的檔案夾">        多個頁面都可以使用    輸入樣式表        可以將一個css檔案輸入到另外一個樣式檔案中，獲獎一個樣式檔案輸入到<style></style>元素中        可以將多個樣式表組合成一個樣式表，如何可以使用多個樣式表            使用@import url(css所在位置);匯入其他的CSS檔案            在<style>中使用@import url(css所在位置)</style>四種樣式表的優先順序    內聯樣式表高於其他的    內建樣式表，外部樣式表，輸入樣式表的優先順序與載入的順序有關字型    font-family         字型族科，宋體，楷體等，可以使用多個族科賦值，中間用逗號隔開，以防止選擇不存在的字型族科    font-size        可以使用絕對大小，相對大小，長度，或百分比    font-style        normal（普通），Italic（斜體），oblique（傾斜）    font-weight        normal，bold，或者數字表示（1-500是窄字型），bolder，lighter    font-variant        normal，small-caps（大小寫轉換，對字母來說）      一行寫時注意順序：        font:[<字型風格>||<字型變形>||<字型加粗>]？<字型大小>[</行高>]？字型族科    color：文本    letter-spacing:字母間隔    word-spacing：文字間隔    text-decoration：設定底線(underline) 刪除線(line-through),上劃線（overline）閃爍線(bink)            這個屬性可以去除超連結的底線，如設定為none;    text-indent：設定縮排，必須是長度或百分比    text-transform:lowercase(小寫成為大寫)    line-height：行高，上下置中時使用    text-align:橫向排列，left，right ，center，justify背景    background-color 背景顏色    background-image：背景映像 預設平鋪，x，y兩個方向重複        後加：url(圖片地址)    background-repeat 背景重複        repeat,repeat-x ,repeat-y,no-repeat    background-position 背景位置        center,bottom或者百分比，長度    background-attachment：背景附件 當拉動捲軸時，背景圖片是否隨著捲軸滑動        fixed，scroll    整合屬性：        background：<顏色><映像><重複><附件><位置>    應用：        多個表徵圖放到同一個圖片裡，通過定義某區塊的背景定位，調用同一個圖片中不同位置上的小表徵圖，好處是可以減少對伺服器的請求次數，從而加快頁面的訪問速度位置邊框    邊框屬性是用於設定一個元素的邊框分割，邊框 寬度，邊框顏色的略寫，可以一起設定4邊的邊框，也可對上邊框，下邊框，左邊框，右邊框單獨設定    通過border-style設定上下左右邊框的風格，該屬性用於設定一個元素邊框的樣式，而且必須用於指定可見的邊框。    可以使用border-top-style，border-buttom-style，border-left-style，border-right-style單獨設定各邊的屬性    border-width:  以top，right，buttom，left的順序指出            也可以單獨指出，利用border-top-width,border-right-width border-buttom-width border-left-width.    border-color:指定顏色，用法如上    屬性值：        none        dotted，點線式        dashed：破折線        solid：實線·       double:雙線式        groove：槽線式        ridge：脊線式        inset：內嵌效果        outset：突起效果    注意：如果統一制定四個邊框，可以使用<border-width><border-style><border-color>的順序給出三個值；如border：14px solid red滑鼠        cursor：值        屬性值：help，pointer，move，text，hand，wait，crosshair列表    list-style-type        針對無序列表            circle             square            none        針對有序列表            lower-roman            upper-roman            lower-alpha            upper-alpha            預設數字    list-style-image        url()    list-style-position樣式選取器    定義        secletor{            property：value            ……        }        當定義一條規則時，必須制定受這條樣式規則作用的元素，在一條規則中定義的網頁元素就是selector（選取器），也就是選擇該樣式規則作用於的網頁元素    形式：        .nvv{}        #nvv{}        a,b,h1,#one{}        a b h1 #one{}        a:hover,a:link{}    類別        HTML選取器            HTML有標籤，CSS就用選取器            選擇符就是賦予內部或外部樣式表的名字            HTML標籤就是用來改變一個指定標籤的樣式            任何一個HTML元素都可以是一個CSS選取器            如：p{} div{} ul{} b{} table{} input{} select{}        類別選取器            同一個選取器能有不同的類，因而允許同一個元素有不同的樣式            定義的方式            [tag].類名{}            如此實現同一個元素有不同的表現            例：定義p.cla1{} p.cla2{} p.cla3.{}                使用<p class="cla1">……</p> <p class="cla2">……</p>            同一個元素可以使用多個類，類名之間用空格隔開            註：如果tag省略，則任何一個元素都可以使用這個類，實現多個元素共用同一個類            綜上可知：即可以實現一個元素使用不同的樣式類，又可以實現不同的元素使用同一個樣式類        ID選取器            在HTML頁面中，ID屬性指定了某個單一元素，id屬性用來對單一元素定義單獨的樣式            注意： 一個HTML中，id屬性值要唯一            定義：                #idname{}(idname是自訂的名稱)            用法： <tag id="idname">        關聯選取器            只不過是一個用空格隔開的兩個或多個的單一選取器組成的字串            因為層疊順序的規則，所以他們的優先權比單一的選擇符要大            因為按關聯關係使用，不能有反順序            只要能保持關聯關係就可以，不管是在多少層        組合選取器            為了減少樣式表的重複聲明，組合是允許的            定義：                只要使用英文逗號隔開每一個選擇符        虛擬元素選取器            對同一個HTML元素在不同的狀態下的一種定義方式            目前只有a和p兩處HTML元素可以使用            定義：                標籤：虛擬元素  標籤[.類名]:虛擬元素            使用：                 a:link  ，沒有任何動作的狀態                 a:hover   游標移動到超連結上的狀態                a:active  選中超連結的狀態                a:visited 訪問過超連結的狀態                注意：a:hover必須位於a:link和a:visited之後                      a:active必須位於a:hover之後                p：first-letter   一個段落中首個字母的狀態                 p: first-line   一個段落中首行的狀態    樣式的繼承        所有嵌套在某個HTML標籤中的HTML標籤都會去繼承外層標籤中設定的樣式規則    樣式規則的優先順序        關聯 > ID > class > HTMLDIV+CSS    準備軟體        IETEST        FirFox        FirFox的組件FireBug組件    要安裝多種瀏覽器，以利於調試    注意：就算在不同的瀏覽器中效果不完全一致，也要做到大概一致    “無意義”的div 和span標籤        div：會自動換行        span：不自動換行        div，大容器；span，小容器    盒子模型        每一個HTML元素都可以看成一個裝了東西的盒子，盒子具有寬度，和高度，盒子裡面的內容到盒子的邊框之間的距離即填充，盒子本身有邊框，而盒子邊框外和其他合資之間，還有邊界    布局中的主要樣式        font                        width        line-height                 height        color                       float        margin                      clear        padding                     displayhttp://localhost:8088/test.php        border        text-align        background        定位屬性        position    用於定義一個元素是否absolute relative static  fixed        top     層距離頂點縱座標的距離             left        層距離定點橫座標的距離        width       層的寬度        height      層的高度        z-index     決定層的先後順序和覆蓋關係，值高的元素會覆蓋掉比較低的元素        display     block，以塊顯示，在元素後添加分行符號，其他元素不餓能夠在其後並列顯示                inline，內聯顯示，在元素後面刪除分行符號，多個元素可以在一行並列顯示                none，將關閉指定元素及其子項目的顯示        visible        overflow    區塊模型        margin-->