列出使用CSS的几种方法,并写出他们的优先级

html-css08

列出使用CSS的几种方法,并写出他们的优先级,第1张

HTML引用CSS的方法有四种:

1.内联式:直接将CSS放在HTML标记中使用,如下:

<p style="color:bluemargin-left:20px">

这是一个段落

</p>

<!--这个段落颜色为蓝色,左边距为20像素-->

使用这种方法可以简单直接地对某个元素定义样式,但是一旦页面元素比较多时,代码会开始繁杂。所以我们进一步使用了另一种方法,内部样式表;

2.内部样式表:把样式表放到页面的<head>标记里面,如下:

<head>

    <style type="text/css" >

        p{color:bluemargin-left:20px}

    </style>

</head>

……

<body>

    <p>这是一个段落</p>

</body>

<!--这个段落将生成和例一一样的效果-->

使用内部样式表可以把css代码和html代码分离,使页面更加整洁,但是我们定义的css样式多了之后,同样页面会变得内容很多,编辑代码也会变得麻烦,我们进一步使用更好的办法,链入外部样式表;

3.链入外部样式表:将样式表保存为一个css文件,在html页面中用<link>标记连接到这个样式表文件,如下:

index.html

<head>

<link href="myStyle.css" rel="stylesheet" type="text/css">

</head>

<body>

<p>这是一个段落</p>

</body>

index.css

p{color:bluemargin-left:20px}

/*定义了段落的颜色为蓝色,左边距为20像素*/

这种方法有效的将css和html分离开来,也使代码工作变得更简单,是现在比较常用的方法。同样的一个样式表文件也可以供多个html页面使用,在制作大量相同样式的页面时,可以减少很大的工作量,而且也有利于我们修改编辑。

4.导入外部样式表:导入外部样式表时使用@import,如下:

<head>

    <style>

        @import url(myStyle.css)

    </style>

</head>

这种方法和第三种方法相似,但是在输入方法更有优势,实质上相当于存在内部样式表中。缺点在于他增加了请求数,加大了浏览器的开销;@import是css2.1的产物,低版本的浏览器将会不支持;

另外,当加载html页面时,link引用的文件会同时加载,@import是等HTML页面内容全部下载下来,再下载@import后面的文件,如果文件内容过大的话没页面会出现无样式的页面,闪烁几下才能正常显示,所以相比link,@import比较不利于用户体验

几种方法的优先级

内联式>外部样式表>内部样式表

个人根据学的时候理解的顺序整理下来的,希望采纳鸭~谢谢~

有什么问题还可以问我~

1、创建使用css样式表有三种,分别是外部样式表,内部样式表和内联样式。下面通过一个小demo演示它们的用法,首先新建一个html文件,放入3个button按钮,给前两个按钮分别设置class属性为btn1和btn2:

2、接着准备一个css文件,命名为demo.css,在文件内写入按钮A的样式,保存css文件:

3、回到刚才的html文件,在style标签中用link标签引入上一步创建的css文件,这就是外联样式的用法,总结就是创建好的css文件内写好样式,然后在html文件中用link标签引入即可,这也是大部分网站使用的方法,因为其引入方便,管理起来也比较方便:

4、接着是内部样式表的使用,这里直接在head标签里创建style标签,在里面加入btn2的样式。对于内部样式表简单的html文件,内部样式是很方便的,但是结构复杂的html文件使用它就会让文件显得很混乱:

5、最后是内联样式的使用,直接在第三个标签内使用style属性加入样式就可以了:

6、最后保存html文件,打开浏览器可以看到三个按钮的样式都出现了。以上就是css样式表的制作方法:

css主要有三种引用方法:

1,内部引用,在html文档中在<style>标签里面写的css样式

<style>

  bdoy{font-size:14px} 

</style>

2,外部引用,用<link>标签引用外部的css文件,将样式引用到html文档来。

<link rel="stylesheet" type="text/css" href="style.css">

3,在标签中使用,使用style属性将当前的标签样式改变。

<div style="color:red"></div>