【CSS】第二天 画盒子、文字控制属性

【CSS】第二天

  • [1. 画盒子](#1. 画盒子)
  • [2. 文字控制属性](#2. 文字控制属性)
    • [2.1 字体大小](#2.1 字体大小)
    • [2.2 字体粗细](#2.2 字体粗细)
    • [2.3 字体样式是否倾斜](#2.3 字体样式是否倾斜)
    • [2.4 行高](#2.4 行高)
    • [2.5 行高-垂直居中](#2.5 行高-垂直居中)
    • [2.6 字体族](#2.6 字体族)
    • [2.7 字体复合属性 font](#2.7 字体复合属性 font)

1. 画盒子

目标:使用合适的选择器画盒子。
新属性

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: brown;
        }

        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="red">div标签</div>
<div class="orange">div2</div>
</body>
</html>

2. 文字控制属性

2.1 字体大小

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            /* font-size 属性必须有单位,否则属性不生效,默认文字大小16px */
            font-size: 30px;
        }
    </style>
</head>
<body>
        <p>div标签</p>
        <div>默认字体大小</div>
</body>
</html>

2.2 字体粗细

属性名:font-weight

属性值:

  • 数字 正常400 加粗700
  • 关键字 正常normal 加粗bold
html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h3 {
            font-weight: 400;
        }

        div {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h3>123</h3>
    <div>456</div>
</body>
</html>

2.3 字体样式是否倾斜

作用:清除文字默认的倾斜效果

属性名:font-style

属性值:

  • 正常值:normal
  • 倾斜: italic
html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        em {
            font-style: normal;
        }

        div {
            font-style: italic;
        }
    </style>
</head>
<body>
<em>em标签</em>
<div>div标签</div>
</body>
</html>

2.4 行高

作用:设置多行文本的间距

属性名:line-height

属性值

  • 数字 + px
  • 数字(当前标签font-size属性值的倍数)
css 复制代码
line-height: 30px;


/* 当前标签字体大小为16px,写line-height: 2 那么行高就是32px */
line-height: 2;

行高的组成


行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。

2.5 行高-垂直居中

2.6 字体族

属性名:font-family

属性值:字体名
font-fanily:楷体;

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            font-family: Heiti SC;
        }
    </style>
</head>
<body>
    <div>测试文字</div>
</body>
</html>
html 复制代码
// 拓展(了解):font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font-family 属性最后设置一个字体族名,网页开发建议使用无衬线字体

2.7 字体复合属性 font

DAY03 P37

相关推荐
哆啦A梦15886 分钟前
搜索页面布局
前端·vue.js·node.js
_院长大人_30 分钟前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15882 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫2 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo2 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li3 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊4 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz5 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom5 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1235 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js