请详细说明HTML文件使用css样式的几种方法?

html-css034

请详细说明HTML文件使用css样式的几种方法?,第1张

1.

第一种方法是行内样式,就是直接把CSS代码添加到html的标签中,作为标签的一种属性存在。

2.

第二种方式是内嵌样式,就是将CSS代码添加到<head></head>之间,并用<style></sty...

3.

第三种方法是链接样式,就是将“页面内容”和“样式代码”分类成两个文件或多个文件,实现html代码和css代码的完全分离。

这里分享下在css中为字符串中的每一行设置样式的方法。

操作设备:联想电脑

操作系统:win10

代码编辑器:zend studio 10.0

1、首先新建一个html文件,命名为test.html,在test.html文件内,使用p标签创建一行字符,用于测试。

2、在test.html文件内,给p标签添加一个class属性,用于样式的设置。

3、在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

4、在css标签内,通过class属性和“:first-letter”选择第一个字符,使用color属性设置它为红色。

5、最后在浏览器打开test.html文件,查看实现的效果。

即使用style属性,将CSS直接写在HTML标签中。例如:<p style=color:red这行段落将显示为红色。</p注意:style属性可以用在<body内的所有(X)HTML标签上,但不能应用与<body以外的标签,如<title<head等标签。二,嵌入式样式表(Embedded Style Sheets)嵌入式样式表使用<style</style标签嵌入到(X)HTML文件的头部中,代码如下:<head<style type=text/css<!--.class{color:red} -- </style</head注意:对于一些不能识别<style标签的浏览器,使用(X)HTML的注释标签<!-- 注释文字 --把样式包含进来。这样源码天空,不支持<style标签的的浏览器会忽略样式内容,而支持<style标签的浏览器会解读样式表。三,外部样式表(Link Style Sheets)在<head标签内使用<link标签将样式表文件连接到(X)HTML文件中。代码如下: