問答作業
1.什么是CSS語法
<div id="aaa"> </div>
<style> #aaa{/* 具體屬性 */}</style>
2.列舉常見的CSS選擇器
- 標簽選擇器：
顧名思議，標簽選擇器是直接將HTML標簽作為選擇器，可以是p、h1、dl、strong等HTML標簽。如：
p{font:12px;}
em{color:blue;}
dl{float:left;margin-top:10px;}
- id選擇器：
我們通常給頁面元素定義id。例如定義一個層<divid="menubar"></div>然后在樣式表里這樣定義：
#menubar{
margin:0auto;
background:#ccc;
color:#c00;
}
其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。
id選擇器也同樣支持后代選擇器，例如：#menubarp{text-align:center;line-height:20px;;}這個方法主要用來定義層和那些比較復雜，有多個“唯一后代”的元素。
- 類（class）選擇器：
在CSS里用一個點開頭表示類別選擇器定義，例如：
.da1{
color:#f60;
font-size:14px;
}
在頁面中，用class="類別名"的方法調用：<spanclass="da1">14px大小的字體</span>這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。但需要避免多class綜合癥。
- 群組選擇器：
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔。如：
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;
}
使用組群選擇器，將會大大的減化CSS代碼，將具有多個相同屬性的元素，合并群組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率與CSS文件體積。
- 后代選擇器：
后代選擇器也叫派生選擇器。可以使用后代選擇器給一個元素里的子元素定義樣式，例如這樣：
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)/* 導入背景圖片 */ color /* 背景圖片的顏色 */ no-repeat /* 是否平鋪 */ 100px 30px /* 圖片的定位 */;
4.文本的屬性有哪些？請寫出font的復合式寫法？
font-size: 20px （文字大小）
font-weight:bold 加粗 normal 正常 （文字是否加粗）
font-style: italic 斜體 normal 正常 （文字樣式）
line-height: 30px （文字行高）
font-family: "微軟雅黑" （文字字體）
復合:font: font-weight font-style font-size/line-height font-family;
5.text-indent有什么作用
規定文本塊中首行文本的縮進。比如：text-indent:1px 代表首行縮進1px
6.超鏈接a標簽的作用有哪些
可以用來跳轉頁面，下載一些壓縮包，還有具有錨點的作用。
7.a標簽默認樣式是什么
a< href=" "> div1 </a>
8.什么是盒模型？盒模型包括什么？
網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。
9.padding和margin的區別
padding是內填充
margin是外邊距
10.什么是margin疊加？什么是margin傳遞？
margin疊加：相鄰兩個元素的上下margin疊加在一起。
margin傳遞：子元素的上下margin會傳遞給父級。
11.列舉常見的語義化標簽
<hn></hn>：h1~h6分級標題，用于創建頁面信息的層級關系。
<header></header>：頁眉通常包括網站標志、主導航、全站鏈接以及搜索框。
<nav></nav>：標記導航，僅對文檔中重要的鏈接群使用。
<main></main>：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。
<article></article>：包含像報紙一樣的內容= =||是這么理解的，表示文檔、頁面、應用或一個獨立的容器。
<section></section>：具有相似主題的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯系信息等條塊。
<aside></aside>：指定附注欄，包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。
<footer></footer>：頁腳，只有當父級是body時，才是整個頁面的頁腳。
<small></small>：指定細則，輸入免責聲明、注解、署名、版權。
<strong></strong>：表示內容重要性。
<em></em>：標記內容著重點（大量用于提升段落文本語義）。
<mark></mark>：突出顯示文本（yellow），提醒讀者。
<figure></figure>：創建圖（默認有40px左右margin）。
<figcaption></figcaption>：figure的標題，必須是figure內嵌的第一個或者最后一個元素。
<cite></cite>：指明引用或者參考，如圖書的標題，歌曲、電影、等的名稱，演唱會、音樂會、規范、報紙、或法律文件等。
<blockquoto></blockquoto>：引述文本，默認新的一行顯示。
<q></q>：段的引述（跨瀏覽器問題，盡量避免使用）
<time></time>：標記時間。datetime屬性遵循特定格式，如果忽略此屬性，文本內容必須是合法的日期或者時間格式。
12.常見的塊元素和內嵌元素有哪些？簡要說明一下它們的區別？
塊級元素 用來搭建網站架構、布局、承載內容，如：div、ul、li、dl、dt、dd、h1-h6、p、address……
內聯元素 用在文本之中的某一行的修飾，如：a、span、strong、sub、sup、img……
- 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素：
<div><h1></h1><p></p></div>—— 對
<a href=”#”><span></span></a>—— 對
<span><div></div></span>—— 錯 - 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是:h1-h6、p、dt。
<p><ol><li></li></ol></p>—— 錯
<p> <div></div></p>—— 錯 - li內可以包含div標簽/父級ul或者是ol
li和div標簽都是裝載內容的容器，地位平等，沒有級別之分。 - 塊級元素與塊級元素并列、內嵌元素與內嵌元素并列：
<div><h2></h2><p></p></div>—— 對
<div><a href=”#”></a><span></span></div>—— 對
<div><h2></h2><span></span></div>—— 錯
編程作業
test1代碼實現
<!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>
結果：
test2代碼實現
<!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; /* 那個符號用圖片代替了 */
}
</style>
</head>
<body>
<div class="box">
<div class="title">動態新聞 </div>
<div class="title2">掌握一門技術的重要性</div>
<div class="content1">掌握一門技術是未來生存的一塊敲門磚，掌握一門技術是未來生存的一塊敲門磚，掌握一門技術是未來生存的一塊敲門磚</div>
<div class="content2"> 走進民企觀察學習與民企面對面<br> 走進民企觀察學習與民企面對面<br> 走進民企觀察學習與民企面對面<br> 走進民企觀察學習與民企面對面<br></div>
</div> /* 空格是shift + ctrl + 空格鍵 */
</div>
</body>
</html>
根據字體不同分為4個塊，然后依次對這4個塊進行操作。
結果：
百度云盤：鏈接：http://pan.baidu.com/s/1i5cA9wD 密碼：4pzg
