小家碧玉txt,BR757,黄一飞 黄一山
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
的文件。
实践效果为:
注意:
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>
结果图
<标签名 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
代码。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论