网站建设学习（六）——CSS的引入方式

最新推荐文章于 2022-03-07 10:07:00 发布

QJM1995

最新推荐文章于 2022-03-07 10:07:00 发布

阅读量213

点赞数

文章标签： html css 教程

本文链接：https://blog.csdn.net/QJM1995/article/details/86432291

版权

上一篇介绍了框架标签的使用，至此常用html标签已经介绍完毕，一些其他没有介绍的标签也会逐渐在接下来的学习中涉及，本篇引入css，css是层叠样式表，可以理解为对html页面进行美化装饰设计，在执行本篇代码时，需要在同文件夹下建立一个css引入.css文件，来区分css引入的三种方式。

html：

<!--html： hyper text markup language 超文本标记语言

    超级文本：可以对文本进行设计，布局，装饰等等操作
    标记：标签的各种布局，可以进行文本设计，标签包括开始与结束
-->


<!--开始设计一个HTML页面-->

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->

        <style type="text/css">
            h2{
                font-size: 50px;
                color:blueviolet;
            }
        </style>

        <link href="css引入.css" rel="stylesheet"/>

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    <!--css（层叠样式表）可以对页面进行美化装饰，这里介绍html引入css的三种方式-->
    <!--第一种，直接在属性后标识引用-->
        <h1 style="font-size: 50px;color: brown">第一种css引用</h1>
        <!--第一种引用可以直接在样式里进行修改，但是每设计一个都需要重复操作，比较麻烦-->
    <!--第二种在头部head里定义style标签-->
        <h2>第二种css引用</h2>
        <!--根据标签直接引用，但是代码过多不利于维护，同时css代码无法重用-->
    <!--第三种方式在头部head里定义link标签，直接引入css文件-->
        <h3>第三种css引用</h3>
        <!--推荐使用此方式-->

    </body>

</html>

css引入.css：

h3{
    font-size: 50px;
    color: aqua;
}

/*
css语法：
    这里头部的h3是标签，根据h3选择，所以此部分称为选择器
    font-size等称为css属性，用来调整样式的大小，颜色，位置等等
    50px等称为css属性值，即为属性变换的度
    属性与值括在大括号内
*/

网页编程规范参考链接：w3school 在线教程

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。