css知識
CSS 語法
CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。
1 2 3 4 5 6 7 8 9 |
‘‘‘
selector {
property: value;
property: value;
... property: value
}
‘‘‘
|
例如:
1 |
h1 {color:red; font - size: 14px ;}
|
css的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢,不推薦使用。
1 |
<p style = " padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">>hello yuan< / p>
|
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下:
1 2 3 4 5 6 7 8 9 |
<head>
<meta charset = "UTF-8" >
<title>Title< / title>
<style>
p{
background - color: #2b99ff;
}
< / style>
< / head>
|
3 鏈接式
將一個.css文件引入到HTML文件中
1 |
<link href = "mystyle.css" rel = "stylesheet" type = "text/css" / >
|
4.導入式
將一個獨立的.css文件引入HTML文件中,導入式使用CSS規則引入外部CSS文件,<style>標記也是寫在<head>標記中,使用的語法如下:
1 2 3 4 5 |
<style type = "text/css" >
@import "mystyle.css" ; 此處要註意.css文件的路徑
< / style>
|
註意:
導入式會在整個網頁裝載完後再裝載CSS文件,因此這就導致了一個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之後,再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件,因此顯示出來的網頁從一開始就是帶樣式的效果的,它不會象導入式那樣先顯示無樣式的網頁,然後再顯示有樣式的網頁,這是鏈接式的優點。
css選擇器
基本選擇器
組合選擇器
1 2 3 4 5 6 7 8 9 |
E,F 多元素選擇器,同時匹配所有E元素或F元素,E和F之間用逗號分隔 :div,p { color: #f00; }
E F 後代元素選擇器,匹配所有屬於E元素後代的F元素,E和F之間用空格分隔 :li a { font - weight:bold;}
E > F 子元素選擇器,匹配所有E元素的子元素F :div > p { color: #f00; }
E + F 毗鄰元素選擇器,匹配所有緊隨E元素之後的同級元素F :div + p { color: #f00; }
E ~ F 普通兄弟選擇器(以破折號分隔) :.div1 ~ p{font - size: 30px ; }
|
註意,關於標簽嵌套:
一般,塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。需要註意的是,p標簽不能包含塊級標簽。
屬性選擇器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
E[att] 匹配所有具有att屬性的E元素,不考慮它的值。(註意:E在此處可以省略。
比如“[cheacked]”。以下同。) p[title] { color: #f00; }
E[att = val] 匹配所有att屬性等於“val”的E元素 div[ class = ”error”] { color: #f00; }
E[att~ = val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
td[ class ~ = ”name”] { color: #f00; }
E[attr^ = val] 匹配屬性值以指定值開頭的每個元素
div[ class ^ = "test" ]{background: #ffff00;}
E[attr$ = val] 匹配屬性值以指定值結尾的每個元素 div[ class $ = "test" ]{background: #ffff00;}
E[attr * = val] 匹配屬性值中包含指定值的每個元素 div[ class * = "test" ]{background: #ffff00;}
|
偽類
anchor偽類:專用於控制鏈接的顯示效果
‘‘‘ a:link(沒有接觸過的鏈接),用於定義了鏈接的常規狀態。 a:hover(鼠標放在鏈接上的狀態),用於產生視覺效果。 a:visited(訪問過的鏈接),用於閱讀文章,能清楚的判斷已經訪問過的鏈接。 a:active(在鏈接上按下鼠標時的狀態),用於表現鼠標按下時的鏈接狀態。 偽類選擇器 : 偽類指的是標簽的不同狀態: a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態 a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; } ‘‘‘View Code
before after偽類
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之後插入內容 例:p:before{content:"hello";color:red;display: block;}
選擇器的優先級
css的繼承
繼承是CSS的一個主要特征,它是依賴於祖先-後代的關系的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
1 |
body{color:red;} <p>helloyuan< / p>
|
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的,是比普通元素的權重還要低的0。
1 |
p{color:green}
|
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見:任何顯示申明的規則都可以覆蓋其繼承樣式。
此外,繼承是CSS重要的一部分,我們甚至不用去考慮它為什麽能夠這樣,但CSS繼承也是有限制的。有一些屬性不能被繼承,如:border, margin, padding, background等。
div{ border:1px solid #222 } <div>hello <p>yuan</p> </div>
css的優先級
所謂CSS優先級,即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:
1 內聯樣式表的權值最高 style=""------------1000;
2 統計選擇符中的ID屬性個數。 #id --------------100
3 統計選擇符中的CLASS屬性個數。 .class -------------10
4 統計選擇符中的HTML標簽名個數。 p ---------------1
按這些規則將數字符串逐位相加,就得到最終的權重,然後在比較取舍時按照從左到右的順序逐位比較。
View Codecss屬性操作
css text
文本顏色:color
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定:
- 十六進制值 - 如: #FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
1 |
p { color: rebeccapurple; }
|
水平對齊方式
text-align 屬性規定元素中的文本的水平對齊方式。
- left 把文本排列到左邊。默認值:由瀏覽器決定。
- right 把文本排列到右邊。
- center 把文本排列到中間。
- justify 實現兩端對齊文本效果。
文本其它屬性
/*
font-size: 10px; line-height: 200px; 文本行高 通俗的講,文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比 vertical-align:-4px 設置元素內容的垂直對齊方式 ,只對行內元素有效,對塊級元素無效 text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線 font-family: ‘Lucida Bright‘ font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行縮進150px letter-spacing: 10px; 字母間距 word-spacing: 20px; 單詞間距 text-transform: capitalize/uppercase/lowercase ; 文本轉換,用於所有字句變成大寫或小寫字母,或每個單詞的首字母大寫 */
背景屬性
屬性介紹
- background-color
- background-image
- background-repeat
- background-position
1 2 3 4 5 6 7 |
background - color: cornflowerblue
background - image: url( ‘1.jpg‘ );
background - repeat: no - repeat;(repeat:平鋪滿)
background - position: right top( 20px 20px );
|
簡寫
1 |
background: #ffffff url(‘1.png‘) no-repeat right top;
|
邊框屬性
屬性介紹
- border-width
- border-style (required)
- border-color
1 2 3 4 5 |
border - style: solid;
border - color: chartreuse;
border - width: 20px ;
|
簡寫
1 |
簡寫:border: 30px rebeccapurple solid;
|
邊框-單獨設置各邊
1 2 3 4 |
border - top - style:dotted;
border - right - style:solid;
border - bottom - style:dotted;
border - left - style:none;
|
列表屬性
1 2 3 4 5 |
list - style - type 設置列表項標誌的類型。
list - style - image 將圖象設置為列表項標誌。
list - style - position 設置列表中列表項標誌的位置。
list - style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中
|
ist-style-type屬性指定列表項標記的類型:
1 |
ul { list - style - type : square; }
|
使用圖像來替換列表項的標記:
1 2 3 |
ul {
list - style - image: url(‘‘);
}
|
dispaly屬性
none
block
inline
- inline-block
none(隱藏某標簽)
1 |
p{display:none;}
|
註意與visibility:hidden的區別:
visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。
block(
內聯標簽設置為塊級標簽)
1 |
span {display:block;}
|
註意:一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。
inline
(塊級
標簽設置為內聯標簽)
1 |
li {display:inline;}
|
inline-block
display:inline-block可做列表布局,其中的類似於圖片間的間隙小bug可以通過如下設置解決:
1 2 3 4 |
#outer{
border: 3px dashed;
word - spacing: - 5px ;
}
|
外邊距(margine)和內邊距(padding)
盒子模型
- margin: 用於控制元素與元素之間的距離;margin的最基本用途就是控制元素周圍空間的間隔,從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離;
- Border(邊框): 圍繞在內邊距和內容外的邊框。
- Content(內容): 盒子的內容,顯示文本和圖像。
margine(外邊距)
單邊外邊距屬性:
1 2 3 4 |
margin - top: 100px ;
margin - bottom: 100px ;
margin - right: 50px ;
margin - left: 50px ;
|
簡寫屬性
View Code居中應用
1 |
margin: 0 auto;
|
padding(內邊距)
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用,一旦改變一切都改變。
設置同margine;
頁碼實例:
View Code思考1:body的外邊距
邊框在默認情況下會定位於瀏覽器窗口的左上角,但是並沒有緊貼著瀏覽器的窗口的邊框,這是因為body本身也是一個盒子(外層還有html),在默認情況下, body距離html會有若幹像素的margin,具體數值因各個瀏覽器不盡相同,所以body中的盒子不會緊貼瀏覽器窗口的邊框了,為了驗證這一點,加上:
body{ border: 1px solid; background-color: cadetblue; }
>>>>解決方法:
body{ margin: 0; }
思考2:margin collapse(邊界塌陷或者說邊界重疊)
1、兄弟div:
上面div的margin-bottom和下面div的margin-top會塌陷,也就是會取上下兩者margin裏最大值作為顯示值
2、父子div:
if 父級div中沒有border,padding,inlinecontent,子級div的margin會一直向上找,直到找到某個標簽包括border,padding,inline content中的其中一個,然後按此div 進行margin;
>>>> 解決方法:
1 |
overflow: hidden;
|
float屬性
基本浮動規則
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊,獨占一行,多個block元素會各自新起一行,默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性;
inline元素不會獨占一行,多個相鄰的行內元素會排列在同一行裏,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化。inline元素設置width、height屬性無效
- 常見的塊級元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流,指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。
脫離文檔流,也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文檔流的元素不存在而進行定位。
假如某個div元素A是浮動的,如果A元素上一個元素也是浮動的,那麽A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素,那麽A元素會被擠到下一行);如果A元素上一個元素是標準流中的元素,那麽A的相對垂直位置不會改變,也就是說A的頂部總是和上一個元素的底部對齊。此外,浮動的框之後的block元素元素會認為這個框不存在,但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素,會為這個框空出位置,然後按順序排列。
示例代碼:
View Code非完全脫離文檔流
左右結構div盒子重疊現象,一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上,但內容不會造成覆蓋現象,只有DIV形成覆蓋現象。
View Code>>>>解決方法:要麽都不使用浮動;要麽都使用float浮動;要麽對沒有使用float浮動的DIV設置margin樣式。
父級坍塌現象
View Code例子如上:.container和box3的布局是上下結構,上圖發現box3跑到了上面,與.container產生了重疊,但文本內容沒有發生覆蓋,只有div發生覆蓋現象。這個原因是因為第一個大盒子裏的子元素使用了浮動,脫離了文檔流,導致.container沒有被撐開。box3認為.container沒有高度(未被撐開),因此跑上去了。
>>>>解決方法:
1、固定高度
給.container設置固定高度,一般情況下文字內容不確定多少就不能設置固定高度,所以一般不能設置“.container”高度(當然能確定內容多高,這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
或者給.container加一個固定高度的子div:
<div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> <div id="empty" style="height: 100px"></div> </div> <div id="box3">box3</div>
但是這樣限定固定高度會使頁面操作不靈活,不推薦!
2、清除浮動(推薦)。
clear語法:
clear : none | left | right | both
取值:
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要註意的是:clear屬性只會對自身起作用,而不會影響其他元素。
View Code把握住兩點:1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用,一旦左邊有浮動元素,即切換到下一行來保證左邊元素不是浮動的,依據這一點解決父級塌陷問題。
思考:
View Code解決父級塌陷:
View Code3、overflow:hidden
overflow:hidden的含義是超出的部分要裁切隱藏,float的元素雖然不在普通流中,但是他是浮動在普通流之上的,可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下,它要計算內容的全部高度才能確定在什麽位置hidden,這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開,清除浮動。
position(定位)
1 static
static 默認值,無定位,不能當作絕對定位的參照物,並且設置標簽對象的left、top等值是不起作用的的。
2 position: relative/absolute
relative: 相對定位。
相對定位是相對於該元素在文檔流中的原始位置,即以自己原始位置為參照物。有趣的是,即使設定了元素的相對定位以及偏移值,元素還占有著原來的位置,即占據文檔流空間。對象遵循正常文檔流,但將依據top,right,bottom,left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
註意:position:relative的一個主要用法:方便絕對定位元素找到參照物。
absolute: 絕對定位。
定義:設置為絕對定位的元素框從文檔流完全刪除,並相對於最近的已定位祖先元素定位,如果元素沒有已定位的祖先元素,那麽它的位置相對於最初的包含塊(即body元素)。元素原先在正常文檔流中所占的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
重點:如果父級設置了position屬性,例如position:relative;,那麽子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題,即父級為自適應的,那我子元素就設置position:absolute;父元素設置position:relative;,然後Top、Right、Bottom、Left用百分比寬度表示。
另外,對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
示例代碼:
View Code總結:參照物用相對定位,子元素用絕對定位,並且保證相對定位參照物不會偏移即可。
3 position:fixed
fixed:對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現滾動條時,對象不會隨著滾動。而其層疊通過z-index屬性 定義。 註意點: 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點,因為這是兩個不同的流,一個是浮動流,另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上,被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。
示例代碼:
View CodeCaution!
1、默認的高度和寬度問題
(1)父子都是塊級元素
View Code這時,子元素設置為了父元素width的100%,那麽子元素的寬度也是500px;
但是如果我們把子元素的width去掉之後,就會發現子元素還是等於父元素的width。也就是說,對於塊級元素,子元素的寬度默認為父元素的100%。
當我們給子元素添加padding和margin時,可以發現寬度width是父元素的寬度減去子元素的margin值和padding值。
毫無疑問,如果去掉子元素的height,就會發先子元素的高度為0,故height是不會為100%的,一般我們都是通過添加內容(子元素)將父元素撐起來。
(2)父:塊級元素 子:內聯元素
如果內聯元素是不可替換元素(除img,input以外的一般元素),元素是沒有辦法設置寬度的,也就談不上100%的問題了。 即內聯元素必須依靠其內部的內容才能撐開。
如果內聯元素是可替換元素(img,input,本身可以設置長和寬),不管怎麽設置父元素的寬度和高度,而不設置img的寬和高時,img總是表現為其原始的寬和高。
<!DOCTYPE html> <html> <head> <title>...</title> <style> div.parent{ width: 500px; height: 300px; background: #ccc; } img{ height: 100px; background: green; } </style> </head> <body> <div class="parent"> <img class="son" src="s1.jpg"></img> </div> </body> </html>
由此我們可以發現,雖然沒有設置寬度,但是表現在瀏覽器上為160px,它並沒有繼承父元素的100%得到500px,而是根據既定的高度來等比例縮小寬度。 同樣, 如果只設置width,那麽height也會等比例改變。 如果我們把img的width設置為100%,就可以發現其寬度這時就和父元素的寬度一致了。而我們一般的做法時,首先確定img的父元素的寬度和高度,然後再將img的寬度和高度設置位100%,這樣,圖片就能鋪滿父元素了。
後臺管理布局
View Codecss響應式布局
View Code課下作業
1、實現一個登陸頁面,樣式如下:
2、實現一個註冊頁面,樣式如下:
css知識