CSS字体样式基础教程

最新推荐文章于 2023-03-17 10:23:13 发布

@夜

最新推荐文章于 2023-03-17 10:23:13 发布

阅读量229

点赞数

分类专栏：前端开发基础技术文章标签： css3 html

本文链接：https://blog.csdn.net/my_20021004/article/details/105901845

版权

前端开发基础技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS文本样式

一：字体属性

字体font-family：
- 作用：指定文字字体类型，如宋体，黑体，隶书，Times New Roman等
- 语法如下：
```
{font-family:name}
{font-family:cursive|monospace|serif|sans-serif}
```
  从上可以看出，font-family有两种声明方式
  1. 使用name字体名称
  2. 使用所有列出的字体序列名称，若使用fantasy序列，将提供默认字体序列
  3. 例如：
```
<!DOCTYPE html>
<html>
    <head>
        <style>
            p{font-family:黑体}
        </style>
    </head>
    <body>
        <p align=center>天行健，君子以自强不息。</p>
    </body>
</html>
```
  4. 可以指定多种字体以防只有一种字体而系统不能显示的问题。如：
```
p{font-family:华文彩云,黑体，宋体}
```
    当font-family属性值中的字符类型由多个字符串和空格组成时如：(Time New Roman)
```
p{font-family:"Times New Roman"}
```
    该值需要用双引号引起来。

字号font-size：

格式：

{font-size:数值|inherit|xx-small|x-small|small|medium|large|x-large|xx-large|larger|samller|length}

各属性含义如下表：

参数	说明
xx-small	绝对字体尺寸。根据对象字体进行调整。最小
x-small	绝对字体尺寸。根据对象字体进行调整。较小
small	绝对字体尺寸。根据对象字体进行调整。小
medium	默认值。绝对字体尺寸根据对象字体进行调整。正常
large	绝对字体尺寸。根据对象字体进行调整。大
x-large	绝对字体尺寸。根据对象字体进行调整。较大
xx-large	绝对字体尺寸。根据对象字体进行调整。最大
larger	相对字体尺寸。根据父对象中字体尺寸进行相对增大。使用成比例的 em 单位计算
smaller	相对字体尺寸。根据父对象中字体尺寸进行相对减小。使用成比例的 em 单位计算
lenght	百分数或由浮点数字和单位标识符组成的长度值，不可为负数。其百分比取值是基于父对象中字体的尺寸。

<!DOCTYPE html>
<html>
    <body>
        <div style="font-size:10pt">上级标记大小
            <p style="font-size:small">小</p>
            <p style="font-size:larger">大</p>
            <p style="font-size:x-small">小</p>
            <p style="font-size:x-larger">大</p>
            <p style="font-size:50%">字标记</p>
            <p style="font-size:25pt">字标记</p>
        </div>
    </body>
</html>

字体风格font-style：

作用：字体显示样式

格式：

font-sty：normal|italic|oblique|inherit

属性含义：

属性值	含义
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个斜体的字体样式。
inherit	规定应该从父元素继承字体样式。

加粗字体font-weight：
- 作用：设置字体的粗细程度。
- 格式：
```
{font-weight:100-900|bolder|lighter|normal;}
```
- 属性含义：
  
  属性描述
  bold 定义粗体字体
  bolder 定义更粗的字体，相对值。
  lighter 定义更细的字体，相对值。
  normal 默认，标准字体。
小写字母转大写字母font-variant：
- 作用：设置大小字母的字体显示文本，这意味着所有的小写字母均会被转换为大小。
- 格式：
```
{font-variant:normal|small-caps|inherit}
```
- 属性含义：
  
  属性值说明
  normal 默认值。浏览器显示一个标准的字体样式。
  small-caps 浏览器会显示小型大写字母的字体。
  inherit 规定应该从父元素继承字体样式。
字体复合属性font：
- 作用：可以一次性使用多个属性的属性值定义文本字体
- 格式：
```
{font:font-style font-variant font-weight font-size font-family}
```
注意：
- 属性含义：font-style，font-variant，font-weight这三个属性值可以自由调换，而font-size， font-family必须都出现并顺序不可变，若不全或顺序改变都可能使其不起作用。

属性	描述
bold	定义粗体字体
bolder	定义更粗的字体，相对值。
lighter	定义更细的字体，相对值。
normal	默认，标准字体。

字体颜色color：

作用：设置字体颜色

用法：

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1{color:red}
        </style>
    </head>
    <body>
        <h1>
            第一段为color设置的red（红色）
        </h1>
    </body>
</html>

属性设定值：

color_name	规定属性值为颜色名称的颜色（例如red）。
hex_number	规定属性值为十六进制的颜色（例如#ff0000）。
rgb_numbler	规定属性值为rgb代码的颜色（例如rgb(255,0,0)。
inherit	规定应该从父元素继承颜色。
hsl_numbler	规定属性值为HSL代码的颜色（例如 hsl(0,75%,50%)），此为CSS3新增的颜色表现方式。
hsla_numbler	规定属性值为HSLA代码的颜色（例如hsla(120,50%,50%,1)），此为CSS3新增的颜色表现方式。
rgba_number	规定属性值为RGBA代码的颜色（例如rgba(125,10,45,0.5)），此为CSS3新增的颜色表现方式。

@夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

属性值	说明
normal	默认值。浏览器显示一个标准的字体样式。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承字体样式。