分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

css零基础自学教程(二)css文本样式 第一部分

  • 时间:2018-07-03 21:23 作者:极客饕餮 来源:极客饕餮 阅读:322
  • 扫一扫,手机访问
摘要:一 font-familyfont-family属性指定元素的字体.有两种字体系列名称:●字体系列:特定的字体系列(如Times New Roman或者Arial)●通使用族:一组具备类似外观的字体族(如Serif或者Monospace)html代码:段落以serif字体显示.段落以sans-ser
css零基础自学教程(二)css文本样式 第一部分

一 font-family

font-family属性指定元素的字体.

有两种字体系列名称:

●字体系列:特定的字体系列(如Times New Roman或者Arial)

●通使用族:一组具备类似外观的字体族(如Serif或者Monospace)

html代码:

段落以serif字体显示.

段落以sans-serif字体显示.

段落以monospace字体显示.

段落以cursive字体显示.

段落以fantasy字体显示.

css代码:

p.serif { font-family:"Times New Roman",Times,serif;}

p.sansserif {font-family:Helverica,Arial,sans-serif;}

p.monospace{font-family:"Courier New", Courier,monospace;}

p.cursive{font-family:Florence,cursive;}

p.fantasy{ font-family:Blippo,fantasy;}

运行效果如下:

css零基础自学教程(二)css文本样式 第一部分

使用逗号分隔每个值,以表明它们是可选项.

假如一个字体的名字不止一个字,那么必需使用引号:"Times News Roman".

★font-family属性应该包含几个字体名称作为备选.在css样式中指定web字体时,请增加多个字体名称,以避免意外的发生.

假如用户端计算机出于某种起因没有你选择的字体时,则会尝试下一个字体.

指定通使用字体系列是一个很好的方法.假如没有其余字体可使用,让浏览器在通使用系列中选择类似的字体.

body{ font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;}

假如浏览器不支持Arial字体,则会尝试下一个字体(Helvetica Neue,Helvetica).假如浏览器没有任何一个,它会尝试通使用的sans-serif字体

假如字体名称包含多个单词,请务必用引号.

二 font-size

font-size属性设置字体的大小.一种设置网页字体大小的方法是用关键字.例如:small,medium,large,x-large等

html代码:

这个段落字体大小为small.

这个段落的字体大小为medium.

这个段落的字体大小为large.

这个段落的字体大小为x-large.

css代码:

p.small{font-size:small;}

p.medium{ font-size:medium; }

p.large{ font-size:large;}

p.xlarge{font-size:x-large;}

运行效果如下:

css零基础自学教程(二)css文本样式 第一部分

你能用像素(px)或者相对尺寸单位(em)数值来操纵字体大小.

像素使用于准确控制字体大小.

em尺寸单位是设置字体大小的另一种方式.它允许所有主流浏览器调整文本的大小.假如你没有在页面上的任何位置设置字体的大小,那么浏览器文本的默认大小就是16px.

em=px/16.

例如:h1{font-size:20px;}

h1{font-size:1.25em;}

这两个例子效果是一样的. 由于 20/16=1.25em

●在各种浏览器中尝试文本大小和页面缩放的不同组合,以确保文本的可读性.

三 font-style

font-style属性通常使用于指定斜体文字.

html代码:

我只是斜了一点儿,并不歪.

css代码:

p.italic{font-style:italic;}

效果如下:

css零基础自学教程(二)css文本样式 第一部分

font-style属性有三个值;normal,italic和oblique(倾斜)

倾斜非常相似于斜体,但支持较少

四 font-weight

font-weight属性控制文本的粗细.值能设置为normal(默认),bold(黑体,粗体),bolder(更黑的),lighter

根据文本的厚度,也能用从100(细)到900(粗)的数字来定义字体粗细

400与normal相同,700与bold相同

五 font-variant(变体)

font-variant属性允许你将字体转换为所有小型大写字母.值能设置为normal,small-caps,inherit

html代码:

paragraph font variant set to small-caps.

css代码:

p.smallcaps{font-variant:small-caps; }

效果如下:

css零基础自学教程(二)css文本样式 第一部分

●不是每个字体都支持css字体变体,所以在发布之前肯定要测试一下

六 color

color属性指定文本的颜色.

指定文本颜色的一种方法是用颜色名称;如red,green,blue等

html代码:

大家好!我是一楼!

楼上怎样这么绿!

css代码:

p.green{color:green;}

效果如下:

css零基础自学教程(二)css文本样式 第一部分

定义color的另一种方法是用十六进制和RGB

十六进制形式是#,最多6个十六进制数(0-F)

RGB定义了红色,绿色和蓝色的各个值.

html代码:

极客饕餮

极客饕餮

css代码:

p.blue{ color:#0000FF;}

p.red{ color:rgb(255,0,0);}

效果如下:

css零基础自学教程(二)css文本样式 第一部分

七 水平对齐文本

text-align属性指定元素中文本的水平对齐方式.默认情况下,你网站上的文字是左对齐.但是,有时你可可以需要不同的对齐方式.

文本对齐属性值有:left,right,center和justify(等宽对齐)

当文本对齐设置为"justify"时,每行都被拉伸,使得每一行具备相同的宽度,并且左右边距是直的(如在杂志和报纸中)

八 垂直对齐文本

vertical-align属性设置元素的垂直对齐.常使用的值是 top, middle和bottom

vertical-align属性还包含以下值:baseline, sub,super,%和px(或者pt,cm) pt是point 点

vertical-align属性对所有元素的行为都不一样

例如,div元素需要少量额外的css样式

html代码;

历史是成功者创造的

css代码:

.main{height:150px; width=400px;background-color:LightSkyBlue; display:inline-table; }

.paragraph{ display:table-cell; vertical-align:middle; }

效果如下:

css零基础自学教程(二)css文本样式 第一部分

display:inline-table和display:table-cell 用样式来使垂直对齐属性可以在div中起效果.

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部