任务目的:
- 针对设计稿样式进行合理的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