css中的外链是，内链式，嵌入式，有什么区别

html-css026

css中的外链是，内链式，嵌入式，有什么区别,第1张

1.首先，从功能上来说，这3个实现的功能是一样的，都能够达到对内容进行排版修饰。

2.但是，从用法上来说，他们的使用方式是不同的，下面我们来一一区分：

第一种，外部式，是单独写一个以.css为扩展名的文件，然后在<head></head>中使用<link>标签，将css样式链接到html中

举个例子：<link href="css样式的名字（一般自己取）.css" rel="stylesheet" type="text/css">

这里需要注意的是，rel="stylesheet"和type="text/css"是固定写法，不可修改

第二种，嵌入式，这个可以理解为嵌套，现在<body></body>文本中写下需要的元素标签，比如span，然后在<head></head>中单独写一个css样式

举个例子：

<head>

<style type="text/css">

span{color:re}

</style>

</head>

<body>

<p>莱昂纳多演的<span>了不起的盖茨比</span>非常好看。</p>

</body>

这里就是用嵌入式，对了不起的盖茨比设置颜色，不过，设置的具体样式，我们写在<head></head>中，在<body></body>中只对要设置样式的内容加入元素标签。

第三种，内联式，这个是3个里面最容易的，我们既不需要另写一个以“.css"为扩展名的文件，也不需要单独在<head></head>中设置样式，这里，我们可以直接写在<body></body>的元素标签中

举个例子：

<body>

<p>莱昂纳多演的<span style="color:red">了不起的盖茨比</span>非常好看。</p>

</body>

最后，我们来说一下优先级或者权重值（也叫做权值，这3个说法实际一个意思）

这个涉及到以后学习的内容，我在这里先补充下：

内联样式的权值为：1000

ID选择器的权值为：100

类或伪类的权值为：10

元素和伪元素的权值为：1

连接符和通配符（*）的权值为0

继承的权值连0都没有(如果不想这样理解，可以理解为继承的权值是所有里面最小最小的）

那现在我们来看内联式，它是1000，所以内联式，外部式，嵌入式都有的情况下，权重最大的执行，所以此时是内联式的样式

外部式和嵌入式的权值在一样的情况下，浏览器会执行覆盖命令，所以写在后面的会被执行

a:link { text-decoration: none}

a:visited { text-decoration: none}

a:hover { text-decoration: underline}

a:active { text-decoration: underline}

注意：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效，a:active 必须位于 a:hover 之后才能生效。

linkvisitedhoveractive解释及正确顺序：

a:link 选择器设置指向普通的、未被访问页面的链接的样式

a:visited 选择器用于设置指向已被访问的页面的链接

a:active 选择器用于活动链接

a:hover 选择器用于选择鼠标指针浮动在上面的元素。

text-decoration 属性大多用于去掉链接中的下划线：

例如：a:link{text-decoration：none}看到别人总结的两点参考下记忆：

在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。

“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。

再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active

扩展资料：

css链接link时，链接可以使用任何css属性,包括字体.颜色.背景等等. 链接有四个状态,可在四个状态时设置不同的属性 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover -

当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后。