首页 > 作文

如何创建 CSS

更新时间:2023-04-07 06:28:53 阅读：评论：0

如何插入样式表？

css代码应该写到什么地方呢？css代码分为三种插入方式，接下来笔者给园友们介绍有哪些插入方式：

嵌入式、外链式、行内式。

嵌入式

什么是嵌入式？

嵌入式就是将写好的css代码嵌入到html文件中，嵌入式是通过html中的style标签将css代码嵌入到html网页当中的。

语法规则如下：

选择器{属性:值;属性:值;}

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>嵌入式&l中子是什么t;/title>    <style type="text/css">        /*书写css代码块的地方*/        选择器{属性:值;属性:值;}    </style></head><body></body></html>

如果我们使用的是html5的文档，style标签中的type属性可以省略掉。

注意：stype标签它可以出现html中的任何地方，但是我们一般会将它放置在head标签中。

嵌入式实例

接下来让我们进入嵌入式实践，实例内容如下：将div宽高度设置为300像素和div的边框颜色设置为红色，以及div中的h1标签字体颜色设置为红色。

代码块

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>嵌入式</title>    <style type="text/css">        div{            width: 300px;            height: 300px;            border:3px solid red;        }        h1{            color: red;        }    </style></head><body>    <div>        <h1>微笑是最初的信仰</h1>    </div></body></html>

结果图

外链式

什么是外链式？

外链式是指书写一个存放css代码的文件，文件的扩展名为.css。然后将其文件放在html文件中的head标签中并且以link标签形式存放在html文件当中。

现在我们创建一个名称为index.css的文件。

大家点击是就ok了

实践效果为：

注意： css文件不能单独的运行，它必须依赖于html文件。

语法规则如下：

<link rel="stylesheet" href="index.css">

link标签中的rel="stylesheet"属性，表示以样式表的关系引入到html文件当中。link标签中的href属性，表示要引入的css文件路径，输入我们要使用的css文件路径，可以使用相对路径和绝对路径。

外链式实例

接下来让我们进入外链式实践，笔者将刚才创建好的index.css文件引入到html文件当中，并且实现以下功能：将div宽高度设置为300像素和div的边框颜色设置为红色，以及div中的h1标签字体颜色设置为红色。

css代码块

div {    width: 300px;    height: 300px;    border: 3px solid red;}h1 {    color: red;}

注意：在这个index.老八所css文件中只能编写css代码，如：选择器{属性：值;}这样的形式。

一个html页面中同时可以引入多个单独的css文件，以link标签的形式引入。

html代码块

<!doctype html><html lang="en"><head>    <meta chart="utf-8">笛卡尔;    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>外链式</title>    <link rel="stylesheet" href="index.css"></head><body南京211大学有哪几所>    <div>        <h1>微笑是最初的信仰</h1>  教师招聘公告  </div></body></html>

结果图

行内式

什么是行内式？

将css代码写在html标签的style属性当中。style是一个通用的属性，每一个标签都拥有这个属性。语法规则如下：单个属性的用法

<标签名 style="属性：值;"></标签名>

多个属性的用法

<标签名 style="属性：值;属性：值;....."></标签名>

接下来让我们进入行内式实践，并且实现以下功能：将div宽高度设置为300像素和div的边框颜色设置为红色，以及div中的h1标签字体颜色设置为红色。代码块

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <title>行内式</title></head><body>    <div style="width: 300px;height: 300px; border: 3px solid red;">        <h1 style="color: red;">微笑是最初的信仰</h1>    </div></body></html>

结果图