2.HTML&CSS:段落文字及其样式

段落文字及其样式

Hi,这篇短文我们来聊聊网页上最常展示的内容——段落及文字。我们可以很方便的在word里编辑一篇文章,可以设置标题、字体、文字大小、文字颜色等各种样式,但现在我们想要在网页上做这些事情,让网页上文字也同样的漂亮美丽,OK吗?以下。

开始之前

HTML编辑器

子曰“工欲善其事,必先利其器”。我们开始编写HTML代码,该选择什么编辑工具呢,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了。这里我们推荐Notepad++、Dreamweaver和Visual Studio,如果后面想接着学习 ASP.NET,建议使用Visual Studio。

CSS选择器

网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的。简单的例子,网页上有几段文字,我们想把第一段文字调成红色的,在用CSS写完红色文字样式后,是不是得指明该红色文字样式是针对第一段文字的,那就得用CSS选择器了。CSS选择器提供了多种方式帮你选中要设置样式的元素,这里我们介绍常用的三种:

1、元素选择器,就是“选中”相同的元素,然后对相同的元素设置同一个CSS样式。

2、ID选择器,元素选择器范围太广,可以选中所有相同的元素,如果我们想指定某一个元素,就可以为该元素设置一个ID,就是相当于取一个独一无二的名字,然后用ID选择器就可以单独选中它。

3、class选择器,假如我们想要为不同类型的多个元素设置相同的样式该怎么办呢,那么我们就可以写一个class,然后在要应用这个class样式的元素中声明就可以了。

代码示例

运行效果

关于注释

代码加注释是非常必要且重要的,它能提高代码的可读性。注释不参与编译,不会被执行,THML注释同样也不会在浏览器里显示,它只是代码的说明。

HTML注释:“”表示注释的结束。

CSS注释:“/*”表示注释的开始,“*/”表示注释的结束。

HTML段落及文字

在word中,我们可以方便编辑一篇文章,可以有标题、段落、换行,甚至还有一些特殊字符。在HTML中,也可以方便的实现这些编辑操作。

区块标签

标签用来划分一个区域。主要用来为HTML文档内大块的内容提供结构和背景。一个页面可以用

划分若干区域,每个区域在放置若干元素。是内嵌文本容器,就是在一行内划分一个区域,比如,要在一行内显示两种不同样式的文字,就可以用划分两个区域,分别设置不同的文字样式。

标题标签:HTML的标题可分为六级,分别是、、、、、,这些标题标签,可以根据需求使用,为最高一级标题,级别越高,字体越大。

段落标签

:段落标签会自动换行,并且段落与段落之间会有一定的空隙。

换行标签

:使用换行标签我们可以在任何地方随时换行。

水平线标签:使用该标签可以在页面上显示一条水平直线。

上标标签下标标签:该标签常用于编辑数学公式或化学分子式等。

代码示例

运行效果

CSS 段落及文字样式

类似word一样,CSS也可以设置字体类型、文字大小、文字粗细、是否斜体以及文字颜色。详见下表。

属性名

使用说明

font-family

设置字体类型,例font-family:宋体;

font-size

设置文字大小,常用像素(px)为单位,也可用em、百分比等。例font-size:12px;

font-weight

设置文字粗细,取值主要有四个:normal正常、lighter较细、bold较粗、bolder很粗。例font-weight:bold;

font-style

设置斜体,取值主要有四个:normal正常、italic斜体、oblique也是斜体。例font-style:italic;

color

设置文字颜色,值可直接用颜色关键字如red、green等,也可用16进制RGB值。例color:red;

:italic和oblique的区别:简单说来就是一般字体都可以用italic来设置斜体,但有些特殊的,设置了italic不起作用,那就用oblique来搞定。文字粗细和斜体normal为默认值。

代码示例

运行效果

CSS针对文本段落的设置主要包括:添加下划线或删除线、设置首行缩进、设置行高、设置文本水平对齐方式、设置字符间距等。详见下表:

属性名

使用说明

text-decoration

添加修饰,取值主要有四个:none无修饰、underline下划线、line-through删除线、overline上划线。

text-indent

段落首行缩进,常用像素(px)为单位。例text-indent:12px;

text-align

文本水平对齐方式,取值主要有三个:left左对齐(默认值)、center居中、right右对齐。

line-height

行高(行间距),常用像素(px)为单位,例line-height:15px;

letter-spacing

字符间距,一个英文字母、一个汉字都认为是一个字符,调整其间距。

word-spacing

词间距,以空格为分隔,如果两个汉字有空格,则认为是两个词。

:text-decoration属性的none值可以去掉默认就有下划线的标签,比如:超链接标签

代码示例

运行效果

END

如果您看完觉得有一点点的收获

请别忘了分享和转发,感谢您的支持

左手程序Z右手诗

关注一下 分享技术

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180506G0J62L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券