CSS樣式表基礎知識.ppt

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