怎样将下面这段代码中的css样式直接写在HTML中?

html-css020

怎样将下面这段代码中的css样式直接写在HTML中?,第1张

1、首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=""双引号中才可以,如:<p style="color:red">这里文字是红色。</p>。

2、如果想让HTML标签和css样式区分开来,可以采取将css样式代码写在<style type="text/css"></style>标签之间,并且这里的<style></style>可以写在<head></head>标签之间或者<body></body>标签之间,效果都是一样的。

3、以上两种HTML和css的结合都是在同个页面,代码量多的情况下就不好区分了,这时可以创建一个外部css样式文件。右键点击桌面先创建一个记事本文档,然后将文档的扩展名改为“.css”。将该css样式文件与HTML放在同个磁盘中以便调用。

4、将css样式文件创建好后,使用Sublime编辑器打开css样式文件,在文件里面编写相应的css样式。

5、准备好这个css样式文件后,回到HTML文件,在<head></head>标签内使用<link>标签将css样式文件链接到HTML文件内,就完成了。

CSS是样式层叠表,有三种引入方式。下面,我们来看看HTML样式CSS的三种写法吧。

行内样式

CSS可以直接放到行内样式中引入即可,比如代码如下图:

<p style="color: bluebackground: red">

hello world!

</p>

嵌入式

还可以采用潜入方式引入CSS,就是把CSS写到<style>标签中,这种方式比较实用,如下图所示:

<style type="text/css">

h1 {color: red}

</style>

<h1>helloworld</h1>

外部样式表

还有一种叫做外部样式,也就是把CSS写在另外一张页面上,然后再引用到指定页面就可以了,这种也很常见。

@import url(main.css)