前段总结5

最新推荐文章于 2022-09-30 08:30:12 发布

EstherQKing

最新推荐文章于 2022-09-30 08:30:12 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/EstherQKing/article/details/109453177

版权

使用font-family设置字体系列

body{font-family:"宋体";}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意：第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

使用font-size设置字体大小

可以使用下面代码设置网页中文字的字号为12像素：
body{font-size:12px;}

使用font-weight设置字体粗细

我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。

使用font-style设置字体样式

1、font-style可以设置字体样式，并且有种3设置方式。

2、正常字体为normal,也是font-style的默认值。

3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。

4、oblique为设置倾斜的字体，强制将字体倾斜。

使用color设置字体颜色

1、color属性可以设置字体颜色。
2、color的值有3种设置方式：
英文命令颜色
p{color:red;}
RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}

使用text-indent为文本添加首行缩进

<style type="text/css">
        p{text-indent:2em;}
    </style>

使用letter/word-spacing增加或减少字符间的空白

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>字间距</title>
    <style type="text/css">
        h1{word-spacing:20px};
        
    </style>
</head>

<body>
    <h1>hello world!你好！</h1>
</body>


</html>

使用text-align设置文本对齐方式

h1{ text-align:center; }
<h1>了不起的盖茨比</h1>
同样可以设置居左：

h1{ text-align:left; }
<h1>了不起的盖茨比</h1>
还可以设置居右：

h1{ text-align:right; }
<h1>了不起的盖茨比</h1>

长度值

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>
css:

p{font-size:14px} span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）

EstherQKing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前段总结5

使用font-family设置字体系列body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。因为这种字体即
复制链接

扫一扫