CSS樣式表基礎(chǔ)知識(shí).ppt

前端設(shè)計(jì)課程培訓(xùn),云創(chuàng)科技專注IT教育 ,現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)CSS樣式 /html/ 安裝google瀏覽器,網(wǎng)頁(yè)編程 /CSS,CSS結(jié)構(gòu),*內(nèi)聯(lián)格式： *外鏈文件 ,網(wǎng)頁(yè)編程 /CSS,CSS結(jié)構(gòu),*書寫格式： 內(nèi)部標(biāo)簽： foo id: #foo class: .foo,網(wǎng)頁(yè)編程 /CSS,CSS結(jié)構(gòu),*預(yù)設(shè)： * margin:0; padding:0; 所有標(biāo)簽內(nèi)外邊界全置0 *body預(yù)設(shè) *塊面預(yù)設(shè)display:block *行內(nèi)預(yù)設(shè)margin: 0; padding: 0; border: 0; z-index:inherit; *圖像預(yù)設(shè)img,a img border:0; margin:0; padding:0; ,網(wǎng)頁(yè)編程 /CSS,CSS結(jié)構(gòu),*預(yù)設(shè)： * 表格預(yù)設(shè) table empty-cells: show; border-collapse: collapse; 顯示空表格、合并表格線 *表單預(yù)設(shè) ul li list-style: none; *標(biāo)題預(yù)設(shè) h1, h2, h3, h4, h5, h6 font-size: 1.6em; *文本預(yù)設(shè) em, i font-style: normal; ,網(wǎng)頁(yè)編程 /CSS,CSS結(jié)構(gòu),*a預(yù)設(shè)： * a預(yù)設(shè) abackground:transparent; width:100% *a:active,a:hoveroutline:0 點(diǎn)擊、劃過 *a .linktext-decoration:none; color:#CCC 未訪問 *a:visited,a:hover,a:activetext-decoration:none; 已訪問、劃過、點(diǎn)擊文本樣式,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*display 規(guī)定元素應(yīng)該生成的框的類型 none、block、inline、inline-block、table、inherit,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*Positioning 元素的定位類型 static、relative、absolute、fixed 配合z-index使用,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*background 背景屬性 background-color background-image background-repeat background-position background-attachment,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*width 規(guī)定元素寬度 20px、100% *height 規(guī)定元素高度 20px、100%,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*文本屬性 text-indent：首行縮進(jìn) text-align：文本對(duì)齊 word-spacing：字間距 letter-spacing：?jiǎn)卧~間距 text-transform：大小寫轉(zhuǎn)換 text-decoration：加線屬性 white-space：處理空白符 direction ：文本方向,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*字體屬性 font-family：字體選擇 font-style：字體傾斜 font-variant：設(shè)定小型大寫字母 font-weight：加粗 font-size：字體大小 font：字體集合,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*列表屬性 list-style-type : 列表前標(biāo)類型 list-style-image : 列表前標(biāo)圖像 list-style-position：列表標(biāo)志位置 list-style : url(example.gif) square inside,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*表格屬性 border : 1px solid blue;邊框 border-collapse : 邊框折疊 width、height：寬高 list-style : url(example.gif) square inside text-align:水平對(duì)齊 vertical-align:垂直對(duì)齊 padding:15px;內(nèi)邊距 border-collapse、border-spacing、caption-side、empty-cells、table-layout,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*表格屬性 border : 1px solid blue;邊框 border-collapse : 邊框折疊 width、height：寬高 list-style : url(example.gif) square inside text-align:水平對(duì)齊 vertical-align:垂直對(duì)齊 border-collapse、border-spacing、caption-side、empty-cells、table-layout,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*框?qū)傩?網(wǎng)頁(yè)編程 /CSS,CSS屬性,*內(nèi)邊距屬性 padding：上、右、下、左 padding-top：上邊距 padding-right：右邊距 padding-bottom：下邊距 padding-left：左邊距,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*邊框?qū)傩?border,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*外邊距屬性 margin：上、右、下、左,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*浮動(dòng)屬性 float：定義元素在左右方向浮動(dòng) clear：清除浮動(dòng),網(wǎng)頁(yè)編程 /CSS,CSS屬性,*overflow 屬性 f規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情 visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*選擇器 a *選擇器分組 body, h2, p, table, th, td, pre, strong, em color:gray;,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*類選擇器 .foo *結(jié)合元素選擇器 p.important color:red; *多類選擇器 .important font-weight:bold; .warning font-style:italic; .important.warning background:silver;,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*ID選擇器 #foo *唯一性、區(qū)分大小寫,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*屬性選擇器 title color:red; ahref color:red; ahreftitle color:red; imgalt border: 5px solid red;,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*后代選擇器 h1 em color:red;,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*子元素選擇器 h1 strong color:red;,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*相鄰兄弟選擇器 h1 + p margin-top:50px; . ,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*偽類 a:hover *偽元素 h1:before content:url(logo.gif); ,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*HTML 標(biāo)簽 /tags/tag_doctype.asp 請(qǐng)始終向 HTML 文檔添加 聲明，這樣瀏覽器才能獲知文檔類型。 在 HTML 4.01 中有三種 聲明。在 HTML5 中只有一種：,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*高級(jí)運(yùn)用,網(wǎng)頁(yè)編程 /CSS(),CSS屬性,*border-radius -moz-border-radius:25px 圓角 *box-shadow 陰影,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*background-size -moz-background-size 背景尺寸 *background-origin -webkit-background-origin 屬性規(guī)定背景圖片的定位區(qū)域，背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域 *background-image:url(bg_flower.gif),url(bg_flower_2.gif);多重背景,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*text-shadow 文本陰影 *word-wrap:break-word; 允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*text-shadow 文本陰影 *word-wrap:break-word; 允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*font-face 選擇自定義字體 font-facefont-family: myFirstFont;src: url(Sansation_Light.ttf), url(Sansation_Light.eot); /* IE9+ */ div font-family:myFirstFont; ,網(wǎng)頁(yè)編程 /CSS,CSS屬性,*透明屬性 filter:alpha(opacity=50); /*支持 IE 瀏覽器*/ -moz-opacity:0.50; /*支持 FireFox 瀏覽器*/ opacity:0.50; /*支持 Chrome, Opera, Safari 等瀏覽器*/,網(wǎng)頁(yè)編程 /兼容,跨瀏覽器兼容性問題,*對(duì) 元素的外邊距和內(nèi)邊距進(jìn)行預(yù)定義是一個(gè)