基礎(chǔ)知識(shí)
- 文本使用閉合標(biāo)簽(標(biāo)簽,段落,文本)<p></p>
- 引用文本使用自閉和標(biāo)簽 <img src='' alt=''/>
css display屬性1:block(可以設(shè)置寬和高),2:inline(不可以設(shè)置寬和高,可以設(shè)置line-height),3:table-cell,能實(shí)現(xiàn)子元素等高4:inline-block。 html實(shí)體用于生成那些在鍵盤(pán)上沒(méi)有的字,以&開(kāi)始义郑，以;結(jié)束寻行。如&nbsq;實(shí)體網(wǎng)址http://www.elizabethcastro.com/ html/extras/entities.html
為文檔添加樣式的三種方式
- 行內(nèi)樣式 <p style=""></p>
- 嵌入樣式 <style type="text/css">p {}</style>
- 引入樣式 <link href="style.css" rel="stylesheet" type="text/css"/>
- 在css里面引入其他css @import url(css/style.css),注意的是@import必須要放在樣式表中其他表之前,否則不會(huì)被加載.
幾種css選擇符
- 多個(gè)選擇符:h1,h2,h3 {color:red}
- 后代選擇符:article p {color:red}
- 子選擇符:article > p {color:red}
- 緊鄰?fù)x擇符:h2 + p {color:red} 選擇緊鄰h2的p元素
- 一般同胞選擇符:h2 ~ p p只要在同胞h2元素后面就行.不需要緊鄰
- 通用選擇符: * 會(huì)選擇所有的元素露泊。section * a{}會(huì)選擇所有section的孫子含有a標(biāo)簽的元素古瓤，不管孫子含有a標(biāo)簽元素的父元素是什么,section的子元素a不會(huì)被選中.
- id(#)選擇符和類(lèi)(.)選擇符向拆。id還能用于頁(yè)面內(nèi)導(dǎo)航鏈接,<a href="#bio">biography</a>讯沈。#表示鏈接在當(dāng)前的頁(yè)面中,不會(huì)觸發(fā)瀏覽器加載頁(yè)面,<h3 id="bio">鏈接在這里</h3>载弄。當(dāng)點(diǎn)擊a標(biāo)簽時(shí),會(huì)調(diào)到id="bio"的h3標(biāo)簽。<a hrf="#">back to top</a>點(diǎn)擊會(huì)返回頂部姐军。
屬性選擇符:
- 屬性名選擇符 img[title] {color:red}
- 屬性值選擇符 img[title='test'] {color:red}
偽類(lèi)
- UI偽類(lèi)
- 鏈接偽類(lèi) a:link /visited/hover/active :表示偽類(lèi).::是css3表示的偽類(lèi)铁材。以后會(huì)統(tǒng)一為::,
- e:focus偽類(lèi), e可以為input p h1
- :target偽類(lèi),用戶(hù)點(diǎn)擊指向頁(yè)面的其他鏈接,則那個(gè)元素就是target,<a href="#more_info"></a>,#more_info:target {color:red}選中的就是<h2 id="more_info">kkkkkk</h2>,當(dāng)點(diǎn)擊a鏈接轉(zhuǎn)向ID為more_info的元素時(shí),會(huì)把id為more_info的h2的字體顏色改為紅色
- 結(jié)構(gòu)化偽類(lèi) 根據(jù)標(biāo)記結(jié)構(gòu)應(yīng)用樣式.
- e:first-child,e:last-child,ul li:first-child {color:red}
- e:nth-child(n) e位元素名,n可以為數(shù)字,也可以為odd或even,li nth-child(odd)
偽元素
偽元素就是你文檔中若有實(shí)無(wú)的元素,詳情http://www.stylinwithcss.com,加上無(wú)形的標(biāo)簽和樣式。
- e::first-letter 例如p::first-letter{color:red},為p標(biāo)簽加上第一個(gè)字為紅色.
- e::first-line p::first-line,選中p段落的第一段庶弃。
- ::before,::after,用于在特定的樣式前/后添加特殊內(nèi)容.例如<p class="age">25</p>.加如下樣式p.age::before {content:'Age: ';},p.age::after{content:' years.'},在頁(yè)面上展示Age: 25 years.,在content包含的空格衫贬、
繼承
css有很多內(nèi)容是可以被繼承的,比如字體,顏色,字號(hào)。不能被繼承主要是涉及到盒子的定位和顯示方式,如邊框邊距等.注意,由于字體和文本樣式是可以繼承的,在使用字體大小時(shí)用%和em時(shí)要格外小心,如果某個(gè)標(biāo)簽的字體大小設(shè)為80%,而它的一個(gè)后代的字體大小也被設(shè)了80%,那么后代文本字體大小為64%.
層疊
3:定位元素
盒模型:就是為html元素生成一個(gè)矩形盒子
頁(yè)面板式只要由三個(gè)屬性控制:position,display,float屬性
理解盒模型:border(邊框)歇攻，padding(內(nèi)邊距)margin(外邊距),在每個(gè)css文件前寫(xiě),*{margin:0;padding:0},目的:瀏覽器兼容.垂直方向上的外邊框(margin-top和margin-bttom)會(huì)重疊,取絕對(duì)值大的數(shù)值,水平方向不會(huì)重疊.設(shè)置的width:100px,只是內(nèi)容的寬度.不上盒子的寬度(還要border,padding,margin寬度),
浮動(dòng)和清除:float和clear.浮動(dòng)主要是文字環(huán)繞圖片.他就是要求瀏覽器把它往上往左,往右方推,知道碰到父元素的內(nèi)邊界.浮動(dòng)非浮動(dòng)元素時(shí)必須設(shè)置一個(gè)寬度,不然樣式不好控制.float脫離文檔流,其父元素(有內(nèi)邊距不知道會(huì)不會(huì)包含)不能包含浮動(dòng)元素,如何讓父元素包含子元素,1:在父元素添加overflow:hidden,(不直觀,它的真正用途是防止包含元素被超大元素?fù)未?.2:同時(shí)浮動(dòng)父元素,需要設(shè)置父元素的寬度.3:在父元素最后添加非浮動(dòng)的子元素.然后清除該元素設(shè)置clear:both.
定位:static,relative,absolute,fixed,默認(rèn)是static,沒(méi)有bottom,left等屬性偏移,relative:相對(duì)它原有文檔流(默認(rèn)位置)的位置,進(jìn)行top,left等改變位置, 會(huì)覆蓋其他static的元素(原有文檔流中位置依舊存在).absolute:徹底從文檔流中拿出來(lái).相對(duì)的是父元素的position不為static的偏移.fixed也從文檔流中拿出來(lái),相對(duì)于屏幕
顯示屬性:display:inline,block,none,inline-block,table-cell.設(shè)置none屬性該元素及其包含的元素,都不會(huì)再頁(yè)面中顯示.占住的空間也會(huì)被回收.visibility:hidden,元素會(huì)隱藏,有空間存在.
border有四個(gè)屬性:border-width,border-color,border-style(有none,hidden,thick,dotted,dashed,solid,double,groove等),border-radius.
背景 背景顏色和背景圖片
background-repeat:reapy(默認(rèn)),repeat-x,repeat-y,no-reapt;css3新增了:round(不剪切圖片,調(diào)整圖片大小),space(不剪切圖片,調(diào)整圖片的間的空白); background-position:top,left,right,bottom,center;兩兩組合顯示圖片放的位置固惯。background-size:設(shè)置圖片的大小.50%為背景圖片的一半,cover拉大圖片,完全填滿(mǎn)背景區(qū),contain縮放圖片適合背景區(qū)不填滿(mǎn)的(都是保持寬高比)。
背景粘貼:background-attachment:控制滾動(dòng)元素內(nèi)的背景圖片是否隨元素滾動(dòng)而移動(dòng).scroll(默認(rèn))會(huì)移動(dòng);fixed不會(huì)移動(dòng) 背景漸變:1線(xiàn)性漸變：backgroud:linear-gradient(left,#fff,#ddd)從一端變到另一端.放射性漸變:從一點(diǎn)向四周擴(kuò)散background:radial-gradient()
字體:1：機(jī)器中安裝的字體,2:保存在第三方網(wǎng)站上的字體,用link引入.3:保存在你的web服務(wù)器的地址用@font-face規(guī)則隨網(wǎng)頁(yè)一起發(fā)送給瀏覽器缴守。屬性：font-family,font-size,font-style(正體或是斜體),font-weight(字體大小),font-variant,默認(rèn)情況下1em=16px,三種字體大小:1:絕對(duì)字體大小px葬毫。2相對(duì)字體大小:(em(相對(duì)最近被設(shè)置過(guò)的祖先元素字體大小)或rem(相對(duì)根元素的大小)).用em的一個(gè)技巧:可以吧設(shè)font-size:62.5%,可以把基準(zhǔn)16px改為10px,那么1em=10px,1.5em=15px
文本屬性:{text-indent:3em}文本縮進(jìn),letter-spacing(字符間距),word-spacing(單詞間距),text-decoration(文本裝飾line-through等),text-align(文本對(duì)齊left,right,center,justify),line-height(行高),text-transform(文本轉(zhuǎn)換),vertical-align(垂直對(duì)齊多對(duì)化學(xué)分子式有用)
頁(yè)面布局
多欄布局有三種實(shí)現(xiàn)方案:1固定寬度(大小不變) 2流動(dòng)(隨瀏覽器窗口大小改變而改變) 3彈性(和流動(dòng)布局類(lèi)似,連文字都改變太復(fù)雜) 響應(yīng)式布局:設(shè)備支持css媒體查詢(xún),適應(yīng)各種屏幕寬度的可變固定布局.
浮動(dòng)偏移:為固定寬度(為content的寬度)的元素添加水平外間距,邊框,內(nèi)邊距. 導(dǎo)致浮動(dòng)框總體的寬度變長(zhǎng).可能會(huì)偏移。解決1屡穗；從設(shè)定content的寬度中減去各種邊框的寬度贴捡。2：在容器內(nèi)部添加內(nèi)邊框或外邊距.3:使用css3的box-sizing:border-box屬性.給元素設(shè)置此屬性后,此元素的邊框和內(nèi)邊距都不會(huì)增加。content會(huì)變小
子-星選擇符：selector * 就可以選擇selector所代表的所有后代元素selector > * 選擇selector所代表的所有子代元素
三欄-中欄流動(dòng)布局:1 使用負(fù)外邊距實(shí)現(xiàn).p183 2 用css3單元格實(shí)現(xiàn)村砂。把三欄設(shè)為display:table-cell
li+li 非子類(lèi)選擇器.display:in-line收縮包圍內(nèi)容,display:block,擴(kuò)展填充父元素
