CSS基本介绍

最新推荐文章于 2022-08-04 18:13:38 发布

Blockchain Explorer

最新推荐文章于 2022-08-04 18:13:38 发布

阅读量405

点赞数

分类专栏： CSS/CSS3 文章标签： CSS @import

本文链接：https://blog.csdn.net/TDCQZD/article/details/82226352

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、什么是CSS

CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。
CSS 与 HTML 和 JavaScript 并称 Web 三大核心技术。
CSS 不区分大小写（但在某些选择器上会区分大小写）

二、注释

CSS中的注释以 /* 开始并以 */ 结束

三、引入方式

1、开发者引入样式，可以有三种形式：

定义在元素身上（行内样式）：这种形式多用于测试，可维护性较差。

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。通过在head标签中嵌套style标签，并使用style标签来定义内联样式
外部文件（外链样式）：任何页面都可以引用。通过在head标签中嵌套link标签，并使用link标签来引入外链样式

2、link标签
href属性：指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的
rel属性：指明被链接文档对于当前文档的关系，一般为stylesheet
3、style标签
type属性：MIME类型如果该属性未指定，则默认为text/css

四、CSS引入示例

1、 CSS引入_@import引入外部的css.html

    <meta charset="UTF-8">
        <title>@import标签引入外部CSS</title>
        <!--扩展知识：模块化合并：尽量少的请求http,请求次数少，体积小-->
        <style type="text/css">
        /*
         *模块化机制 依赖的管理 
         * 显示依赖关系
         */
            /*@import url("../../../css/common.css");
            @import url("../../../css/blue.css");*/
            @import url("../../../css/commonblue.css")
        </style>
    </head>

    <body>
        <div id="css" ></div>

        <br /><br /><br /><br /><br /><br />
        <p>head中styple标签引入CSS</p>
    </body>

2、CSS引入_link引入外部的css.html

<head>
        <meta charset="UTF-8">
        <title>link标签引入外部CSS</title>
        <!--外部文件（外链样式）：任何页面都可以引用。
                通过在head标签中嵌套link标签，并使用link标签来引入外链样式-->
        <link rel="stylesheet" href="../../../css/common.css" />
        <link rel="stylesheet" href="../../../css/blue.css" />
    </head>

    <body>
        <div id="css" ></div>

        <br /><br /><br /><br /><br /><br />
        <p >head中styple标签引入CSS</p>
    </body>

3、CSS引入_styple标签.html

<head>
        <meta charset="UTF-8">
        <title>styple标签引入CSS</title>
        <!--头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。 
         通过在head标签中嵌套style标签，并使用style标签来定义内联样式 -->

        <style type="text/css">
            /*
         *  *字符代表 适用于整个<body>
         */

            * {
                margin: 0;
            }
            /*
             * #标签ID 适用于id="标签ID" 的标签
             */

            #css {
                width: 100px;
                height: 100px;
                background: red;
            }

            p {
                font: "微软雅黑";
                font-size: 20px;
                background: blue;
            }
        </style>
    </head>

    <body>
        <div id="css"></div>

        <br /><br /><br /><br /><br /><br />
        <p>head中styple标签引入CSS</p>
    </body>

4、CSS引入_标签的styple属性.html

<head>
        <meta charset="UTF-8">
        <title>标签的styple属性引入CSS</title>
    </head>

    <body>
        <!--定义在元素身上（行内样式）：这种形式多用于测试，可维护性较差。-->
        <div id="css" style="width: 100px;
                height: 100px;
                background: red;"></div>

        <br /><br /><br /><br /><br /><br />
        <p style="font: '微软雅黑';font-size: 20px;background: blue;">head中styple标签引入CSS</p>
    </body>