HTML_CSS学习:常用的字符属性

一、字体大小

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体大小</title>
    <style>
        /*body{*/
        /*    font-size: 20px;*/
        /*}*/
        .atguigu1{
            font-size: 40px;
        }
        .atguigu2{
            font-size: 30px;
        }
        .atguigu3{
            font-size: 20px;
        }
        .atguigu4{
            font-size: 12px;
        }
        .atguigu5{
            /*浏览器能够接受的最小字体是12px*/
            font-size: 3px;
        }
        .atguigu7{
            /*浏览器能够接受的最小字体是12px*/
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="atguigu1">尚硅谷1</div>
    <div class="atguigu2">尚硅谷2</div>
    <div class="atguigu3">尚硅谷3</div>
    <div class="atguigu4">尚硅谷4</div>
    <div class="atguigu5">尚硅谷5</div>
    <div>尚硅谷6</div>
    <div class="atguigu7">尚硅谷7</div>

</body>
</html>

二、字体族

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体族</title>
    <style>
        .atguidu1{
            /*衬线字体:有棱角感*/
            /*非衬线字体:五棱角感*/
            font-size: 50px;
            font-family: "微软雅黑";
        }
        .atguidu2{
            font-size: 50px;
            font-family: "黑体";
        }
        .atguidu3{
            font-size: 50px;
            font-family: "宋体";
        }
        .atguidu4{
            font-size: 50px;
            font-family: "华文彩云";
        }
        .atguidu5{
            font-size: 50px;
            font-family: "华文彩云","微软雅黑","黑体","宋体";
        }
        .atguidu6{
            font-size: 50px;
            font-family: "STCaiyun","STHupo","Microsoft YaHei",sans-serif;
            /*可以设置多个字体,按照从左往右的顺序逐个查找,找到就用,最后协商serif,sans-serif*/
        }

    </style>
</head>
<body>
    <div class="atguidu1">尚硅谷1</div>
    <div class="atguidu2">尚硅谷2</div>
    <div class="atguidu3">尚硅谷3</div>
    <div class="atguidu4">尚硅谷4</div>
    <div class="atguidu5">尚硅谷5</div>
    <div class="atguidu6">尚硅谷6</div>

</body>
</html>

三、字体风格

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格</title>
    <style>
        .atguigu1{
            font-size: 50px;
            font-style: normal;
        }
        属性名:font-style
        常用值:
        /*normal:正常(默认值)*/
        /*italic:斜体(使用字体自带的斜体效果)*/
        /*oblique:斜体(强制斜体产生的斜体效果)*/
        /*推荐使用italic*/
        .atguigu2{
            font-size: 50px;
            font-style: italic;
        }
        .atguigu3{
            font-size: 50px;
            font-style: oblique;
        }
        em{
            font-size: 100px;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="atguigu1">尚硅谷1</div>
    <div class="atguigu2">尚硅谷2</div>
    <div class="atguigu3">尚硅谷3</div>
    <em>尚硅谷4</em>

</body>
</html>

四、字体粗细

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体粗细</title>
    <style>
        div{
            font-size: 50px;
        }
        .atguigu1{
            font-weight: lighter;

        }
        .atguigu2{
            font-weight: normal;
        }
        .atguigu3{
            font-weight: bold;
        }
        .atguigu4{
            font-weight: bolder;
        }
        .atguigu5{
            font-weight: 600;
        }
        /*数值:*/
        /*100-1000且无单位,数值越大,字体越粗(或一样粗,具体得看字体设计时得精确程度)*/
        /*        100-300等同于lighter 400-500等同于normal 600及以上等同于bold*/

    </style>
</head>
<body>
    <div class="atguigu1">硅谷1</div>
    <div class="atguigu2">硅谷2</div>
    <div class="atguigu3">硅谷3</div>
    <div class="atguigu4">硅谷4</div>
    <div class="atguigu5">硅谷5</div>

</body>
</html>

五、字体复合属性

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体复合属性</title>
    <style>
        .atguigu{
            font: bold italic 100px "华文彩云","华文琥珀";
        }
    </style>
</head>
<body>
    <div class="atguigu">尚硅谷</div>
    属性名:font 可以把上述字体样式合并成一个属性
    编写规则
    1.字体大小,字体族必须写上
    2.字体族必须是最后以为,字体大小必须是倒数第二位
    3.各属性键空格隔开
实际开发中更推荐使用复合写法,但这也不是绝对得,比如只想设置字体大小,那就直接哦那个font-size属性

</body>
</html>
相关推荐
乖乖是干饭王28 分钟前
Linux系统编程中的_GNU_SOURCE宏
linux·运维·c语言·学习·gnu
待什么青丝1 小时前
【TMS570LC4357】之相关驱动开发学习记录2
c语言·arm开发·驱动开发·单片机·学习
行云流水剑2 小时前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf
尽欢i2 小时前
HTML5 拖放 API
前端·html
wandongle2 小时前
HTML面试整理
前端·面试·html
一只小风华~2 小时前
HTML前端开发:JavaScript 常用事件详解
前端·javascript·html
虾球xz2 小时前
CppCon 2015 学习:CLANG/C2 for Windows
开发语言·c++·windows·学习
要加油哦~3 小时前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css
蓝婷儿3 小时前
6个月Python学习计划 Day 17 - 继承、多态与魔术方法
开发语言·python·学习
LuckySusu3 小时前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html