HTML--CSS--字体、文本样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML--CSS--字体、文本样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

字体样式

属性	作用
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

font-family 字体类型

用法：
如下，定义 div元素内的字体，默认是宋体，要设定其他字体就用这个属性进行设定，关于各字体，我用VSCode写代码时有补全，就不一一列出了

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div {font-family: 'Courier New', Courier, monospace;}
    </style>
</head>
<body>
    <div class="x">这里有一段红色字体的话</div>
    <p>这里是另外一段话</p>
    <div>这里还有一段话</div>
</body>
</html>

font-size 字体大小

用法：

<!--用法和其他的一样，我直接放，可以接像素值 xpx，也可以接 small, medium, large关键字-->
<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div {font-size:15px;}
        p {font-size: large;}
    </style>
</head>
<body>
    <div class="x">这里有一段红色字体的话</div>
    <p>这里是另外一段话</p>
    <div>这里还有一段话</div>
</body>
</html>

font-weight 字体粗细

字体粗细属性：
normal 正常粗细（默认值)
lighter 较细
bold 较粗
bolder 很粗
100-900取值
用法：

font-weight: 900;

font-style 字体风格

属性：
normal 正常值，默认的
italic 斜体
oblique 斜体

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div {font-size:15px;font-style: italic;}
        p {font-weight: 900;font-style: oblique;}
    </style>
</head>
<body>
    <div class="x">这里有一段红色字体的话</div>
    <p>这里是另外一段话</p>
    <div>这里还有一段话</div>
</body>
</html>

效果：
HTML--CSS--字体、文本样式,HTML学习,html,css,前端

color 字体颜色

属性：
字体颜色可以用16进制RGB值来赋值，也可以用类似 red/yellow/blue/green等关键字来设定

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div {font-size:15px;font-style: italic;color: #03FCA1;}
        p {font-weight: 900;font-style: oblique;color:red;}
    </style>
</head>
<body>
    <div class="x">这里有一段红色字体的话</div>
    <p>这里是另外一段话</p>
    <div>这里还有一段话</div>
</body>
</html>

效果：
HTML--CSS--字体、文本样式,HTML学习,html,css,前端

注释： /* 注释内容 */

在HTML中可以使用HTML的注释
CSS也有自己的注释方法,但要注意CSS注释只能放在 style里，外面是不生效的

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div {font-size:15px;font-style: italic;color: #03FCA1;}
        p {font-weight: 900;font-style: oblique;color:red;}
        /*这是CSS注释*/
    </style>
</head>
<body>
    <div class="x">这里有一段红色字体的话</div>
    <p>这里是另外一段话</p>
    <div>这里还有一段话</div>
    <!--这是HTML注释-->
    /*这是CSS注释*/
</body>
</html>

效果：可以看到 body内的注释并未生效
HTML--CSS--字体、文本样式,HTML学习,html,css,前端

文本样式

文本样式主要涉及以下属性：

text-indent 首行缩进
text-align 水平对齐
text-decoration 文本修饰
text-transform 大小写转换
line-height 行高
letter-spacing、word-spacing 字母间距、词间距

首行缩进 text-indent

书上说，最好和font-size搭配使用，先定义字体大小，再定义text-indent为字体大小的两倍，做到精确地首行缩进两个字

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        p{
            font-size: 14px;
            text-indent: 28px;
        }
    </style>
</head>
<body>
    <p>这里是另外一段话</p>
    <span>正常的一段话</span>
</body>
</html>

水平对齐 text-align

属性：

left 左对齐，默认值
center 居中对齐
right 右对齐
·```html

表单

这里是另外一段话

居中对齐

左对齐

右对齐

```

## 文本修饰 text-decoration 属性： > none 去除超链接中的划线效果（默认值），主要用于去除超链接下的下划线 > underline 下划线 > line-through 中划线（删除线） >overline 顶划线诶，这里又出现了可以设定下划线中划线的格式，之前HTML的时候，记得使用 `s`可以定义中划线，`u`定义下划线，这里无疑是另一种方法，书上说优先使用CSS的方法，便于格式管理 ```html 表单

带下划线

带删除线

带顶划线

~~无法取消我s定义的中划线~~

去除下划线的百度链接网址
默认的百度链接网址 ``` 效果： HTML--CSS--字体、文本样式,HTML学习,html,css,前端