代碼學習筆記33【頁內插入樣式應用】

07-21

【css樣式表的用法】代碼教程33學習筆記

一、填空：1、css樣式表的用法大致有三種。即：（頁內插入）樣式、（行內插入）樣式與（外鏈插入）樣式。2、css樣式表的「行內插入樣式」，就是在html代碼的某個（標籤）中插入「css樣式」，把「css樣式」作為html代碼某個（標籤）的一個（屬性）應用。3、頁內插入樣式，是在網頁代碼的（開頭），設置一個（樣式表），用（樣式表）控制網頁內容。4、頁內插入css樣式，一般由三部分組成：（樣式標籤）、（注釋標籤）、（樣式尾標籤）。二、css樣式表中，「選擇器」是指什麼？「聲明」是指什麼？「選擇器」是指html代碼中的某個元素（或者某個屬性）；「聲明」是指對這個html代碼中的元素設置的樣式，也可以說是對這個html代碼中的元素設置的屬性與屬值。三、頁內插入css樣式有什麼優點？「頁內插入css樣式」的優點是：要想修改此網頁的樣式，比較容易。只要修改樣式表即可，不像「行內插入樣式」那樣，得一個一個地修改每個標籤中的樣式。四、如何避開360doc個人圖書館伺服器的屏蔽，使「頁內插入css樣式」生效？要想應用css樣式的頁面插入方式，必須在設置樣式表之前，先在網頁中輸入一些內容，才能夠避開360圖書館的伺服器對css樣式的屏蔽，才能夠使我們設置的css樣式有效。五、學會應用「行內插入css樣式」和「頁內插入css樣式」製作網頁。代碼舉例1：nnnn<STYLE type=text/css>.s{ background-color:#0000ff; color:#fff;}.e{ background-color:#00ff00;}.f{ background-color:#ffff00;}</STYLE><TABLE title=頁內插入css樣式 border=2 cellSpacing=0 borderColor=#00f000 cellPadding=0 width_=254><TBODY><TR class=s title=第一行 align=center><TD>css樣式</TD><TD>頁內插入</TD><TD>方法</TD></TR><TR class=e title=第二行 align=center><TD>css樣式</TD><TD>頁內插入</TD><TD>方法</TD></TR><TR class=s title=第三行 align=center><TD>css樣式</TD><TD>頁內插入</TD><TD>方法</TD></TR><TR class=e title=第四行 align=center><TD>css樣式</TD><TD>頁內插入</TD><TD>方法</TD></TR><TR class=f title=第五行 align=center><TD>css樣式</TD><TD>頁內插入</TD><TD>方法</TD></TR></TBODY></TABLE>上面的代碼，首先，輸入了幾個字母（文字也可），為的是使「頁內插入css樣式」生效。（這一點很重要歐！）第一個標籤：<樣式標籤類型＝文本/css>下面的內容是為網頁設置的css樣式。為網頁設置的css樣式，也可以放置到「注釋標籤」中。為網頁設置的css樣式，有三個內容：選擇器：.s{背景顏色：藍色；文字顏色：白色；}選擇器：.e{背景顏色：綠色；}選擇器：.f{背景顏色：黃色；}第二個標籤：<樣式尾標籤>接下來就是一套五行三列的表格標籤。在五行三列的表格標籤中，第一行與第三行的行標籤中，設置了class=s屬性（不可省略）。意思是這兩行的內容，要按照s樣式顯示。即：背景顏色為「藍色」；文字顏色為「白色」。第二行與第四行的行標籤中，設置了class=e屬性（不可省略）。意思是這兩行的內容，要按照e樣式顯示。即：背景顏色為「綠色」；文字顏色沒有設置，採用系統默認的文字顏色「黑色」。第五行的行標籤中，設置了class=f屬性（不可省略）。意思是這一行的內容，要按照f樣式顯示。即：背景顏色為「黃色」；文字顏色沒有設置，採用系統默認的文字顏色「黑色」。注釋：class屬性是指元素引用的css樣式表裡面的樣式名稱，也就是那個選擇器的名稱。效果：css樣式頁內插入方法css樣式頁內插入方法css樣式頁內插入方法css樣式頁內插入方法css樣式頁內插入方法

代碼舉例2：<FONT style="FONT-SIZE: 1px">n</FONT><STYLE type=text/css>.p{ TEXT-INDENT: 2em; background-color:#0000ff; color:#fff; font-family: 黑體; font-size: 18pt;}.p2{text-align: center; background-color:#00ff00; color:#f0f; font-family: 黑體; font-size: 28pt;}.div{TEXT-INDENT: 2em; BACKGROUND: url(http://image14.360doc.com/DownloadImg/2010/08/2221/4784432_36.jpg) ; background-color:#00ff00; font-family: 黑體; color:#0f0; font-size: 16pt;}</STYLE><DIV style="BACKGROUND-COLOR: #f08888"><P class=p2>中秋節祝福語</P><DIV class=p>許一個美好的心愿祝你快樂連連，送一份美妙的感覺祝你萬事圓圓，發一條短短的信息祝你心順甜甜。祝中秋快樂!</DIV><P class=div>臨一池碧水，釣幾尾閑魚，玩味人生得失，心游凡塵外，喝一壺老酒，交一群朋友，雖說人在江湖身不由己，但記得別太累著自己，祝中秋快樂。</P><DIV class=p>偶爾的繁忙，不代表遺忘，秋天的到來，願你心情舒暢，曾落下的問候，這次一起補償，所有的關心，凝聚這條簡訊：祝福你朋友，中秋快樂!</DIV><P class=div>潔明皓月逢佳期，摯手共享兩相依，愛深情濃甜似蜜，翱之清風何求兮。相伴月缺至月圓!共度此時至此生！</P><P class=p>風柔，雨潤，花好，月圓，幸福生活日日甜!冬去，春來，似水，如煙，一年中秋在眼前!流年不復返，人生需盡歡!說一聲珍重，祝中秋快樂!</P><P class=div>讓我送上香甜的月餅，連同一顆祝福的心!成為第一個祝願你的人!明月本無價，高山皆有情，願你的生活就像那十五的月亮一樣，圓圓滿滿!明明亮亮!</P><P class=p>願中秋佳節：春風洋溢您、家人關心您、愛情滋潤您、財神寵幸您、朋友忠於您、我會祝福您、幸運之星永遠照著您!</P><P class=div>中秋節快到了，買輛賓士送你，太貴;請你出國旅遊，浪費;約你海吃一頓，傷胃;送你一枝玫瑰，誤會;給你一個熱吻，不對;只好簡訊祝你快樂，實惠!</P><P class=p>星星的寂寞月知道，晚霞的羞澀雲知道，花兒的芬芳蝶知道，青草的溫柔風知道，心裡的酸楚淚知道，我的祝福你知道!祝中秋節快樂!</P><P class=div>八月中秋不送禮，發條簡訊祝福你，健康快樂長伴你，好運和你不分離，還有讓我告訴你，財神已經跟隨你。中秋節愉快！</P><P class=p>正憐火樹千春妍，忽見清輝映月闌。出海鮫珠猶帶水，滿堂羅袖欲生寒。燭花不礙空中影，暈氣疑從月里看。為語東風暫相借，來宵還得盡餘歡。</P><BR></DIV>