零基础HTML及CSS编码总结

任务目的

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

任务描述

基于第一个任务“零基础HTML编码”的代码，参考，在步骤一的代码基础上增加CSS样式代码的编写，示例图：

任务注意事项

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

在线学习参考资料

零基础HTML及CSS编码（一）总结

一、相关CSS属性

1、 border-collapse属性

border-collapse属性设置表格的边框是折叠成一个还是像HTML标准样式一样分开显示。

属性值：

separate：边框分开。

collapse：在可能情况下边框折叠成一个单一的边框。

initial：设成默认值：separate。

inherit：从父元素继承。

2、 text-indent属性

text-indent属性指定在一个段落当中第一行的缩进值。

可以使用em。em与元素字体大小（font-size）有关，自适应字体大小，1em含义是当前字体尺寸的1倍，2em是当前字体尺寸的2倍。

例如：字体大小为12px，2em为24px。

3、 list-style属性

list-style属性可使用一个语句设置所有列表属性，可以设置的属性按顺序为：list-style-type, list-style-position, list-style-image，如果设置时这三个属性当中的某个属性未设置，则使用属性的默认值。

css 语法：

list-style: list-style-type list-style-position list-style-image|initial|inherit;

注意：HTML中可使用<ul>标签的type属性设置列表项目符号的类型，有：none（无），disc（实心圆，默认值），circle(空心圆)，square（实心方块）。

4、 box-shadow属性

box-shadow属性为一个元素添加一个或多个阴影。

css语法：

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

属性值：

none：无阴影，默认值。

h-shadow：必须填写。阴影的水平位置，可以为负值。

v-shadow：必须填写。阴影的垂直位置，可以为负值。

blur：可选，模糊距离。

spread：可选，阴影的尺寸，指阴影外延出去的总长度，可以为负值。

color：可选，阴影的颜色。

inset：可选，将阴影从外部阴影(outset)改为内部阴影。

initial：这为默认值。

inherit：继承父元素的属性值。

5、 position属性

position属性指定一个元素使用的位置的方法。

css语法：

属性值：

static：默认值。元素以原文档流的方式呈现。

absolute：元素位置与它的第一个非static元素的位置相关，不在占用原文档流的位置。

fixed：元素位置与浏览器窗口相关。

relative：元素位置与它的正常位置相关，“left:20px;”表示在元素左侧位置上增加20像素。

initial：设为默认值。

inherit：继承它的父元素。

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

1、伪类

CSS的伪类用于设置元素的特殊状态，用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如，它可以用于：当鼠标在元素上时它的样式，访问过及未访问过超链接样式的不同，当元素获得鼠标焦点时的样式。

css语法：

selector:pseudo-class {
property:value;
}

CSS伪类：

（1） a:active 选择活跃链接。

（2） input:checked 选择每一个被选中的<input>元素。

（3） input:disabled 选择每一个无效的<input>元素。

（4） p:empty 选择每一个没有子元素的<p>元素。

（5） input:enabled 选择每一个已启用的<input>元素。

（6） p:first-child 选择每一个是其父元素第一个子元素的<p>元素。

（7） p:first-of-type 选择每一个使其父元素第一个<p>子元素的<p>元素。

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

（9） a:hover 选择鼠标在其上面的链接。

（10） input:in-range 选择<input>元素的值在制定范围的<input>元素。

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

（12） p:lang(it) 选择所有以lang属性开头的<p>元素。

（13） p:last-child 选择是其父元素最后一个子元素的<p>元素。

（14） p:last-of-type 选择所以是其父元素最后一个<p>元素的<p>元素。

（15） a:link 选择所以未访问过的链接。

（16） :not(p) 选择所有不是<p>元素的元素。

（17） p:nth-child(2) 选择每一个是其父元素第二个子元素的<p>元素。

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

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

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

（21） p:only-child 选择每一个是其父元素唯一元素的<p>元素。

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

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

（24） input:read-only 选择只读属性的<input>元素。

（25） input:read-write 选择不是只读的<input>元素。

（26） input：required 选择有一个“required”属性的<input>元素。

（27） root 选择文档的根元素。

（28） #news:target 选择目前活跃的#news元素。

（29） Input:valid 选择所有有valid值的<input>元素。

（30） a:visited 选择所有被访问过的链接。

2、 伪元素

CSS的伪元素用于设置部分元素的样式，用于创建一些不在文档树中的元素，并为其添加样式。。例如：设置一个元素第一行或第一个字母的样式，在一个元素的内容前或后插入内容。

css语法：

selector::pseudo-element {
property:value;
}

注意：CSS3中，伪元素用“：：”，伪类用“：”。

CSS伪元素：

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

（2） p::before：在每一个<p>元素后插入些内容。

（3） p::first-letter：选择每一个<p>元素的第一个字母。

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

（5） p::selection：选择用户已选择的元素的一部分。

三、遇到问题：如何修改placeholder属性

Placeholder属性指定一个简短的提示，说明输入的期望值（比如期望值或简短描述）,在用户输入值前显示。Placeholder属性可用于以下<input>类型：text，search，url，tel，email，password.

Placeholder内容默认为灰色，可使用::placeholder伪元素修改其样式，::placeholder伪元素代表元素的placeholder文本，用它可以修改placeholder文本的样式。

placeholder伪元素不是标准的微元素：

::-webkit-input-placeholder

::-moz-placeholder

:-ms-input-placeholder

四、已提交作业

代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/tree/master/任务二：零基础HTML及CSS编码（一）

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务二：零基础HTML及CSS编码（一）/index.html