问答作业
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
