零基础学网页—CSS的调用方式有哪些？

么是css的调用方式？

简单来讲，就是解决把css代码写在哪里的问题，这块内容之前在课堂上演示过，这里再用文字说明一下，权当复习。

大体有以下四种方式：

外联式样式表；
内嵌样式表；
元素内定；
导入样式表

1，外联式样式表

添加在HTML的头部信息标识符< head>里：

<head> 
        <link rel="stylesheet" href="style.css" type="text/css"> 
</head>

其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。

2，内嵌样式表

添加在HTML的头部信息标识符< head>里：

<head> 
      <style type="text/css"> 
             <!-- 样式表的具体内容 --> 
      </style> 
</head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。

3，元素内定

语法：

<Tag style="properties">网页内容</tag>

举个例子：

<p style="color: blue; font-size: 10px">CSS实例</p>

上面例子的代码说明：

用蓝色显示字体大小为10px的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势——即内容结构和格式控制分别保存。

4，导入样式表(高级用法，暂时先放下）

语法：

<style type="text/css"> 
        <!-- @import url("css/base.css"); --> 
</style>

其中外部引用CSS主要用到两种方式link和@import

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

link和@import存在如下差别：

差别1：老祖宗的差别。link属于HTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

从上面的分析来看，还是使用link标签比较好。

课后练习：

步骤一：新建一个名为index.html的网页。

步骤二：在index.html网页文档里加入两个p标签，分别在p标签中加入内容（内容随意）

步骤三：尝试用上面提到的前三种方式，用css代码改变p标签内容的显示格式。

SS文本属性

CSS text（文本）属性就是设置文本的外观，比如字体颜色、对齐方式、缩进、行间距等。

文本颜色

属性名：color。

属性值：

颜色英文单词：color：red;

16进制颜色值：color：#000000;

RGB代码：color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在开发中常用的是十六进制写法。

代码示例：

<head>
  <style>
  		/* 文本颜色属性 */
        .red {
            color: red;
        }
        .colorNum {
            color: #f00;
        }
        .colorRgb{
            color: rgb(255, 0, 0);
        }
  </style>  
</head>
<body>
     <!-- 文本颜色属性 -->
    <p class="red">我是文本属性的单词颜色设置</p>
    <p class="colorNum">我是文本属性的16进制颜色设置</p>
    <p class="colorRgb">我说文本属性的rgb颜色设置</p>
</body>

代码运行界面

文本对齐方式

属性名：text-align。

属性值：

“text-align: left”：默认值，文本左对齐。

“text-align：center”：文本居中对齐。

“text-align：right”：文本右对齐。

代码示例：

<head>
  <style>
  		/* 文本对齐方式 */
        .l {
            text-align: left;
        }
        .cen {
            text-align: center;
        }
        .ri {
            text-align: right;
        }
  </style>  
</head>
<body>
    <!-- 文本对齐方式 -->
    <p class="l">文本左对齐</p>
    <p class="cen">文本居中对齐</p>
    <p class="ri">文本右对齐</p>
</body>

运行界面：

文本装饰

属性：text-decoration。

属性值：

“text-decoration：none”：默认值，没有装饰线。

“text-decoration：underline”：给文本添加下划线。

注意：a标签中自带下划线，可以使用默认值属性去除a标签的下划线。

“text-decoration：overline”：给文本添加上划线。

“text-decoration：line-through”：给文本添加删除线。

代码示例：

<head>
  <style>
  		/* 文本装饰线 */
        .nor {
            text-decoration: none;
        }
        .underl {
            text-decoration: underline;
        }
        .upl {
            text-decoration: overline;
        }
        .lineTh {
            text-decoration: line-through;
        }
  </style>  
</head>
<body>
    <!-- 文本装饰 -->
    <p class="nor">文本装饰线：默认状态</p>
    <p class="underl">文本装饰线：文本添加下划线</p>
    <p class="lineTh">文本装饰线：文本添加删除线</p>
    <p class="upl">文本装饰线：文本添加上划线</p>
    <a href="#">我是超链接标签，文本自带下划线</a><br>
    <a href="#" class="nor">我是超链接标签，文本自带下划线。使用默认值属性，可去除文本下划线</a>
</body>

运行界面：

文本缩进

属性名：text-indent。通常指段落首行缩进。

属性值：px或em。

em是一个相对单位，

如果当前元素已经设置文字大小，就按照当前元素1个文字的大小显示缩进。

如果当前元素中没有设置，则按照父元素的1个文字大小，即1个em=16px显示缩进。

代码示例：

<head>
  <style>
  		/* 文本缩进 */
        .indEm {
            text-indent: 2em;
            /* em是一个相对单位，
            在没有设置文字大小时，按照默认字体大小，即16px显示。
            设置了文字大小，则按照设置的文字大小，几个em就是几个文字大小进行显示。
            */
        }
        .indPx {
            /* 像素是绝对单位，设置几就是几 */
            text-indent: 32px;
        }
  </style>  
</head>
<body>
    <!-- 文本缩进 -->
    <p class="indPx">我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    </p>
    <p class="indEm">我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    </p>
</body>

运行界面：

行间距

属性名：ling-height。用于设置文本的行高。即行与行之间的距离。

行间距=文本高度+上间距+下间距。（上间距=下间距）

行间距调整就是设置的上下间距的高

属性值：px或em。

代码示例：

<head>
  <style>
  		/* 行间距 */
        .lH {
            line-height: 3em;
        }
  </style>  
</head>
<body>
    <!-- 行间距 -->
    <p class="lH">
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
         我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
          我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
    </p>
</body>

运行界面：

CSS引入方式

分为三类：行内样式表（行内式）、内部样式表（内嵌式）、外部样式表（链接式）

行内样式表：

位置：直接写在元素的开始标签中。

特点：书写内容少，权重级别高，只能控制一个标签，结构样式混乱。

语法：style=”color: red;”

注意：多个属性之间使用空格分隔。

代码示例：

<p style="color: red;">行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性。</p>

<p style="color: red; font-size:28px;">行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性和字体28px。</p>

内部样式表（内嵌式）

位置：在head标签下，和title标签并列。样式属性均包含在style标签中。

特点：部分结构与样式相分离，还是在同一html文件上。

语法：

<style>
p {
color: red;
font-size: 28px;
}
</style>

代码示例：

<head>
 	<title></title>
	<style>
        .styleP {
            color: red;
            font-size: 32px;;
        }
	</style>
</head>
<body>
	<!-- 内部样式表 -->
    <p class="styleP">内部样式表：样式属性写在同一个html文件中的head标签里，和title标签并列。</p>
</body>

外部样式表（链接式）

第一步：创建index.css文件，在文件中输入样式属性，不用任何标签。

第二步：在html文件的head标签中，添加link标签，引入css文件。

第三步：给html文件中需要添加属性的元素添加选择器名称。

特点：结构和样式全局分离，一个css文件可以控制多个html页面。

注意：在css文件中只有样式没有标签，即直接书写标签器和属性，不要写style标签。

代码示例：

第一步：新建index.css文件，设置样式属性。

* {
    margin: 0;
    padding: 0;
}
.linC {
    font-size: 32px;
    color: blue;
}

第二步：在html文件的head标签中添加link标签引用css文件。

<head>
  	<title>CSS样式引入方式</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="./index.css">
</head>

第三步：在标签中调用属性。

<body>
   	<!-- 外部样式表 -->
    <p class="linC">
        外部样式表：<br>
        第一步：新建一个css文件，文件中直接编辑样式属性，不需要添加style标签。<br>
        第二步：使用css文件的html文档，应该在其head标签中添加link标签选择css文件的存储位置,<br>
        第三步：调用css文件中的样式。
    </p>
</body>

运行界面：

以上就是今天学习的内容，明天继续学习CSS的相关内容，今天就到这里了，各位晚安！

webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。

初始化示例工程

首先我们创建一个目录webpack-css，用npm初始化，然后在本地安装 webpack：

mkdir webpack-css
cd webpack-css
npm init -y
npm install webpack webpack-cli --save-dev

目录结构、文件和内容如下：

  webpack-css
 |- package.json
 |- /dist
   |- index.html
 |-webpack.config.js

其中dist/index.html文件内容为：

<!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>webpack 资源管理</title>
    <script src="bundle.js"></script>
</head>
<body>
      <div class="css_demo">css 资源管理</div>
</body>
</html>

webpack.config.js的文件内容如下：

 const path = require('path');
 module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
   },
 };

package.js的文件内容如下：

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0"
  }
}

加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置中添加这些 loader：

npm install --save-dev style-loader css-loader

修改webpack.config.js添加加载CSS：

const path= require('path')

module.exports={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会按逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的 js 文件中使用 import './style.css'。现在，在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中。

在src的目录下创建 style.css 文件，src/style.css文件内容如下：

.css_demo {
  color: red;
}

在src/index.js的文件中引入style.css：

import './style.css'

执行打包命令

npm run build

> webpack-css@1.0.0 build D:\project\mockjs\webpack-css
> webpack

asset bundle.js 3.58 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 8.9 KiB
  modules by path ./src/ 679 bytes
    ./src/index.js + 1 modules 346 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 333 bytes [built] [code generated]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 1573 ms

再次在浏览器中打开 dist/index.html，你应该看到 css 资源管理现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为 <style> 标签是由 JavaScript 动态创建的），并查看页面的 head 标签。它应该包含 style 块元素，也就是我们在 index.js 中 import 的 css 文件中的样式。

效果

注意，在多数情况下，你也可以进行压缩 CSS，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcss, sass 和 less 等。

在线咨询

上一篇：在HTML页面中嵌入其他页面的方法-零基础自学网页制作
下一篇：js复制富文本/网页内容到黏贴板-clipboard-js

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

零基础学网页—CSS的调用方式有哪些？

SS文本属性

CSS引入方式

初始化示例工程

加载 CSS

您的项目需求