本教程案例在线演示
有路网 PC 端
有路网挪动端
收费配套视频教程
收费配套视频教程
教程配套源码资源
教程配套源码资源
字体款式
属性名 含意 举例
font-family 设置字体类型 font-family:” 隶书 ”;
font-size 设置字体大小 font-size:12px;
font-style 设置字体格调 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 设置所有字体属性 font:italic bold 36px “ 宋体 ”;
font-family 属性
.p1{font-family: "隶书";}
.p2{font-family: "黑体";}
.p3{font-family: "Arial Black";}
font-size 属性
单位：px（像素）
.p1{font-size: 10;}
.p2{font-size: 20px;}
.p3{font-size: 30px;}
font-style 属性
normal、italic 和 oblique
字体的粗细
font-weight 属性
normal 默认值，定义规范的字体。
bold 粗体字体。
font 属性
字体属性的程序：字体格调→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
文本款式文本属性
属性 含意 举例
color 设置文本色彩 color:#00C;
text-align 设置元素程度对齐形式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装璜 text-decoration:underline;
文本色彩
color 属性
十六进制办法示意色彩
color:#FFFFFF;
color:#000000;
color:FF0000;
color:#A983D8;
color:#95F141;
color:#339966;--- color:#396;
color:#EEFF66;--- color:#EF6; 6 位色彩值相邻数字两两雷同时，可两两缩写为 1 位
程度对齐形式
text-align 属性
值 阐明
left 把文本排列到右边。
right 把文本排列到左边
center 把文本排列到两头
首行缩进
text-indent：px
行高
line-height：px
文本装璜
text-decoration 属性
值 阐明
none 默认值，定义的规范文本。
underline 设置文本的下划线。
overline 设置文本的上划线。
line-through 设置文本的删除线。
垂直对齐形式
vertical-align 属性：middle、top、bottom
实际 - 制作总裁致辞页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1> 总裁致辞 </h1>
<h3> 起源：来自东部数据 </h3>
<hr/>
<p><img src="image/icon.jpg" alt="总裁致辞" width="176" height="108" />
9 月 16 日下午，东部控股副总裁、东部数据教育公司总裁张家林老师相继来到黑龙江外国语学院和哈尔滨学院，别离向两个高校的学子们分享了 <strong>“怀揣幻想 发明将来—服务外包人才的成长之路”</strong> 以及 <strong>“互联网 + 时代 IT 人才的成长之路”</strong> 的主题演讲。</p>
<p> 演讲开始，张家林总裁指出随着“互联网 +”时代的降临，信息技术进一步推动服务外包需要改革，以 <strong> 大数据、物联网、挪动互联网、云计算 </strong> 为代表的新一代信息技术正在减速与传统产业交融倒退，基于信息化、互联化的新兴商业模式正在从新构建。接下来，张家林总裁提出 IT 及服务外包产业具备知识性、专业性、实践性的特点，决定了该产业必然是智力型、应用型人才星散之地；产业国际化亟需兼备技术和语言能力并可能跨文化沟通的人才。近年国内毕业生数量继续快速增长，面临着待业更加艰难的困顿，同时企业和高校也陷入了人才需求和人才输入的“囚徒窘境”中。面对严厉的待业事实，张家林总裁着重给出了对大学生的倡议：“一直晋升本人的软技能和硬技能，做好职业生涯规划，从当初开始职涯历程的终点；聚焦 IT 方向，打好根底，积攒相应的工作教训，为待业做好充分准备。”</p>
</body>
</html>伪类
伪类抉择元素基于的是以后元素处于的状态。因为状态是动态变化的，所以一个元素达到一个特定状态时，它可能失去一个伪类的款式；当状态扭转时，它又会失去这个款式。
:hover
伪类将利用于有鼠标指针悬停于其上的元素。
语法：
标签名: 伪类名{申明;}
a:hover
{
color:#B46210;
text-decoration:underline;
}伪类利用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {text-decoration: none;}
a:hover {
text-decoration: underline;
color: red;
}
p:hover {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body><a href="#"> 中华培训 </a>
<p> 产融教育 </p></body>
</html>
网页背景色彩
background-color
列表款式
去掉圆点
list-style:none
Web 字体
Font Awesome— 提供可缩放矢量图标
官网地址：http://www.fontawesome.com.cn/
应用步骤
1. 引入 css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">2. 你能够通过设置 CSS 前缀 fa 和图标的具体名称，来把 Font Awesome 图标放在任意地位。
3.Font Awesome 被设计为用于行内元素（咱们喜爱用更简短的标签，它的语义更加精准）。
4. 如果您批改了图标容器的字体大小，图标大小会随之扭转。同样也实用于色彩。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style>
a{
font-size: 30px;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<p>
<a href="#"><i class="fa fa-battery-2"></i> 首页 </a>
<a href="#"><i class="fa fa-camera-retro"></i> 首页 </a>
</p>
</body>
</html>