制作列表、表格及表单

制作列表、表格及表单

编辑网页文本

1、span

---

span标签可以为p标签中的部分文字添加样式，且不会改变文字的显示方向。

2、字体类型

属性名	含义	举例
font-family	设置字体类型	font-family:”隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px “宋体”;

3、字体粗细

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bloder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体，400等同于normal，700等同于bold

字体风格---->字体粗细---->字体大小---->字体类型

排版网页文本

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置文本水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
vertical-align	设置文本垂直对齐方式	vertical-align:middle;
text-shadow	设置文本阴影	text-shadow:blue 10px 10px 2px;

1、水平对齐方式

值	说明
left	把文本排列到左边，默认值，由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

2、文本装饰

值	说明
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

设置超链接和列表样式

超链接伪类

伪类名称	含义	示例
a:link	单击访问前的超链接样式	a:link{color:#9EF5F9;}
a:cisited	单击访问后的超链接样式	a:cisited{color:#9EF5F9;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#9EF5F9;}
a:active	单击未释放的超链接样式	a:active{color:#9EF5F9;}

背景样式

认识div标签

背景属性

（1）背景颜色：在CSS中，使用background-color属性设置字体、div、列表等网页元素的背景颜色。它有一个特殊的值————transparent，即透明，是background-color属性的默认值。

（2）背景图像：背景重复方式（background-repeat）和背景定位（background-position）

• 背景图像引入：使用background-image属性设置，它有一个特殊值：none，表示不显示背景图像
• 背景重复方式：使用background-repeat属性设置：①repeat：沿水平线和垂直两个方向平②no-repeat：不平铺，即背景图像只显示一次③repeat-x：只沿水平方向平铺④repeat-y：只沿垂直方向平铺

背景尺寸

backround-size

①auto：使背景图保持原样

②percentage：可以使用百分比的值

③cover：背景图片放大填充满整个

④contain：对背景图片进行了宽高比例的缩放

使用列表展示数据

列表及其应用

无序列表

<ul>
    <li>第1项</li>
    <li>第2项</li>
</ul>

有序列表

<ol>
    <li>第1项</li>
    <li>第2项</li>
</ol>

无序列表

<dl>
    <dt>标题一</dt>
    <dd>第1项</dd>
    <dd>第2项</dd>
    <dt>标题二</dt>
    <dd>第1项</dd>
</dl>