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

font-size属性

单位:px(像素)

.p1{font-size: 10; }

.p2{font-size: 20px;}

.p3{font-size: 30px;}

image

font-style属性

normal、italic和oblique


image

字体的粗细

font-weight属性

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

bold 粗体字体。

image

font属性

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

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

文本样式文本属性

属性 含义 举例
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

水平对齐方式

text-align属性

值 说明

left 把文本排列到左边。

right 把文本排列到右边

center 把文本排列到中间

首行缩进

text-indent:px

行高

line-height:px

文本装饰

text-decoration属性

值 说明

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

underline 设置文本的下划线。

overline 设置文本的上划线。

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

image

垂直对齐方式

vertical-align属性:middle、top、bottom

实践-制作总裁致辞页面

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

列表样式

去掉圆点
list-style:none


image

Web字体

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

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

image

使用步骤

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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249