css查缺補漏1
阿新 • • 發佈:2018-11-10
css可以寫在哪裡
1.和要裝飾的標籤寫在一起 2.內部樣式表(內嵌式)是寫在head頭部標籤中,並且用style標籤定義 3.外部樣式表(外鏈式) <head><link rel="stylesheet" href="commons.css"></head> 做到結構、樣式、行為的分離
4.基本選擇器
標籤選擇器:設定原有的標籤們如:divs、pan標籤、h標籤 類選擇器:把樣式寫到head裡面,以.開頭命名,對應的div裡得有相同的名字 樣式顯示效果跟HTML元素中的類名先後順序沒有關係,與書寫的上下順序有關,多類名用空格隔開 id選擇器:是唯一的,只能被使用一次,方便被找到一般被js用
5.字型設定
font-size:字號大小,常用單位:px font-family:字型,宋體、微軟雅黑 font-weight:字型粗細,b或strong讓字型加粗,normal(400)、bold(700) font-style:字型風格,i或em讓字型變傾斜,normal取消傾斜;italic新增傾斜 font字型連寫的基本語法: 選擇器{font:font-style font-weight font-size/line-height font-family} 不需要的屬性可以省略,但字型大小和型別必須保留
6.文字設定
color:字型顏色 line-height:行間距,一般比字型大7、8畫素就行 text-align:水平對齊方式,例:讓某標籤內的文字居中對齊 text-indent:2em,1em就是一個字的距離。段落首行縮排 text-decoration:u或ins加下劃線,s或del加刪除線 none(取消裝飾),underline(下劃線),line-through(刪除線)
7.複合選擇器
後代選擇器指的是所有後代,又稱包含選擇器,例如div p{},兩者用空格隔開 子代選擇器,用大於號隔開,子指的是親兒子(直系親屬),例如ul li > a{} 交集選擇器,用點號隔開,某標籤.某class,既...又...(p.box-<p class="box"></p>) 並集選擇器,用逗號隔開,一個佔一行,適合-集體宣告,相同樣式,例如:div,p,span
8.連結偽類選擇器
<style> {#未訪問過的狀態#} a:link{ colora:hover: #3c3c3c; font-size: 25px; text-decoration: none; font-weight: 700; } {#訪問過後的狀態#} a:visited{ color: orange; } {#滑鼠經過時的狀態#} a:hover{ color: #f10215; } {#滑鼠按下時的狀態#} a:active{ color: green; } </style> 這四個如果要都寫的話,那麼順序不能亂,lv-hao 但一般是這麼寫的: a { color: #3c3c3c; font-size: 25px; text-decoration: none; font-weight: 700; } a:hover{ color: #f10215; } .類名,然後TAB直接生成<div class="類名"></div> input:屬性,然後TAB直接生成<input type="屬性" name="" id="">
9.顯示模式
塊級元素(block)獨自佔一行或多行,可以對其設定寬度、高度、對其等屬性 行內元素(inline)-<a>、<span> 高、寬無效,預設寬度就是它本身內容的寬度 行內塊元素(inline-block)--<img />、<input /> display可以將三者相互轉換(行話叫-顯示模式)
10.居中
行內元素、行內塊元素可以當成文字來看,讓這三個a標籤居中,可以寫 .nav{text-align: center;},這個類中的標籤必須是行內或行內塊 <div class="nav"> <a href="#">網站導航</a> <a href="#">網站導航</a> <a href="#">網站導航</a> </div> line-height:行高等於盒子高度,可以讓單行文字垂直居中,不給行高那就只有文字高度 行高小於盒高,文字偏上。 h、p標籤都是文字類的塊級元素,裡面不再放塊級元素,a可以放塊級元素 基線和基線之間的距離稱為行高
11.三大特性
一、層疊性:權重相同則就近原則、後來者居上 二、繼承性:子標籤會繼承父標籤的某些樣式,如文字顏色和字號,高度等不會繼承 三、優先順序:權重:*和繼承-0,0,0,0;標籤-0,0,0,1;類偽類(.)-0,0,1,0; ID(#)-0,1,0,0;行內樣式-1,0,0,0;!important-無窮大 權重可以疊加: div ul li -- 0,0,0,3;.nav ul li -- 0,0,1,2;a:hover -- 0,0,1,1 自己設定了樣式,父輩的樣式不繼承
12.背景設定
div{ background-color: purple; background-image: url(image/1.jpg); background-repeat: no-repeat; background-attachment: fixed; 背景附著-scroll:影象隨內容滾動;fixed:背景影象固定 background-position: x y; background-position: center center;(top bottom left right center) } position後面如果只寫一個方位名詞,另一個預設是居中的;可以跟數值, 必須有順序;兩者也可以混搭,圖片預設會左上角, 一般會給一個position:center top;no-repeat;顏色:#fff background簡寫:順序官方沒有強制標準,建議大家如下寫: background:背景顏色 背景圖片 背景平鋪 背景滾動 背景位置 background:transparent url(image/1.jpg) no-repeat fixed center center 例:一個盒子中圖片預設是left top,想要滑鼠放上去之後變成底對齊用position css3透明度:background:rgba(0,0,0,0.8)--黑色背景透明度為8
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ height: 50px; border-top: 3px solid #FF8500; border-bottom: 1px solid #EDEEF0; background-color: #FCFCFC; } .nav a { height: 50px; line-height: 50px; display: inline-block; color: #4c4c4c; text-decoration: none; padding-left: 16px; padding-right: 16px; font-size: 14px; } .nav a:hover{ background-color: #edeef0; color: #ff8400; } </style> </head> <body> <div class="nav"> <a href="#">首頁</a> <a href="#">新聞客戶端</a> <a href="#">設為首頁</a> <a href="#">微博</a> </div> </body> </html>新浪導航欄