1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > css引入方式及常用选择器 css引用的两种方式 link和@import的区别 – CSS – 前端 css中白色

css引入方式及常用选择器 css引用的两种方式 link和@import的区别 – CSS – 前端 css中白色

时间:2021-04-13 14:30:25

相关推荐

css引入方式及常用选择器 css引用的两种方式 link和@import的区别 – CSS – 前端 css中白色

<link href=”styles.css” type=”text/css” />

@import引用方式如下:

<style type=”text/css”>@import url(“styles.css”);</style>

差别1 :适用范围不同 @import可以在网页页面中使用,也可以在css文件中使用,用来将多个css文件引入到一个css文件中;而link只能将css文件引入到网页页面中。 差别2: 功能范围不同 link属于XHTML标签,而@import是CSS提供的一种方式,link标签除了可以加载CSS外,还可以定义RSS,定义rel连接属性等,@import就只能加载CSS。

差别3: 加载顺序不同 当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

差别4: 兼容性 由于@import是css2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

差别5: 控制样式时的差别 使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。

1、先启动DW软件,新建文档,文档类型选择【</>HTML】-【XHTML1.0】,然后点击【创建】。

2、点击创建后,DW会为你创建一个HTML文件。大家在body标签中加入一个div标签组。

3、然后在div标签中输入下图中的代码,style代表了这个div直接引入了CSS属性值。(div的宽、高、字体颜色),这样就成功啦。属性值要在英文的引号中,否则是不起作用的呢。

嵌入式引入CSS样式方法

1、大家创建一个HTML页面,在body标签中添加一个div标签组。

2、然后在上面的head标签中(title标签下),输入引用CSS的代码style标签。(如下图)

3、然后在标签中输入一个CSS名称以及相关的样式。要注意看下图的格式,别少输入了。

4、最后在下方的div标签中,引入cass,并输入对应的样式名称。(如下图)这样就成功引入了CSS样式啦。这就是嵌入式的方法。

css选择器优先级核心:每个选择器本身有优先级,作用范围越具体优先级越高。

CSS优先级从高到低分别是:

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器选择器

当CSS样式的规则由多个选择器组成时,id选择器的权值为1000,class选择器为100,标签选择器为10,按权值求和的记过高低决定哪个优先。当两个css规则的权值相同时,谁更具体用谁,也就是权值高的选择器作用的越具体优先级越高。当两个选择器规则和权值都是一样,后面样式会覆盖前面的!

hbuilder只是开发工具,和别的开发工具一样,怎么把css写到html里,有4种方法:

1、行内样式

行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方式,同时也是修改最不方便的样式。

【示例1】针对段落、<h2> 标签、<em> 标签、<strong>标签以及 <div> 标签,分别应用 CSS 行内样式。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>行内样式</title>

</head>

<body>

<p>行内元素,控制段落-1</p >

<h2>行内元素,h2 标题元素</h2>

<p>行内元素,控制段落-2</p >

<strong>行内元素,strong 比 em 效果要强</strong>

<div>

行内元素,div 块级元素</div>

<em>行内元素,em 强调</em>

</body>

</html>2、内嵌式

内嵌式通过将 CSS 写在网页源文件的头部,即在 <head> 和 <head> 之间,通过使用 HTML 标签中的 <style> 标签将其包围,其特点是该样式只能在此页使用,解决行内样式多次书写的弊端。

【示例2】为段落设置内嵌式样式书写方法,减少代码量。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>内嵌式</title>

<style type="text/css">

p{

text-align: left; /*文本左对齐*/

font-size: 18px; /*字体大小 18 像素*/

line-height: 25px; /*行高 25 像素*/

text-indent: 2em; /*首行缩进2个文字大小空间*/

width: 500px; /*段落宽度 500 像素*/

margin: 0 auto; /*浏览器下居中*/

margin-bottom: 20px; /*段落下边距 20 像素*/

}

</style>

</head>

<body>

<p>这是一个文本段落,这是一个文本段落,这是一个文本段落。</p >

</body>

</html>3、链接式

链接式通过 HTML 的 <link> 标签,将外部样式表文件链接到 HTML 文档中,这也是网络上网站应用最多的方式,同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离,实现结构层和表示层的彻底分离,增强网页结构的扩展性和 CSS 样式的可维护性。

4、导入样式

导入样式使用 @import 命令导入外部样式表。导入样式有 6 种书写方式:

@import daoru.css;

@import daomxss;

@import "daoru.css";

@import url(daoru.css);

@import url(daoru.css);

@import url("daoru.css");

以上就是css怎么嵌入html?的详细内容。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。