HTML--CSS--字体、文本样式

发布时间：2024年01月14日

字体样式

属性作用
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>

效果：
在这里插入图片描述

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中可以使用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内的注释并未生效
在这里插入图片描述

文本样式

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

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

表单

这里是另外一段话

居中对齐

左对齐

右对齐

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

带下划线

带删除线

带顶划线

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

去除下划线的百度链接网址
默认的百度链接网址 ``` 效果： ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9b282c470d224881b493e7e839dfa79b.png) ## 大小写 text-transform 属性：只适用于英文 >none 无转化（默认值） >uppercase 转换为大写 >lowercase 转换为小写 >capitalizr 只将每个英文单词首字母转换为大写 ```html 表单

my room Case

MY ROOOM Case

my room case

``` 效果： ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/60a774e87d024914ae5b09e04de4b4aa.png) ## 行高 line-height 用法： `line-height:像素值;` ## 字间距 letter-spacing 用法：x px `letter-spacing:像素值;`

词间距 word-spacing(针对英文单词)

用法：x px
word-spacing:像素值;

文章来源:https://blog.csdn.net/weixin_44517278/article/details/135583521
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章