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>新浪導航欄