實(shí)驗(yàn)2朱ㄓ頲ss.doc

南京信息工程大學(xué) Web技術(shù)與應(yīng)用 實(shí)驗(yàn)(實(shí)習(xí))報(bào)告實(shí)驗(yàn)(實(shí)習(xí))名稱 CSS樣式表 實(shí)驗(yàn)(實(shí)習(xí))日期 2016.10.31 得分 指導(dǎo)老師 馬瑞 系 計(jì)算機(jī)與軟件學(xué)院 專業(yè) 軟件工程 班級(jí) 14軟工（專轉(zhuǎn)本）姓名 朱建宇 學(xué)號(hào) 20148308007 一、實(shí)驗(yàn)?zāi)康?、掌握CSS的定義及應(yīng)用。2、掌握CSS樣式的語(yǔ)法規(guī)則；3、掌握CSS樣式表的定義位置；4、掌握CSS樣式表的引用的幾種方式 二、 實(shí)驗(yàn)內(nèi)容與步驟1、 比較在html文件中使用CSS樣式前后的變化。（1）將以下文件在記事本中保存，以.html存盤(pán)。CSS標(biāo)記1CSS標(biāo)記的正文內(nèi)容1CSS標(biāo)記2CSS標(biāo)記的正文內(nèi)容2CSS標(biāo)記3CSS標(biāo)記的正文內(nèi)容3CSS標(biāo)記4CSS標(biāo)記的正文內(nèi)容4練習(xí)：將以上h標(biāo)題改為紅色。保存后刷新。CSS標(biāo)記1CSS標(biāo)記的正文內(nèi)容1CSS標(biāo)記2CSS標(biāo)記的正文內(nèi)容2CSS標(biāo)記3CSS標(biāo)記的正文內(nèi)容3CSS標(biāo)記4CSS標(biāo)記的正文內(nèi)容4（2）將以上文件打開(kāi)，利用鏈接方式使用CSS樣式表（選擇符定義為標(biāo)記選擇符組）改寫(xiě)上面代碼。 自己給出改寫(xiě)后代碼練習(xí)：將上面h2標(biāo)題改為紅色、幼圓字體。比較CSS的優(yōu)勢(shì)。無(wú)標(biāo)題文檔#h2color:red;font-family:幼圓；CSS標(biāo)記1CSS標(biāo)記的正文內(nèi)容1CSS標(biāo)記2CSS標(biāo)記的正文內(nèi)容2CSS標(biāo)記3CSS標(biāo)記的正文內(nèi)容3CSS標(biāo)記4CSS標(biāo)記的正文內(nèi)容4參考書(shū)中2.3.6節(jié)css樣式屬性，完成下面任務(wù)2、利用span標(biāo)簽完成Google公司的Logo設(shè)計(jì)要求如下：（1）使用嵌入式引入CSS樣式表。（2）使用類(lèi)選擇器定義元素。（3）通過(guò)控制不同的類(lèi)，分別為第一個(gè)字母“G”設(shè)置為藍(lán)色、加粗、60px字體；第二個(gè)字母“o”設(shè)置為紅色、加粗、60px字體；第三個(gè)字母“o”設(shè)置為黃色、加粗、60px字體；第四個(gè)字母“g”設(shè)置為藍(lán)色、加粗、60px字體。（4）剩余字母“l(fā)e”按默認(rèn)樣式輸出。代碼：.a1color:#00F;font-weight:bold;font-size:60px.a2color:#F00;font-weight:bold;font-size:60px.a3color:#FF0;font-weight:bold;font-size:60px.a4color:#00F;font-weight:bold;font-size:60pxGoogle截圖：3、請(qǐng)做出網(wǎng)頁(yè)效果如下圖所示：要求如下：（1）設(shè)置所有文本為微軟雅黑、14像素、黑色字體。（2）“新浪”、“新浪網(wǎng)”為紅色字體，“博客首頁(yè)”為藍(lán)色字體，網(wǎng)址及日期為綠色字體。（3）設(shè)置標(biāo)題為18像素、左對(duì)齊、下劃線的效果。當(dāng)鼠標(biāo)移到超鏈接的文字上顯示十字型光標(biāo)（屬性值：crosshair）。訪問(wèn)后超鏈接的格式為顏色：綠色，無(wú)下劃線。（4）設(shè)置文本“-百度快照-評(píng)價(jià)”為灰色、下劃線的效果。代碼：bodyfont-family:微軟雅黑;color:#000;font-size:14px.b1color:#F00/*紅色*/.b2color:#00F/*紅色*/.b3color:#0F0/*綠色*/.b4font-size:18px;text-decoration:underline;cursor:crosshair/*下劃線*/.b5font-size:20px;.b6color:#666;font-size:14px;text-decoration:underline/*下劃線*/ 新浪 博客首頁(yè) 新浪網(wǎng) 新浪網(wǎng)博客頻道是全中國(guó)最主流，最具人氣的博客頻道。擁有最耀眼的娛樂(lè)明星博客、最知性的名人博客、最動(dòng)人的情感博客、最自我的草根博客。 /2014-07-07 -百度快照評(píng)價(jià)截圖：4、請(qǐng)做出網(wǎng)頁(yè)效果如下圖所示。要求如下：（1）設(shè)置標(biāo)題“春天”為16像素、紅色、加粗、居中、下劃線的效果。（2）設(shè)置所有文本為宋體、12像素、綠色字體，“春季”字體顏色設(shè)為紅色。（3）設(shè)置文本首行縮進(jìn)2個(gè)字符，文字行間距為20像素。代碼：無(wú)標(biāo)題文檔.spring2color:#F00bodyfont-family:宋體;color:#0F0;font-size:12px.spring1color:#F00;font-size:16px;font-weight:bold;text-decoration:underline;p.s3text-indent:2em;春天春季，地球的北半球開(kāi)始傾向太陽(yáng)，受到越來(lái)越多的太陽(yáng)光直射，因而氣溫開(kāi)始升高。隨著冰雪消融，河流水位上漲。春季植物開(kāi)始發(fā)芽生長(zhǎng)，許多鮮花開(kāi)放。冬眠的動(dòng)物蘇醒，許多以卵過(guò)冬的動(dòng)物孵化，鳥(niǎo)類(lèi)開(kāi)始遷徙，離開(kāi)越冬地想繁殖地進(jìn)發(fā)。許多動(dòng)物在這段時(shí)里了發(fā)情，因而中國(guó)也將春季稱為“萬(wàn)物復(fù)蘇”的季節(jié)。春季氣溫和生物界的變化對(duì)人的心理和生理也有影響。截圖：5、使用樣式表定義表格： （1）首先使用記事本建立一個(gè)基本的HTML文件, 輸入如下代碼（可復(fù)制）： 保存文件為：html格式： 用戶信息 用戶信息 請(qǐng)輸入姓名: 請(qǐng)輸入密碼: 請(qǐng)確認(rèn)密碼: 愛(ài)好: 足球 上網(wǎng) 音樂(lè) 看書(shū) 性別: 男 女 所在省份 北京市 江蘇省 （參考下面提供的樣式表對(duì)上面的用戶信息進(jìn)行修飾）form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;select width: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;.mystyle1 text-align:center; fong-size:25pt; font-family:隸書(shū); background-color:gray; .mystyle2 text-align:center; fong-size:9pt; color:#000033; background-color:#ffcccc; font-family:隸書(shū); border:#ccccff; border-style:groove; 打開(kāi)瀏覽器查看效果。 （姓名文本框要求輸入自己的真實(shí)姓名） 代碼： 用戶信息 form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color:#CFF;border: 1px solid #00008B;select width: 80px;color:#0FC;background-color:#63F;border: 1px solid #00008B;.mystyle1 text-align:center; fong-size:25pt; font-family:隸書(shū); background-color:gray; .mystyle2 text-align:center; fong-size:9