任务二：零基础HTML及CSS编码（一）

任务目的：

• 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
  • 掌握常用HTML标签的含义、用法
  • 能够基于设计稿来合理规划HTML文档结构
  • 理解语义化，合理地使用HTML标签来构建页面
• 掌握基本的CSS编码，包括以下但不限于：
  • 了解CSS的定义、概念、发展简史
  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

 任务描述：

    基于第一个任务“零基础HTML编码”的代码，在步骤一的代码基础上增加CSS样式代码的编写。

任务注意事项：

• 只需要完成HTML、CSS代码编写，不需要写JavaScript
• 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
• 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
• HTML及CSS代码结构清晰、规范

 总结：

一、相关CSS属性

1、表格属性

    border-collapse属性：设置是表格边框是否被合并为单一的边框，还是像在标准的HTML中那样分开显示。属性值包括：

属性	值
border-collapse	separate：边框分开。不会忽略border-spacing属性
	collapse:如果可能，边框会合并成一个单一的边框。
	initial:设成默认值：separate
	inherit：c从父元素继承

     border-spacing属性：指定单元格边界之间的距离（仅用于“分离边框模式”）。在指定的两个长度中，第一个是水平间隔，第二个是垂直间隔。

     empty-cells属性：设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

table 
   {
      border-collapse:separate;
      border-spacing:10px 50px;      
      empty-cells:hidden;
    }

属性	值	描述
empty-cells	hide	不在空单元格周围绘制边框
	show	在空单元格周围绘制边框。默认。
	inherit	从父元素继承

    cpation-side属性：指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。属性值包括：top（默认）、bottom、inherit。

    table-layout属性：用来显示表格单元、行、列的算法规则。

属性	值	描述
table-layout	automatic	默认。列宽度由列单元格中没有折行的最宽的内容设定。速度较慢。
	fixed	列宽由表格宽度、列宽度、表格边框宽度、单元格间距设定，与单元格内容无关。速度快，但不够灵活。
	inherit	从父元素继承

2、text-indent属性

    指定段落中第一行的缩进值。

    可以使用em。em与元素字体大小有关，自适应字体大小。1em指当前字体尺寸的1倍。2em是2倍。

3、列表属性：

    list-style属性：列表最常见的属性包括列表标志类型（list-style-type）、图像列表标志（list-style-img）、列表标志位置（list-style-position）。

                        利用list-style属性可以使用一个语句设置所有列表属性。其值可以按任何顺序列出，而且都可以忽略。未设置的值，则使用属性的默认值。

li {list-style:url(example.gif) square inside}

    list-style-type属性：设置列表标记的类型。可能的值如下（列举几个）：

属性	值	描述
list-style-type	none	无标记
	disc	默认。标记是实心圆
	circle	标记是空心圆
	square	标记是实心方块
	decimal	标记是数字
	decimal-leading-zero	0开头的数字标记（01,02,03，等）
	lower-roman	小写罗马数字
	upper-roman	大写罗马数字
	lower-alpha	小写英文字母
	upper-alpha	大写英文字母

    list-style-position属性：设置在何处放置列表项标记。

属性	值	描述
list-tyle-position	inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐
	outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
	inherit	从父元素继承

    list-style-img属性：使用图像来替换列表项目的标记。

属性	值	描述
list-style-img	URL	图像的路径
	none	默认
	ieherit	从父元素继承

4、box-shadow属性

    box-shadow属性向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。

    CSS语法：box-shadow:none|h-shadow v-shadow blur spread color |inset|initial|inherit;

属性	值	描述
box-shadow	h-shadow	必需。水平阴影的位置。允许负值。
	v-shadow	必需。垂直阴影的位置。允许负值。
	blur	可选。模糊距离。
	spread	可选。阴影的尺寸。
	color	可选。阴影的颜色。
	inset	可选。将外部阴影（outset）改为内部阴影。

二、CSS选择器

   

选择器类型		选择器符号
上下文选择器	标签选择器	h1 {fone-size:16px;} p {color:red;}
	后代选择器	article p {font-size:12px;}
	子选择器	article {font-size:12px;}
	相邻兄弟选择器 （p标签必须紧跟在h2标签后面）	h2+p {font-size:12px;}
	一般同胞选择器	h2~p {font-size:12px;}
	通用选择器	* {color:green;}
id和类选择器	类选择器	.类名 {font-style:italic;}
	标签带类名选择器	标签名.类名 {color:red;}
	多类选择器 （两个类名之间无空格，有空格就成“祖先/后代”关系）	.类名.类名 {font-size}
	id选择器	#id名 {font-style:italic}
属性选择器	属性名选择器	例如：img[title] {border:2px solod blue;}
	属性值选择器	例如：img[title="red flower"] {border:4px solid green;}

    关于选择器的详细知识，请参考：CSS选择器详解。

三、伪类（Pseudo-classes）和伪元素（Pseudo-elements）

1、伪类

CSS的伪类用于设置元素的特殊状态，用于当已有元素处于某个状态时，为其添加对应的样式，这个状态时根据用户行为而动态变化的。

CSS语法：

selector:pseudo-class {

      property:calue;

}

CSS伪类：

（1）链接伪类

             a:link  选择所有未访问过的链接；

             a:visited  选择已被点击过的链接；

             a:hover    鼠标悬停在链接上；

             a:active    链接正在被点击（鼠标按下还没有释放）

（2）input:checked  选择被选中的<input>元素；

（3）input:focus      选择获得焦点的<input>元素；

（4）input:disabled  选择无效的<input>元素（无效input元素不会被提交）；

（5）input:enabled   选择已启用的<input>元素；

（6）input:invalid     选择所有无效值的<input>元素；

（7）input:in-rang    选择<input>元素的值在指定范围内的元素；

（8）input:out-of-range  选择值在指定范围之外的<input>元素；

（9）input：read-only   选择只读属性的<input>元素；

（10）input:read-write  选择不是只读属性的<input>元素；

（11）input:optional   选择没有“必须”属性的<input>元素；

（12）input:required   选择有一个“required”属性的<input>元素；

（13）input:valid       选择所有有valid值的<input>元素；

（14）p:empty          选择所有没有子元素的<p>元素；

（15）p:first-child      选择所有是其父元素第一个子元素的<p>元素；

（16）p:nth-child(2)   选择每一个是其父元素第二个子元素的<p>。也可用odd和even表示奇数和偶数；

（17）p:first-of-type   选择所有是其父元素第一个<p>子元素的<p>元素；

（18）p:nth-of-type(2)  选择每一个是其父元素第二个<p>元素的<p>元素

（19）p:lasst-child     选择是其父元素最后一个子元素的<p>元素；

（20）p:nth-last-child(2)      选择每一个从后往前数是其父元素第二个子元素的<p>元素；  

（21）p:last-of-type   选择所有是其父元素最后一个<p>元素的<p>元素；

（22）p:nth-last-of-type(2)   选择每一个从后往前数是其父元素第二个<p>子元素的<p>元素；

         last-child与last-of-type的区别，见： CSS3新增选择器之last-child与last-0f type的区别。

（23）tr:nth-child(odd)   选择表格中的奇数行。其他<li>等元素类推；

（24）tr:nth-child()even  选择表格中的偶数行。

 2、伪元素

CSS的伪元素用于设置部分元素的样式，用于创建一些不在文档树中的元素，并未其添加样式。

CSS语法：

selector::pseudo-element{

    property:value;

}

（1）p::after   在每一个<p>元素后插入内容；

（2）p::before  在每一个<p>元素前插入内容

（3）p::first-letter 选择每一个<p>元素的第一个字母。只能用于块级元素；

（4）p::first-line   选择每一个<p>元素的第一行；

四、提交作业

代码地址：https://github.com/zhoujie1986/IFE/tree/master/task2