HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式

简介: HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式

本教程案例在线演示

有路网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"; }


image.png


font-size属性

单位:px(像素)

.p1{font-size: 10; }
.p2{font-size: 20px;}
.p3{font-size: 30px;}


image.png

font-style属性


normal、italic和oblique


image.png


字体的粗细


font-weight属性

normal 默认值,定义标准的字体。

bold 粗体字体。


image.png



font属性

字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

p span{font:oblique bold 12px "楷体";}



image.png


文本样式文本属性


属性      含义          举例

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位

image.png


水平对齐方式


text-align属性

值   说明

left    把文本排列到左边。

right   把文本排列到右边

center  把文本排列到中间


首行缩进


text-indent:px

行高

line-height:px

文本装饰

text-decoration属性

值       说明

none        默认值,定义的标准文本。

underline   设置文本的下划线。

overline    设置文本的上划线。

line-through    设置文本的删除线。


image.png



垂直对齐方式


vertical-align属性:middle、top、bottom


实践-制作总裁致辞页面


image.png


<!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


image.png


列表样式

去掉圆点

list-style:none


image.png

Web字体

Font Awesome---提供可缩放矢量图标

官网地址:http://www.fontawesome.com.cn/


image.png



使用步骤


1.引入css

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

2.你可以通过设置CSS前缀fa和图标的具体名称,来把Font Awesome 图标放在任意位置。

3.Font Awesome 被设计为用于行内元素(我们喜欢用更简短的<i>标签,它的语义更加精准)。

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>


目录
相关文章
|
2月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
32 4
|
2天前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
7 1
前端基础(十七)_HTML5新特性
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
26天前
|
前端开发
|
26天前
|
Web App开发 移动开发 自然语言处理
|
1月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
42 2
|
27天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
46 0
|
28天前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
30 0
|
2月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
52 0
学习css的clip-path属性
|
2月前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
141 1