CSS2相關實用知識點
阿新 • • 發佈：2018-01-18
寫法 自己 定義 top osi cor ont 列表項 id3
CSS相關知識回顧目錄
CSS2選擇器
假選擇器的使用
屬性選擇器的使用
邊框設置
背景設置
字體設置
文本屬性
a標簽假選擇器使用
列表設置
表格設置
鼠標設置
單位設置
隱藏顯示
位置設置
清除浮動
假元素的使用
媒體類型
CSS相關知識回顧
CSS2選擇器
* 通配符選擇器 div 元素選擇器 #box id選擇器 .box 類選擇器 p.box 交集選擇器 div p 後代選擇器 ui > li 子代選擇器 p + div 親兄弟選擇器，選擇p標簽後面緊挨著的div元素 p ~ div 表兄弟選擇器，選擇p標簽後面所有同級的div元素 h1,h2,h3 並集選擇器假選擇器的使用
div:first-child 匹配第一個元素 div:last-child 匹配最後一個元素 div:nth-child(2) 選擇第二個元素 div:nth-child(even) 偶數元素 div:nth-child(odd) 基數元素 div:nth-child(2n+1) :lang選擇器的使用 q:lang(no) { quotes: "~" "~"; } <p>文本 <q lang="no">修飾的文本</q> 文本.</p>屬性選擇器的使用
<div key="a a">erefefwfa</div> <div key="b-a">erefefwfa</div> [key] div[key] div[key="a a"] div[key~="a"] 匹配空格分割的任意屬性值 div[key|="b"] 匹配以連字符連接的屬性值，這個屬性值以指定值開頭 div[key^="b"] 匹配一指定字符開頭的屬性值 div[key$="a"] 匹配以指定字符結尾的屬性值 div[key*="b"] 匹配包含指定字符的屬性值邊框設置
邊框有border和outline之分，outline在border外面，outline無法單獨設置每條邊的樣式 顏色 outline和border沒有顯示指示自己的顏色，則使用color屬性值 p {color: #0000ff; outline: 2px solid; border: 2px solid red; } 邊框寬度 border-width: medium thick thin 10px; outline-width: thick; 邊框樣式 支持的屬性 one, hidden, dashed, dotted, double, groove, inset, outset, ridge, solid border-style: outset; outline-style: outset; 邊框顏色 border-color: darkcyan; outline-width: thick;背景設置
background-color 設置背景顏色 background-image 設置背景圖片 background-repeat 設置圖片平鋪的方式 repeat-x repeat-y no-repeat background-attachment 設置圖片固定方式 fixed 固定 scroll 隨容器滾動 background-position: bottom right; 設置圖片的位置 background-position: 100% 100%; 簡寫形式的順序 background: color image repeat attachment position; background: #f0e68c url("./1.jpg") no-repeat fixed 250px 25px;字體設置
font-family: ‘Franklin Gothic Medium‘, ‘Arial Narrow‘, Arial, sans-serif; // 設置字體家族 font-style 設置字體樣式 normal italic 斜體字體 oblique 普通字體斜體樣式 font-size 設置字體大小 使用關鍵字設置字體大小 在body元素上設置絕對字體大小如font-size: xx-small;支持的屬性xx-small, x-small, small, medium, large, x-large, xx-large 在頁面其他的元素上設置相對字體大小如font-size: larger;支持的屬性smaller, larger 這種設置方式，可以簡單的控制body字體大小，從而控制頁面所有標簽的字體大小 使用pixel設置 font-size: 12px; 這種方式設置的字體大小固定，不推薦使用 使用em設置 在body元素上設置font-size: 16px; 那麽1em=16px; 如果頁面上沒有設置px值，默認是16px 在子元素中設置 font-size: 2em; 表示32px; W3C建議使用的字體設置方式 body元素設置 font-size: 62.5%; 子元素設置 font-size: 1.6em; 相當於 1.6em=16px; font-weight 設置字體粗細 數值 100, 200, 300, 400, 500, 600, 700, 800, 900 其中400是normal, 700是bold 關鍵字 bolder, lighter 這兩值是根據父元素的font-weight來顯示的，如父元素設置bold那麽它更粗 font-variant: small-caps; 將小寫字母顯示成小型的大寫字母 可用屬性值 normal, small-caps, inherit文本屬性
color 設置文本顏色 text-align 設置文本對齊方式 left right center justify 分散對齊 text-decoration 設置文本標記線 underline 下劃線 overline 上劃線 line-through 中劃線 none 去掉下劃線 text-transform 設置文本轉化方式 capitalize 首字母大寫 uppercase 字母大寫 lowercase 字母小寫 none text-indent 設置首行縮進 text-indent: 10px; text-indent: 10%; word-spacing: 20px; 設置單詞之間的間隙 letter-spacing: 5px; 設置字符之間的間隙 line-height 設置行高 line-height: 50%; line-height: 1.2; 基於當前字體計算 line-height: 20px;a標簽假選擇器使用
a:link{ color: #FF0000; } 初始顏色 a:visited{ color: #00FF00; } 訪問後的顏色 a:hover { color: #FF00FF; } 鼠標懸浮顏色 a:active { color: #0000FF; } 鼠標點擊不放顏色 設置順序 :link, :visited, :hover, :active列表設置
ul,ol中列表項的前綴可以使用list-style-type設置，如 ul { list-style-type:lower-alpha; } ul,ol中列表項的前綴可以使用list-style-position設置是否包含在li盒子裏面，如ul li { list-style-position: inside; } ul,ol中裏表項的前綴可以使用list-style-image設置前綴圖片，如 ul li { list-style-image: url(‘./2.jpg‘); } 可以使用list-style屬性簡寫上面提到的三種屬性 簡寫的順序 list-style-type | list-style-position | list-style-image表格設置
邊框設置，默認table是沒有邊框的 table, th, td{ border: 1px solid #ccc; } 邊框合並，默認單元格的邊框是分開的 可以設置border-collapse讓單元格共享邊框 table{ border-collapse: collapse; } 也可以設置border-spacing設置單元格之間的間隙為0 table{ border-spacing: 0; } table布局，單元格寬度默認是根據內容的來自適應的 可以設置 table-layout 來設置單元格的寬度為指定的寬度 table { width: 300px; table-layout: fixed; }，auto為默認值。 默認情況下，table標簽是會等待所有的表格數據加載完成才會展示出來，將table-layout設置成fixed還有一個好處，可以讓表格一次加載一行數據 空單元格的顯示於隱藏，table{ empty-cells: hide; } 表標題位置設置，caption{ caption-side:bottom; }鼠標設置
支持的屬性值 default, pointer, text, wait, help, progress, crosshair, move 如 cursor: help; 創建自定義遊標 最好將要顯示的圖片轉換成.cur格式的圖片，谷歌默認支持jpg等 如 cursor: url("./2.jpg"), default;單位設置
相對單位em,ex 其中em前面已經介紹，ex的作用和em類似，ex是用x字母的高度為準 絕對單位 #box1 { height: 12in; } // 1in === 2.54cm #box2 { line-height: 3cm; } #box3 { word-spacing: 4mm; } #box4 { font-size: 12pt; } // 1pt === 1/72 in === 0.353mm #box5 { font-size: 1pc; } // 1pc === 12pt #box6 { font-size: 12px; } // 1px === 0.75pt隱藏顯示
display: none; 控制dom是否渲染 visibility 控制dom是否顯示 visible 默認值 hidden 隱藏 collapse 主要用於表格單元的隱藏 inherit 繼承位置設置
position: static; 默認值，靜態定位不受top,bottom,left,right,z-index影響 position: relativa; 設置相對自己當前位置定位，不脫離文檔流 position: absolute; 設置相對父元素位置定位，父元素非static，脫離文檔流 position: fixed; 設置相對瀏覽器視口定位，脫離文檔流清除浮動
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }假元素的使用
p::first-line 第一行 p::first-letter 第一個字 div::before{ content: url(‘./1.jpg‘); } 元素content之前content div::after 元素content之後的content媒體類型
根據不同的設備應用不同的樣式 寫法一 @media screen {} 屏幕 @media print {} 打印設備 @media screen, print {} 寫法二 @import url("./test.css") screen; @import url("./test.css") print; 寫法三 <link rel="stylesheet" type="text/css" media="all" href="./test.css"> <link rel="stylesheet" type="text/css" media="screen" href="./test.css"> <link rel="stylesheet" type="text/css" media="print" href="./test.css"> <link rel="stylesheet" type="text/css" media="screen, print" href="./test.css">
CSS2相關實用知識點