HTML结合CSS

引入CSS之内联式

css代码直接写在要设置样式的HTML开始标签中，如果有多条css样式代码中间用英文分号隔开。如下代码：

<p style= "color:red; font-size:12px">设置文本颜色和大小</p>

引入CSS之嵌入式

内联式css代码虽然简单，但是一旦需要设置的样式复杂起来，HTML代码看起来就会显得很混乱。
使用嵌入式CSS样式就可以解决这个问题。把css代码写在<style></style>标签之间。如下代码：

<style>span{color:green;}
</style>

上面代码设置span标签内元素颜色为绿色，嵌入式css样式写在<head></head>标签之间。

引入CSS之外部式

外部css样式也称为外联式，把css代码写在一个单独的外部文件中，文件以“.css”为扩展名，在<head>内使用<link>标签将css外部文件链接到HTML文件中。如下代码：

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

1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

这里就有个问题，为什么要把css代码放在<head></head>之间？

首先把css样式写在<head></head>之间是规范要求的内容。此外，这种做法可以让页面逐步显示，提高用户的体验。如果将样式代码放在文档底部，会使部分浏览器（包括Internet Explorer）不能逐步呈现页面甚至阻止渲染页面。所以这种做法可以防止用户收到空白页面或没有样式的内容。

三种方式的比较

介绍完CSS的三种链接方式，那么问题来了它们谁的优先级最高呢？

在权值相同的情况下，内联式 > 嵌入式 > 外部式。总体来讲，就是最近原则——离被设置样式元素越近优先级越高。所以嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。既<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。

HTML结合JavaScript

引入JavaScript之嵌入式

-使用一个标签<script type="text/javascript">js代码</script>。如下代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>JSdemo1</title></head><body><script type="text/javascript">//向页面弹出一个框，显示内容alert("aaaa");</script></body>
</html>

引入JavaScript之外部式

使用script标签，引入一个外部的js文件

创建一个以".js"为扩展名的文件，然后通过<script type="text/javascript" src="demo.js"></script>引入外部文件。代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>JSdemo2</title></head><body><script type="text/javascript" src="demo.js">//这里就不要写js代码了，将下行代码直接写在外部文件 demo.js 中即可//alert("aaaa"); </script></body>
</html>

1、使用外部式Javascript时，就不要在script标签里面写js代码了，不会执行。
2、最好把<script>标签放在</body>之前

那么问题又来了，为什么<script>标签要放在</body>之前
原因是脚本在下载和执行期间会阻止HTML解析。这样做能保证HTML首先完成解析，将页面尽早呈现给用户。既浏览器不能开始下载脚本，直到整个文档（document）被解析。

总结

本文阐述了HTML结合CSS和Javascript代码的不同方式。
本文讨论了CSS不同链接方式的优先级。
本文给出了CSS和JS代码所置位置的解释。
同时，本文遗留了一个问题：什么是权值？ 让我留在下篇文章再讲述吧。

参考

我的博客园
本文首发

感谢点赞

HTML引入CSS和JavaScript的方式相关推荐

Bootstrap HTML编码规范之引入 CSS 和 JavaScript 文件
引入 CSS 和 JavaScript 文件根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javasc ...
引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
CSS初学之引入css的三种方式（一）
1.引入css的三种方式一.第一种简介第一种:行内样式每一个元素都具备style属性,通过该属性可以设置元素的相关样式缺点: 复用性不高,样式更新麻烦不复合网页标准,h ...
在HTML中加入CSS有三种方式,html引入css的几种方式（复习笔记）
一.html引入css的方式 1.内联样式在html标签内的style属性中设定CSS样式,例如: 你好注:在内联样式里无法写hover样式,并且这种方式不推荐使用,因为它只能改变当前标签样式,多 ...
❗HTML引入CSS的三种常用方式汇总❗
引言 CSS对于HTML来说就像是女生的化妆品,通过CSS的修饰后,网页元素会更加丰富美观,但是使用CSS之前的首要需求就是如何在HTML代码中加入CSS代码,这里就简单列举一下三种常用方法: ps: ...
CSS——在HTML中引入CSS的四种方式
1.HTML标签内联样式 2.style标签内写css 3.link标签导入css样式 <link rel="stylesheet" type="text/css& ...
分别写出引入CSS的3种方式, 特点, 优先级
第一:css的三种引入方式 1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
HTML中引入CSS的三种方式——响应式Web系列学习笔记
1. 行内式行内式是通过标签的style属性来设置元素的样式,其基本语法格式如下. <标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签 ...

HTML引入CSS和JavaScript的方式

高速通道