记事本怎么写css外部样式,怎么没有效果?

html-css07

记事本怎么写css外部样式,怎么没有效果?,第1张

HTML 代码-01

打开以上的 HTML 可以看到什么都没有, 因为 div 并没有设置宽高和颜色等...

打开 HTML-01

先书写一段 HTML 代码为一会儿的 Css 样式做准备

新建记事本

在同级下创建一个 *.txt 记事本文件 ( 本次选择建在同级, 且命名为 index, 有需要也可以放在 css 专属文件夹 或是 styles 文件夹都行 )

笔记本书写 css 样式

在笔记本中书写 Css 代码, 并保存 ( 完成后关闭 )

更改后缀名

关闭后更改文件的后缀名为 index.css, 并在 HTML 中启用 ( 连接 )

HTML 代码-02

连接好了再次打开 HTML 文件就可以看到:

打开 HTML-02

附录: 详细的 Css 代码

Css 示例代码

CSS是一门指定文档该如何呈现给用户的语言。

一、CSS帮助您将文档信息的内容和如何展现它的细节相分离

创建html文档

创建样式表

在与前面相同的目录中,新建另一个文本文件。该文件将成为您的样式表。请将它命名为:style1.css

在您的CSS文件中,复制、粘贴下面的行,并保存该文件:

二、连接您的文档和样式表

为将您的文档和样式表相连,请编辑您的HTML文件。并添加下面高亮的行:

保存该文件并刷新您的浏览器。该样式表将首字母显示为红色,如下所示:

三、rel=“stylesheet”是什么意思呢 

范例中呈现的是标准HTML <link>标签嵌入css档案的写法,其中「rel="stylesheet" type="text/css"」所代表的意思,就是告诉浏览器要导入一个在外部的css档案,透过href导入名为xxxx.css的样式档案。

直接再项目里面创建一个XXXX.css的文件,然后把页面的样式写到这个css拓展名的文件中就行,然后html页面里面直接加入这个标签就行,只是在href的后面写上对应CSS文件的路径就行,<link rel="stylesheet" type="text/css" href="XXXX.css" />

注:一个HTML文件中可以有多个link标签