實驗2朱ㄓ頲ss.doc

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