課程6-10天day6筆記和作業(yè)

1、昨日回顧CSS 的介紹CSS，Cascading Style Sheets 層疊樣式表。一個網(wǎng)頁由三個部分：結(jié)構(gòu)、表現(xiàn)、行為，對應(yīng)的標(biāo)準(zhǔn)是：XHTML、CSS、JavaScript。這三個標(biāo)準(zhǔn)語言，是瀏覽器直接可以識別的，并且能直接進行解釋(翻譯)的。CSS 的格式一個 CSS 樣式表()由多個 CSS 規(guī)則；一個 CSS 規(guī)則由“選擇器”和；選擇器就是給哪一個 HTML 元素定義；CSS 選擇器第一：基本選擇器（單一）（1）（2）（3）通用選擇器(*)：將匹配所有的 HTML 元素；選擇器：對應(yīng)所有的 HTML 標(biāo)記，名稱與標(biāo)記名稱一樣。類選擇器：可以通過給一類 HTML 元素，定義同一個

2、class 屬性來增加樣式。類樣式定義以“.”開頭定義。CSS 的 CLASS 屬性一般給層疊樣式用表。比如：.news 表示 claews 的元素增加樣式a)b)c)（4）a)b)c)div.news 表示 claews 的元素增加樣式.newsdiv.title 表示claews 下的 class=title 的元素ID 選擇器：給標(biāo)記特定 ID 屬性的 HTML 元素來增加樣式。Id 選擇器的定義，以“#”號開頭網(wǎng)頁不能出現(xiàn)同一個 ID 的值，ID 像號，具有唯一性；HTML 元素的 ID 屬性，一般給 JavaScript 使用第二：組合選擇器（1）a)b)（2）a)（3）多元素選擇器

3、：也就是同時給多個 HTML 元素定義。body,p,a,ul,li,pmargin:0px;padding:0px;每一個 HTML 元素都具有默認(rèn)樣式。后代元素選擇器：用空格來分隔各個選擇器。.news .title pbackground-color:#FF0000;子元素選擇器：用號來分隔父子選擇器，不存在第三層級。第三：偽類選擇器偽類選擇器一般是給超標(biāo)記來增加樣式。超具有四個狀態(tài)：正常狀態(tài) a:link放上狀態(tài) a:hover激活狀態(tài) a:active過狀態(tài) a:visited全局a:link,a:visitedcolor:#333;text-decoration:none; a:h

4、overcolor:#FF0000,text-decoration:underline;給增加類樣式 (class=“a2”)a.a2:link,a.a2:visiteda.a2:hoverCSS 的繼承性CSS元素將繼承外部元素的樣式，多個外層元素的樣式就疊加到內(nèi)層元素上。元素是網(wǎng)頁中最大的標(biāo)記，它中的樣式將被其它子元素繼承。哪些 CSS 屬性能被繼承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align 等引入 CSS 的方式內(nèi)嵌式通過來書寫

5、 CSS 代碼。只能應(yīng)用于當(dāng)前網(wǎng)頁，不能被其它網(wǎng)頁共享。注意：標(biāo)記可以放在網(wǎng)頁的任何地方，但一般放在。外聯(lián)式通過標(biāo)記來引入外部的 CSS 文件(.css)?？梢员黄渌W(wǎng)頁共享。public.cssindex.cssnews.cssaboss格式：link href=“CSS 的 URL” rel=“stylesheet” type=“text/css”注意：標(biāo)記只能放在中（3）行內(nèi)樣式通過 style 的屬性來書寫 CSS 代碼。/每一個 HTML 元素，都有 style、cla舉例：、name、title 屬性。CSS 的字體/文本屬性 Font-size：文字大小 Font-weight：

6、加粗 Font-style：斜體 Color：顏色Line-height：行高 Text-indent：首行縮進 Text-align：水平對齊Letter-spacing：字符間距CSS 列表List-style-type：列表類型，取值：none、circle、 squareList-style-ition：符號位置，取值：inside、outsideList-style-image：路徑，舉例：list-style-image:url(images/li01.gif);CSS 背景屬性Background-color：背景顏色Background-image：背景，舉例：backgrou

7、nd-image:url(images/bg.gif);Background-repeat：背景平鋪，取值：no-repeat(不平鋪)、repeat(平鋪)、repeat-x(x 方向)、repeat-y(y 方向)Background-ition：背景定位，取值：固定值或百分比格式：background-ition:水平方向 垂直方向;用固定值定位：background-用百分比定位：background-用單詞來定位：background-ition:100px 0px;ition:50% 50%;/距離左邊 100px，距離上邊 0px/水平方向居中 垂直方向居中tion:left|c

8、enter|righttop|center|bottom;三個值取其中一個Background-attaent：附加信息，取值：scroll(滾動)、fixed(固定)簡寫形式：background:url(images/bg.gif) repeat-x 100px 0px;/多個屬性值間用“空格”隔開CSS 浮動和清除Float：元素浮動，取值：left 或 right。Clear：清除浮動，取值：left 或 right 或 bothCSS 浮動元素將向左向右浮動；浮動可以叫“飄”起來；浮動的元素，直到碰到父元素的邊框或前一個浮動元素的邊框為止；浮動元素是一個塊元素框，不管它原來是什么元素

9、(行內(nèi)元素)；浮動元素不再占用空間，脫離了普通文檔流，層級比普通元素的級別高；清除浮動（1） 清除浮動特性后，清除元后的其它元素將恢復(fù)默認(rèn)排版；（2） 清除浮動特性后，包圍元素從視覺上看起來，像包圍住了浮動元素；CSS 邊框?qū)傩訠order：同時設(shè)置四個邊框的屬性 Border-left：設(shè)置左邊框的屬性 Border-right：設(shè)置右邊框的屬性 Border-top：設(shè)置頂邊框的屬性 Border-bottom：設(shè)置底邊框的屬性格式：border-bottom：粗細 線型 線顏色;舉例：border-bottom：2px solid #FF0000;/元素的下邊線為 2px 粗的實線，顏色

10、為紅色線型取值：none(無邊線)、solid(實線)、dashed(虛線)、dotted(點狀線)、double(雙線)“盒子”模型每一個 HTML 元素可以看成一個“盒子”。一個“盒子”具有：寬度、邊框、內(nèi)填充、外邊距寬度(width)和高度(height)：是指內(nèi)容的寬度和高度，不含邊框、外邊距、內(nèi)填充。內(nèi)填充(padding)：是指內(nèi)容到邊框線間的距離，含四個方向：上、右、下、左外邊距(margin)：是指邊框線以外的距離。計算一個“盒子”的總空度假設(shè)：總寬度為 100px，邊框為 1px，內(nèi)填充為 10px，求內(nèi)容的寬度 Width = 100px 1px*2 -10px*2 = 7

11、8px假設(shè)：總寬度為 100px，內(nèi)容的寬 50px，求左右內(nèi)填充分別是多少？Padding-left = (100px 50px )/2 = 25pxCSS 內(nèi)填充 paddingPadding-left：左邊線到內(nèi)容間的距離 Padding-right：右邊線到內(nèi)容間的距離 Padding-top：頂邊線到內(nèi)容間的距離 Padding-bottom：底邊線到內(nèi)容間的距離Padding：同時設(shè)置四個邊的內(nèi)填充距離padding:10px;padding:5px 10px;/表示：上下左右四個內(nèi)填充都是 10px/表示：上下為 5px，左右為 10pxpadding:5px 10px 15px;/表示：上為 5px，左右為 10px，下為 15pxpadding:5px 10px 15px 20px;/表示：上右下左分別設(shè)置不同的內(nèi)填充，順序不可亂CSS 外邊距 marginMargin-left：左邊線以外的距離Margin-right：右邊線以外的距離Margop：頂邊線以外的距離Margin-bottom：底邊線以外的距離Margin:10px;Margin:10px 15px; Margin:5px 10px 15px/表示：四個外邊距都是