web基礎(CSS)
阿新 • • 發佈:2018-12-13
CSS
CSS指的是層疊樣式表 樣式定義如何顯示HTML元素 樣式通常儲存在樣式表中 內聯方式 樣式定義在單個的HTML元素中 內部樣式表 樣式定義在HTML頁的頭元素中 外部樣式表 樣式定義在一個外部的CSS檔案中 由HTML頁面引用樣式表文件 規則特性: 繼承性: 父元素的CSS的宣告可以被子元素繼承,如字型、顏色等 層疊性: 同一元素若存在多個CSS規則,對於不衝突的宣告可以疊加 優先順序: 同一個元素若存在多個CSS規則,對於衝突的宣告以優先順序高的為準 語法規範 由多個樣式規則組成 每個樣式有兩個部分 選擇器和樣式宣告 如: h1 {color:red; font-size:14px } 選擇器 元素選擇器 通過元素名來選擇CSS作用的目標 如果頁面中有多個相同元素需要同樣效果,建議使用元素選擇器 類選擇器 類選擇器允許以一種獨立於文件元素的方式來指定樣式 語法為:className {color : red;} 所有能夠附帶class屬性的元素都可以使用此樣式宣告 將元素的class屬性的值設定為樣式類名 如果頁面中有多個不同元素需要重用相同的效果,建議使用類選擇器。 id選擇器 id選擇器以一種獨立於文件元素的方式來指定樣式 他僅僅作用於id屬性的值 語法為:#id{} 選擇器組: 寫出一組選擇器,選中每個選擇器對應的目標的並集 派生選擇器 派生選擇器用來選擇子元素: 後代選擇器 選擇某元素所有後代(子孫)元素 子元素選擇器 選擇某元素的所有子元素 偽類選擇器 偽類常用於設定同一個元素下在不同狀態下的樣式 常用偽類: link:向未被訪問的超連結新增樣式 visited:向已被訪問的超連結新增樣式 active:向被啟用的元素新增樣式 hover:當滑鼠懸停至元素上方時,向該元素新增樣式 focus:當元素獲取焦點時,向該元素新增樣式 宣告 border: 屬性:用來設定元素的邊框 樣式單位: %:百分比 in:英寸 cm:釐米 mm:毫米 pt:磅 px:畫素 em:1em相當於當前的字型尺寸,2em等於當前字型尺寸的兩倍 四邊設定: border:width的值 style值 color值 單邊設定: border-left:width style值 color值 border-right:width style值 color值 border-top:width style值 color值 border-bottom:width style值 color值 overflow:當前內容溢位元素框如何處理 塊元素一般預設寬度是100% 高度會自適應,內容越多,越高 當給它固定高度時,可能會導致內容溢位 visible:繼續顯示(預設) hidden:隱藏 scroll:加滾動條(溢位不溢位都加) auto:加滾動條(溢位了才加) box:框模型定義了元素框處理元素內容,內邊距,邊框和外邊框的方式 背景: background-color 屬性用於為元素設定背景色,該屬性接收任何合法的顏色值 body{ background-color: #ccc; } bankground-image屬性用於設定背景圖片 預設值是none,表示背景上沒有放置任何影象 如果需要設定一個背景影象,需要用起始字母url附帶一個影象URL值 可以是相對URL或者絕對URL body { background-image:('.../image/backround.png') } background-positio 改背景在元素中的位置 X% Y% 第一個水平,第二個垂直 左上角是0% 0% 右下角是100% 100% X Y 第一個是水平位置。第二個是垂直位置 左上角是0 0 left center right top bottom 預設情況,背景圖會隨頁面滾動而滾動 可以通過background-attachment屬性來改變此特徵 預設值是scroll:預設情況下,背景會隨文件滾動 可取值是fixed:背景影象固定,並不隨頁面其餘部分滾動,常用於實現成為水印的影象 baody{ background-attachment:fixed; } 文字化格式: 指定字型: font-family: value1, value2; 字型大小: font-size:value; 字型加粗: font-weight: normal/bold; body{ font-family: '隸書' '楷書' ; } h1{ font-size: 40px; text-align: center; } 選擇器的優先順序: 選擇器是有優先順序的,可以通過權重來計算其優先順序 ID選擇器:100 類選擇器:10 元素選擇器:1 .content div : 10+1 .data: 10 .content .data : 10+10