前端HTML字体和文本样式

文章目录

前端HTML字体和文本样式

属性	表示	注意点
font-size	字号	我们通常用的单位是 px 像素，一定要跟上单位
font-family	字体	实际开发中按照约定来写字体
font-weight	字体粗细	j记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic , 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1.字体连写是由顺序的不能随意换位置 2.期中字号和字体必须同时出现

1.字体样式

1.1字体大小

属性名： font-size
取值：数字+px
谷歌默认浏览器的字体大小是16px
嵌入式引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            font-size:30px 
        }
    </style>
</head>
<body>
    <p>段落文字</p>
</body>
</html>

1.2 字体粗细

属性名：font-weight
取值：关键字

关键字
正常	normal
加粗	bold

纯数字	100~900的整百分数
正常	400
加粗	700

不是所有字体都提供九种粗细，因此部分取值页面中无变化
实际开发中正常加粗两种取值使用最多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 400正常，700加粗 */
        div{
      
      
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>这是div</div>
</body>
</html>

1.3 字体样式（是否倾斜）

属性名：font-style
取值

正常	normal
倾斜	italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
        font-style: italic
    }
    </style>
<body>
    <p>这是倾斜的文字</p>
</body>
</html>

1.4字体类型

属性名：font-family
字体有 “Microsoft YaHei"、微软雅黑，黑体…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            /* sans-serif */
            /* 如果用户电脑没有安装微软雅黑，就按照黑体显示文字 */
            /* 如果用户电脑没有安装黑体，就按任一一种非衬线字体系列显示 */
            font-family: YaHei,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <div>我想变字体</div>
</body>
</html>

1.5 样式层叠问题

Q: 如果给同一个标签设置了相同的样式，浏览器会如何渲染呢？
A: 如果给同一个标签设置了相同的样式，此时样式会叠层覆盖，写在最下面的会生效。
Tips： 1.CSS叠层样式表
2.所谓的叠层叠加的意思，表示样式可以一层一层发叠层覆盖

下面代码字体颜色发生叠层，巧克力色最后覆盖前面的蓝色，在浏览器中渲染出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            color: blue;
            color: chocolate;
        }
    </style>
</head>
<body>
    <p>层叠</p>
</body>
</html>

1.6 字体复合属性

属性名：font
取值： font: style weight size family
注意点：如果需要同事设置单独和连写形式，要么把单独的样式写在连写下面，要么把单独的样式写在连写里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            /* font:style weight size 字体; */
            font: italic 700 30px 宋体;
        }
    </style>
</head>
<body>
    <p>这是好的好的吧</p>
</body>
</html>

在这里插入图片描述

2.文本样式

文本缩进	text-indent
文本水平对齐方式	text-align
文本修饰	text-decoration

2.1 文本缩进

属性名：text-indent
取值
数字+px
数字+em(推荐：1em=当前标签的font-size的大小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            /* 浏览器默认字号：16px */
            /* 首行缩进2个字体   32px */
            text-indent: 32px;
        }
    </style>
</head>
<body>
    <p>hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必</p>
</body>
</html>

在这里插入图片描述

2.2 文本水平对齐方式

属性名：text-align
取值:

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：如果需要文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
      
      
            /* text-align: left; */
            /* text-align: right; */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
</body>
</html>

text-align:center 可以让 文本、图片，span标签，a标签，input标签，img标签等居中。

图片居中，图在哪个标签里面就给哪个标签添加center属性。
在这里插入图片描述

2.3文本修饰

属性名：text-decoration
取值：

属性名	效果
underline	下划线（常用
line-throgh	删除线（不常用
overline	上划线
none	无装饰线

注意：开发中会使用text-decoration :none 清除a标签默认的下划线

下面是针对不同标签分别采用上面四个属性值的效果。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            text-decoration: underline;
        }
        p{
      
      
            text-decoration: line-through;
        }
        h2{
      
      
            text-decoration: overline;
        }
        a{
      
      
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h2>h2</h2>
    <a href="#">我是一个超链接</a>
</body>
</html>

3.行高

在这里插入图片描述

    <style>
        p{
      
      
            /* font-size: 40px; */
            /* line-height: 60px; */

            line-height: 1.5;
        }
    </style>

前端HTML字体和文本样式

前端HTML字体和文本样式

文章目录

1.字体样式

1.1字体大小

1.2 字体粗细

1.3 字体样式（是否倾斜）

1.4字体类型

1.5 样式层叠问题

1.6 字体复合属性

2.文本样式

2.1 文本缩进

2.2 文本水平对齐方式

2.3文本修饰

3.行高

猜你喜欢