CSS的文字处理

最新推荐文章于 2024-08-25 22:12:40 发布

李昆鹏

最新推荐文章于 2024-08-25 22:12:40 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_41547486/article/details/80358562

版权

CSS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

--------------------------------------CSS的文字处理--------------------------------------

字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

代码示例：

<!DOCTYPE html>

<html>

<head>

h1{

font-family:黑体;

}

.content{

font-family:仿宋;

}

.author{

font-family:方正兰亭超细黑简体;

}

</style>

</head>

<body>

<p class="content">自秦代以来，我国就一直以立春作为春季的开始。立春是从天文上来划分的，

而在自然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。

在气候学中，春季是指候（5天为一候）平均气温10℃至22℃的时段。

</p>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------

字体的大小

大小单位

px
相对长度单位。像素（Pixel）。
像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
ex
相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pt
绝对长度单位。点（Point）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
pc
绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
in
绝对长度单位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
mm
绝对长度单位。毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
绝对长度单位。厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

代码示例：

<html>

<head>

<style>

<!--

p.inch{ font-size: 0.5in; }

p.cm{ font-size: 0.5cm; }

p.mm{ font-size: 4mm; }

p.pt{ font-size: 12pt; }

p.pc{ font-size: 2pc; }

p.px{ font-size: 12px;}

-->

</style>

</head>

<body>

</body>

</html>

-----------------------------------------------------------------------

文字加粗、斜体、装饰线

代码示例：

<!DOCTYPE html>

<html>

<head>

font-size:30px;

}

.p1{ font-weight:normal; }

.p2{ font-weight:lighter;}

.p3{ font-weight:bold; }

.p4{ font-weight:bolder; }

.p5{ font-style:italic; }

.p6{ font-style:oblique; }

.p7{ text-decoration: none; }

.p8{ text-decoration: underline; }

.p9{ text-decoration: overline; }

.p10{ text-decoration:line-through; }

.p11{ text-decoration:blink; }

.p12{ text-decoration:inherit; }

</style>

</head>

<body>

<p class="p1">我是正常体</p>

<p class="p2">我是小加粗</p>

<p class="p3">我是大加粗</p>

<p class="p4">我是最加粗</p>

<p class="p8">我是下划线</p>

<p class="p9">我是上划线</p>

<p class="p10">我是删除线</p>

</body>

</html>

----------------------------------------------------------

文字对齐方式

代码示例：

<!DOCTYPE html>

<html>

<head>

/* 元素内部的内部的对齐方式 */

.left { text-align:left; }

.center{ text-align:center;}

.right { text-align:right; }

</style>

</head>

<body>

</body>

</html>

-------------------------------------------------------------

实现首字放大效果

代码示例：

<html>

<head>

<style>

<!--

body{

background-color:black; /* 背景色 */

}

font-size:15px; /* 文字大小 */

color:white; /* 文字颜色 */

}

p span{

font-size:60px; /* 首字大小 */

float:left; /* 首字下沉 */

padding-right:5px; /* 与右边的间隔 */

font-weight:bold; /* 粗体字 */

font-family:黑体; /* 黑体字 */

color:yellow; /* 字体颜色 */

}

</style>

</head>

<body>

<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼¡¤春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p>

<p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥和饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙芋之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说：“此际金凤荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筵罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。</p>