17-18日作業(yè)

問(wèn)答作業(yè)

1.什么是CSS語(yǔ)法

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

2.列舉常見(jiàn)的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選擇器：
　　我們通常給頁(yè)面元素定義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è)方法主要用來(lái)定義層和那些比較復(fù)雜，有多個(gè)“唯一后代”的元素宠叼。

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

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

在頁(yè)面中，用class="類別名"的方法調(diào)用：<spanclass="da1">14px大小的字體</span>這個(gè)方法比較簡(jiǎn)單靈活冒冬，可以隨時(shí)根據(jù)頁(yè)面需要新建和刪除伸蚯。但需要避免多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文件體積。

后代選擇器：
　　后代選擇器也叫派生選擇器榨馁『┰裕可以使用后代選擇器給一個(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屬性如何簡(jiǎn)寫(xiě)

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

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

font-size: 20px （文字大惺蛱亍）
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)簽的作用有哪些

可以用來(lái)跳轉(zhuǎn)頁(yè)面锯蛀，下載一些壓縮包灭衷，還有具有錨點(diǎn)的作用。

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

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

8.什么是盒模型旁涤？盒模型包括什么翔曲？

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

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

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

Paste_Image.png

10.什么是margin疊加注祖？什么是margin傳遞猾蒂？

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

11.列舉常見(jiàn)的語(yǔ)義化標(biāo)簽

<hn></hn>：h1~h6分級(jí)標(biāo)題肚菠，用于創(chuàng)建頁(yè)面信息的層級(jí)關(guān)系。
<header></header>：頁(yè)眉通常包括網(wǎng)站標(biāo)志罩缴、主導(dǎo)航蚊逢、全站鏈接以及搜索框。
<nav></nav>：標(biāo)記導(dǎo)航箫章，僅對(duì)文檔中重要的鏈接群使用烙荷。
<main></main>：頁(yè)面主要內(nèi)容，一個(gè)頁(yè)面只能使用一次炉抒。如果是web應(yīng)用奢讨，則包圍其主要功能稚叹。
<article></article>：包含像報(bào)紙一樣的內(nèi)容= =||是這么理解的焰薄，表示文檔、頁(yè)面扒袖、應(yīng)用或一個(gè)獨(dú)立的容器塞茅。
<section></section>：具有相似主題的一組內(nèi)容，比如網(wǎng)站的主頁(yè)可以分成介紹季率、新聞條目野瘦、聯(lián)系信息等條塊。
<aside></aside>：指定附注欄，包括引述鞭光、側(cè)欄吏廉、指向文章的一組鏈接、廣告惰许、友情鏈接席覆、相關(guān)產(chǎn)品列表等。
<footer></footer>：頁(yè)腳汹买，只有當(dāng)父級(jí)是body時(shí)佩伤，才是整個(gè)頁(yè)面的頁(yè)腳。
<small></small>：指定細(xì)則晦毙，輸入免責(zé)聲明生巡、注解、署名见妒、版權(quán)孤荣。
<strong></strong>：表示內(nèi)容重要性。
<em></em>：標(biāo)記內(nèi)容著重點(diǎn)（大量用于提升段落文本語(yǔ)義）须揣。
<mark></mark>：突出顯示文本（yellow）垃环，提醒讀者。
<figure></figure>：創(chuàng)建圖（默認(rèn)有40px左右margin）返敬。
<figcaption></figcaption>：figure的標(biāo)題遂庄，必須是figure內(nèi)嵌的第一個(gè)或者最后一個(gè)元素。
<cite></cite>：指明引用或者參考劲赠，如圖書(shū)的標(biāo)題涛目，歌曲、電影凛澎、等的名稱霹肝，演唱會(huì)、音樂(lè)會(huì)塑煎、規(guī)范沫换、報(bào)紙、或法律文件等最铁。
<blockquoto></blockquoto>：引述文本讯赏，默認(rèn)新的一行顯示。
<q></q>：段的引述（跨瀏覽器問(wèn)題冷尉，盡量避免使用）
<time></time>：標(biāo)記時(shí)間漱挎。datetime屬性遵循特定格式，如果忽略此屬性雀哨，文本內(nèi)容必須是合法的日期或者時(shí)間格式磕谅。

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

塊級(jí)元素用來(lái)搭建網(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……

塊元素可以包含內(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ò)
有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素季春，不能再包含塊級(jí)元素，這幾個(gè)特殊的標(biāo)簽是:h1-h6消返、p载弄、dt。
<p><ol><li></li></ol></p> —— 錯(cuò)
<p> <div></div></p>—— 錯(cuò)
li內(nèi)可以包含div標(biāo)簽/父級(jí)ul或者是ol
li和div標(biāo)簽都是裝載內(nèi)容的容器撵颊，地位平等宇攻，沒(méi)有級(jí)別之分。
塊級(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ù)是未來(lái)生存的一塊敲門磚逞刷，掌握一門技術(shù)是未來(lái)生存的一塊敲門磚，掌握一門技術(shù)是未來(lái)生存的一塊敲門磚</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