如何创建 CSS
程序员文章站
2022-12-21 19:52:56
如何插入样式表? 代码应该写到什么地方呢? 代码分为三种插入方式,接下来笔者给园友们介绍有哪些插入方式: 嵌入式、外链式、行内式。 嵌入式 什么是嵌入式? 嵌入式就是将写好的 代码嵌入到 文件中,嵌入式是通过 中的 标签将 代码嵌入到 网页当中的。 语法规则如下: 如果我们使用的是 的文档, 标签中 ......
如何插入样式表?
-
css
代码应该写到什么地方呢? -
css
代码分为三种插入方式,接下来笔者给园友们介绍有哪些插入方式: 嵌入式、外链式、行内式。
嵌入式
什么是嵌入式?
- 嵌入式就是将写好的
css
代码嵌入到html
文件中,嵌入式是通过html
中的style
标签将css
代码嵌入到html
网页当中的。 语法规则如下:
选择器{属性:值;属性:值;}
<!doctype html> <html lang="en"> <head> <meta charset="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"> /*书写css代码块的地方*/ 选择器{属性:值;属性:值;} </style> </head> <body> </body> </html>
- 如果我们使用的是
html5
的文档,style
标签中的type
属性可以省略掉。 注意:
stype
标签它可以出现html
中的任何地方,但是我们一般会将它放置在head
标签中。
嵌入式实例
- 接下来让我们进入嵌入式实践,实例内容如下:将
div
宽高度设置为300
像素和div
的边框颜色设置为红色,以及div
中的h1
标签字体颜色设置为红色。 代码块
<!doctype html> <html lang="en"> <head> <meta charset="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 charset="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> <div> <h1>微笑是最初的信仰</h1> </div> </body> </html>
结果图
行内式
什么是行内式?
- 将css代码写在html标签的style属性当中。
- style是一个通用的属性,每一个标签都拥有这个属性。
- 语法规则如下:
- 单个属性的用法
<标签名 style="属性:值;"></标签名>
- 多个属性的用法
<标签名 style="属性:值;属性:值;....."></标签名>
- 接下来让我们进入行内式实践,并且实现以下功能:将
div
宽高度设置为300
像素和div
的边框颜色设置为红色,以及div
中的h1
标签字体颜色设置为红色。 - 代码块
<!doctype html> <html lang="en"> <head> <meta charset="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>
- 结果图
总结
- 使用嵌入式和行内式的方式,它只能作用于当前的
html
页面当中。 - 使用外链式的方式,它可以作用于多个
html
页面当中。 - 笔者推荐使用外链式的方式编写
css
代码。
上一篇: vmware上安装centos7虚拟机
下一篇: 重温《NoSQL精粹》