Div+Css基礎知識點總結

2020-03-24 17:07:58

字體：大中小

來源：轉載

供稿：網友

Div+Css的學習其實也很簡單，我們這里就對其中的知識點進行下總結：1，Css樣式的種類。第一：內聯式樣式表，第二：嵌入式樣式表，第三：外部樣式表，第四：輸入樣式表。什么是內聯式樣式表？ P /P ------這種方式現在已經比較少用了。什么是嵌入式樣式表？ html head style type="text/css" !-- P{ font-size:16px; color:Red; background-color:Green; text-decoration:underline } //-- (注意：似乎這個是為了防止有些瀏覽器不支持Style而用此來代替的) /style /head body p 我是中國人 /P ........(主體內容) /body /html 什么是外部樣式表? 意思就是：把樣式寫在一個外部的.Css文件中，然后通過在html頁面上引用該文件。任何html頁面都可以引用。引用方法如下： html head link rel="stylesheet" type="text/css" href="style/test.css" (注意： href="存放.css文件的地址") /head body p 我是中國人 /P /body /html 什么是輸入樣式表？將Css文件輸入到另一個Css文件中。假如你有一個test1.Css文件 P{ font-size:16px; color:Red; background-color:Green; text-decoration:underline } 還有一個test2.css文件 div{ color:Yellow; font-size:20px } 此時只要在test1.css文件里輸入 @import url（test2.css文件的地址） ----此時在頁面中只要引用test1.css文件。就相當于引用了在這之前的test1.css和test2.css兩個文件 2，學到第二點：樣式規則的選擇器，第一：html selector;第二：class selector；第三：id selector ；第四：關聯選擇器；第五：組合選擇器；第六：偽元素選擇器什么是html選擇器？就是直接在前邊寫html標簽。如： P 標簽， a 標簽， div 標簽等 div{--這就是html選擇器形式 color:Yellow; font-size:20px } 什么是class選擇器？ .lei{--這就是class選擇器形式 color:Yellow; font-size:20px } 在頁面中可以這樣調用： div 我是中國人 /div p .one{} --表示在P標簽下的one選擇器（只能針對 P 標簽下）什么是id選擇器？ #aaa{--這就是id選擇器形式 color:Yellow; font-size:20px } 在頁面中可以這樣調用： div id="aaa" 我是中國人 /div 注意：在同一個頁面，不能有相同的名稱的id選擇器。什么是關聯選擇器？類似一種嵌套的形式。如：p em{ --這就是關聯選擇器的形式,中間是用空格隔開的 color:Red; font-size：16px } 以上關聯選擇器強調了em標簽必須嵌套在P標簽里才能有效果。（強調嵌套順序：必須后面的嵌套在前面的標簽里面）頁面中：--這樣才有效果。 P em 我是中國人 /em /P 什么是組合選擇器？ P,div,a,h1,.one,#two{ Font-size:16px; Color:Red } 這種用逗號隔開的叫組合選擇器特點：就是以上所有標簽都可以用這些樣式，而不像關聯選擇器那樣只能要按規定嵌套正確的才能使用這些樣式什么是偽元素選擇器(偽類)？ a:link{} a:hover{} a:visited{} 偽元素選擇器和類一起使用： a.one:link{} a.two:hover{} a.three:visited{} 動態偽類：focus 指示當前擁有輸入焦點的元素（ie7表單元素不支持此偽類）選擇第一個元素 #header P：first-child 選擇header中的第一個段落首字母選擇 P：first-letter 選擇段落的第一個字母 P：first-line 選擇段落的第一行注意：這兩個偽類只能作用于標記或段落之類的塊級元素，而不能應用于超鏈接等行內元素：before和：after 這兩個偽元素用于插入生成內容并設置其樣式。字面意思：：before用于在元素內容的前面插入內容：after反之。它們需要配合content一起使用。用after來消除浮動是一個不錯的選擇。語法： a[href]：before{content：“link”} 注意：插入的內容是在該元素的內容的前面或后面，也就是說是在其內部插入。而不是在該元素前面或緊跟其后
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS知識小結

下一篇：CSS3彈性盒布局的圖文實例