HTML CSS (Basic) Chapter3(Pink) 文本外观

最新推荐文章于 2021-07-23 10:36:23 发布

FeverTwice

最新推荐文章于 2021-07-23 10:36:23 发布

阅读量132

点赞数

分类专栏： CSS之路 HTML之路文章标签： html css html5 css3 前端

本文链接：https://blog.csdn.net/LeungSr/article/details/118722887

版权

HTML之路同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CSS之路

27 篇文章 0 订阅

订阅专栏

文章目录

1. CSS文本外观知识点
- 字体属性
- 文本属性
2. 示例
写在最后

1. CSS文本外观知识点

字体属性

font-size 字体大小，记得单位后面要加上px
font-family 字体形式，如黑体或者宋体，微软雅黑
font-weight 字体的粗细，加粗的700不加粗的400，不用加单位
line-weight 行高
font-style 只有两个属性，一个是斜体，一个是非斜体，主要用于将一些斜体的文本改成非斜体的（normal）
复合属性的书写顺序 font: font-style font-weight font-size line-weight font-family
复合属性设置字体的时候一定要按照顺序来，不然浏览器不会执行该行代码

文本属性

颜色设置的方法预定义。16进制，rgb代码
下划线 text-decoration: underline
删除线 text-decoration: line-through
上划线 text-decoration: overline
调节首行缩进 text-indent: 2em;
行间距用于设置行高，其大小与字体无关
行间距分为上间距、文本高度、下间距

2. 示例

Eg1: 字体属性

源代码

<!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>
        h2 {
            font-size: 18px;
            font-family: '微软雅黑';
        }

        p {
            font-family: 'Microsoft YaHei' , Arial, Helvetica, sans-serif;
            font-style: italic;
        }

        body {
            font-size: 16px;
            /* 这个数字后面不要加单位 */
            /* 实际开发中我们更加提倡用数字 */
            font-weight: 200;
        }

        .bold{
            font-weight: bold;
        }

        em {
            /* 将原本倾斜的字体变成不倾斜 */
            font-style: normal;
        }

        /* 使用复合属性 */
        div {
            /* 复合属性：简写的方式 节约代码*/
            /* font: font-style font-weight font-size line-weight font-family; */
            /* 注意一定要按照顺序，不能够颠倒顺序 */
            /* 必须保留 size 和 family */
            font: italic 700 16px '黑体';
        }

    </style>
</head>
<body>
    
    <h2>老师的秘密</h2>
    <p>深夜他们从梦中呵醒他</p>
    <p>军刀响彻地牢</p>
    <p>命令的声音。在恍惚中</p>
    <p class="bold">晃动着幽灵般骇人的黑影</p>
    <p>他们推开他，步入深邃开裂的走廊</p>

	<!-- 本来em是斜体的，这里通过css改成非斜体 -->
    <em>下课时候的你</em>
    <br>

    <div>三生三世十里桃花</div>

</body>
</html>

测试效果

字体属性

Eg2: 文本属性

源代码

<!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 {
            /* 预定义。16进制，rgb代码 */
            /* color: #52df01; */
            color: rgb(204,0,255);

            /* 下划线 */
            /* text-decoration: underline; */
            
            /* 删除线 */
            text-decoration: line-through;
            
            /* 上划线 */
            /* text-decoration: overline; */
        }

        h1 {
            /* left , right ,center */
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        p {
            font-size: 24px;
            /* 首行缩进20个pixels */
            /* text-indent: 20px; */
            /* em是一个相对的单位,为当前元素x个文字的大小 当前元素font-size 的大小*/
            text-indent: 2em;
        }

        .zhongguoren{
            /* 文字本来默认是16px */
            line-height: 36px;
        }

    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
    
    <!-- 颜色设置的三种基本方法 -->
    <div>hello world</div>

    <div>装饰文本</div>

    <a href="#">回忆的链接</a>

    <p>人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大</p>

    <p>可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能.</p>
    <p>人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学。人工智能是包括十分广泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等.</p>

    <!-- 行高可以从第一行的下沿往上量 -->
    <div class="zhongguoren">中国人</div>

</body>
</html>

测试效果

测试效果2

写在最后

注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程这一课程的学习记录，主要供自己的学习分享

各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知

FeverTwice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS (Basic) Chapter3(Pink) 文本外观

文章目录1. CSS文本外观知识点字体属性2. 示例Eg1: 字体属性源代码测试效果Eg2: CSS基础选择器源代码测试效果Eg3: CSS类选择器画盒子源代码测试效果Eg4: 类选择器多类名源代码测试效果写在最后1. CSS文本外观知识点字体属性font-size 字体大小，记得单位后面要加上pxfont-family 字体形式，如黑体或者宋体，微软雅黑font-weight 字体的粗细，加粗的700不加粗的400，不用加单位line-weight 行高font-style 只有两个.
复制链接

扫一扫

专栏目录