問答作業(yè)

1.什么是CSS語法

 <div id="aaa"> </div>  
<style> #aaa{/* 具體屬性 */}</style>

2.列舉常見的CSS選擇器

• 標(biāo)簽選擇器：
  　　顧名思議，標(biāo)簽選擇器是直接將HTML標(biāo)簽作為選擇器，可以是p、h1、dl、strong等HTML標(biāo)簽。如：

p{font:12px;}
em{color:blue;}
dl{float:left;margin-top:10px;} 

• id選擇器：
  　　我們通常給頁面元素定義id。例如定義一個(gè)層<divid="menubar"></div>然后在樣式表里這樣定義：

#menubar{
margin:0auto;
background:#ccc;
color:#c00;
} 

其中"menubar"是你自己定義的id名稱。注意在前面加"#"號(hào)。
　　id選擇器也同樣支持后代選擇器，例如：#menubarp{text-align:center;line-height:20px;;}這個(gè)方法主要用來定義層和那些比較復(fù)雜，有多個(gè)“唯一后代”的元素。

• 類（class）選擇器：
  　　在CSS里用一個(gè)點(diǎn)開頭表示類別選擇器定義，例如：

.da1{
color:#f60;
font-size:14px;
} 

在頁面中，用class="類別名"的方法調(diào)用：<spanclass="da1">14px大小的字體</span>這個(gè)方法比較簡單靈活，可以隨時(shí)根據(jù)頁面需要新建和刪除。但需要避免多class綜合癥。

• 群組選擇器：
  　　當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。如：

p,td,li{
line-height:20px;
color:#c00;
}
#mainp,#siderspan{
color:#000;
line-height:26px;
}
.www_52css_com,#mainpspan{
color:#f60;
}
.text1h1,#siderh3,.art_titleh2{
font-weight:100;
}

使用組群選擇器，將會(huì)大大的減化CSS代碼，將具有多個(gè)相同屬性的元素，合并群組進(jìn)行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率與CSS文件體積。

• 后代選擇器：
  　　后代選擇器也叫派生選擇器?？梢允褂煤蟠x擇器給一個(gè)元素里的子元素定義樣式，例如這樣：

listrong{
font-style:italic;
font-weight:800;
color:#f00;
}
#mainp{
color:#000;
line-height:26px;
}
#sider.conspan{
color:#000;
line-height:26px;
}
.www_52css_compspan{
color:#f60;
}
#siderulli.subnav1{
margin-top:5px;
}

3.background屬性如何簡寫

background:url(test.png)/* 導(dǎo)入背景圖片 */ color /* 背景圖片的顏色 */ no-repeat /* 是否平鋪 */ 100px 30px /* 圖片的定位 */;

4.文本的屬性有哪些？請(qǐng)寫出font的復(fù)合式寫法？

font-size: 20px （文字大?。?br> font-weight:bold 加粗 normal 正常 （文字是否加粗）
font-style: italic 斜體 normal 正常 （文字樣式）
line-height: 30px （文字行高）
font-family: "微軟雅黑" （文字字體）

復(fù)合:font: font-weight font-style font-size/line-height font-family;

5.text-indent有什么作用

規(guī)定文本塊中首行文本的縮進(jìn)。比如：text-indent:1px 代表首行縮進(jìn)1px

6.超鏈接a標(biāo)簽的作用有哪些

可以用來跳轉(zhuǎn)頁面，下載一些壓縮包，還有具有錨點(diǎn)的作用。

7.a標(biāo)簽?zāi)J(rèn)樣式是什么

a< href=" "> div1 </a>

8.什么是盒模型？盒模型包括什么？

網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子作一個(gè)比喻來理解，所以叫它盒子模式。

9.padding和margin的區(qū)別

padding是內(nèi)填充
margin是外邊距

Paste_Image.png

10.什么是margin疊加？什么是margin傳遞？

margin疊加：相鄰兩個(gè)元素的上下margin疊加在一起。
margin傳遞：子元素的上下margin會(huì)傳遞給父級(jí)。

11.列舉常見的語義化標(biāo)簽

<hn></hn>：h1~h6分級(jí)標(biāo)題，用于創(chuàng)建頁面信息的層級(jí)關(guān)系。
<header></header>：頁眉通常包括網(wǎng)站標(biāo)志、主導(dǎo)航、全站鏈接以及搜索框。
<nav></nav>：標(biāo)記導(dǎo)航，僅對(duì)文檔中重要的鏈接群使用。
<main></main>：頁面主要內(nèi)容，一個(gè)頁面只能使用一次。如果是web應(yīng)用，則包圍其主要功能。
<article></article>：包含像報(bào)紙一樣的內(nèi)容= =||是這么理解的，表示文檔、頁面、應(yīng)用或一個(gè)獨(dú)立的容器。
<section></section>：具有相似主題的一組內(nèi)容，比如網(wǎng)站的主頁可以分成介紹、新聞條目、聯(lián)系信息等條塊。
<aside></aside>：指定附注欄，包括引述、側(cè)欄、指向文章的一組鏈接、廣告、友情鏈接、相關(guān)產(chǎn)品列表等。
<footer></footer>：頁腳，只有當(dāng)父級(jí)是body時(shí)，才是整個(gè)頁面的頁腳。
<small></small>：指定細(xì)則，輸入免責(zé)聲明、注解、署名、版權(quán)。
<strong></strong>：表示內(nèi)容重要性。
<em></em>：標(biāo)記內(nèi)容著重點(diǎn)（大量用于提升段落文本語義）。
<mark></mark>：突出顯示文本（yellow），提醒讀者。
<figure></figure>：創(chuàng)建圖（默認(rèn)有40px左右margin）。
<figcaption></figcaption>：figure的標(biāo)題，必須是figure內(nèi)嵌的第一個(gè)或者最后一個(gè)元素。
<cite></cite>：指明引用或者參考，如圖書的標(biāo)題，歌曲、電影、等的名稱，演唱會(huì)、音樂會(huì)、規(guī)范、報(bào)紙、或法律文件等。
<blockquoto></blockquoto>：引述文本，默認(rèn)新的一行顯示。
<q></q>：段的引述（跨瀏覽器問題，盡量避免使用）
<time></time>：標(biāo)記時(shí)間。datetime屬性遵循特定格式，如果忽略此屬性，文本內(nèi)容必須是合法的日期或者時(shí)間格式。

12.常見的塊元素和內(nèi)嵌元素有哪些？簡要說明一下它們的區(qū)別？

塊級(jí)元素 用來搭建網(wǎng)站架構(gòu)、布局、承載內(nèi)容，如：div、ul、li、dl、dt、dd、h1-h6、p、address……
內(nèi)聯(lián)元素 用在文本之中的某一行的修飾，如：a、span、strong、sub、sup、img……

1. 塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素：
   <div><h1></h1><p></p></div> —— 對(duì)
   <a href=”#”><span></span></a>—— 對(duì)
   <span><div></div></span> —— 錯(cuò)
2. 有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素，不能再包含塊級(jí)元素，這幾個(gè)特殊的標(biāo)簽是:h1-h6、p、dt。
   <p><ol><li></li></ol></p> —— 錯(cuò)
   <p> <div></div></p>—— 錯(cuò)
3. li內(nèi)可以包含div標(biāo)簽/父級(jí)ul或者是ol
   li和div標(biāo)簽都是裝載內(nèi)容的容器，地位平等，沒有級(jí)別之分。
4. 塊級(jí)元素與塊級(jí)元素并列、內(nèi)嵌元素與內(nèi)嵌元素并列：
   <div><h2></h2><p></p></div> —— 對(duì)
   <div><a href=”#”></a><span></span></div> —— 對(duì)
   <div><h2></h2><span></span></div> —— 錯(cuò)

編程作業(yè)

test1代碼實(shí)現(xiàn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test1</title>
<style>
.body{
width:0px;
height:0px;
border:100px solid red;
border-bottom-color:white;
}

</style>
</head>

<body>

<div class="body"></div>
</body>
</html>

結(jié)果：

jieguo.png

test2代碼實(shí)現(xiàn)

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test2</title>
<style>
.box{width:512px;
    border:1px solid #000000;
    padding:0 23px;
    }
        .title{width:512px;
    height:43px;
    font:bold 23px/43px "微軟雅黑";
    }
    .title2{width:512px;
    height:56px;
    font:bold 20px/56px "微軟雅黑";}
    .content1{width:512px;
    height:51px;
    font:12px/26px "微軟雅黑";
    border-bottom:1px dotted #000000;
    text-indent:2em;
    padding-bottom:28px;}
    .content2{width:512px;
    height:162px;
    font:bold 16px/36px "微軟雅黑";
    padding-top:20px;
    background:url(fuhao.png) no-repeat; /* 那個(gè)符號(hào)用圖片代替了 */
    }
</style>

</head>


<body>
<div class="box">
        <div class="title">動(dòng)態(tài)新聞 </div>
        <div class="title2">掌握一門技術(shù)的重要性</div>  
        <div class="content1">掌握一門技術(shù)是未來生存的一塊敲門磚，掌握一門技術(shù)是未來生存的一塊敲門磚，掌握一門技術(shù)是未來生存的一塊敲門磚</div> 
        <div class="content2">    走進(jìn)民企觀察學(xué)習(xí)與民企面對(duì)面<br>    走進(jìn)民企觀察學(xué)習(xí)與民企面對(duì)面<br>    走進(jìn)民企觀察學(xué)習(xí)與民企面對(duì)面<br>    走進(jìn)民企觀察學(xué)習(xí)與民企面對(duì)面<br></div>  
    </div> /* 空格是shift + ctrl + 空格鍵 */
</div>
</body>
</html>

根據(jù)字體不同分為4個(gè)塊，然后依次對(duì)這4個(gè)塊進(jìn)行操作。

G({L4C09WWPP_}4T$EDF{`O.png

結(jié)果：

jieguo2.png

百度云盤：鏈接：http://pan.baidu.com/s/1i5cA9wD 密碼：4pzg