零基础教你学前端-54、如何添加CSS_外部样式

部样式解决了内联样式的问题，但他也有弊端，主要表现在一下两个方面：

弊端1，内部样式只能作用于一个页面，如果要实现多个页面共享一个样式，就做不到了。

弊端2，随着样式代码的不断增加，在编辑器中，要不停的上下滚动屏幕来编辑样式，很不方便。

解决这些弊端的方法就是使用外部 CSS。

外部 CSS，也叫外部样式，可以通过改变一个文件来改变整个网站的外观！

外部样式，将 CSS 代码放在一个独立的，以 .css 为后缀名的文件中，使 html 页面结构文件和 css 样式文件完全独立开来。

每个HTML页面都必须在 head 元素里添加 <link> 元素，link 是链接的意思。

在 <link> 元素里定义 rel 属性，rel 是 relationship 的缩写，译为关系、关联，值为 stylesheet，表示关联一个样式表。

再定义一个 href 属性，用来设置一个对外部样式表文件的引用，值为 .css 文件的路径。

我们来做个例子。

在 002-add-css 文件夹里创建一个 external-1.html 文件，构建好基础代码。添加 h1 和 p 元素，分别填入一些文本。

再创建一个 external-2.html 文件，构建好基础代码。添加 h1 和 p 元素，分别填入一些文本。

在 002-add-css 文件夹里创建一个 mystyle.css 文件，在这个文件里直接编写样式：

body，空格，花括号，回车，定义样式属性名 background-color，冒号，属性值为 lightblue，分号。

h1，空格，花括号，回车，color，navy，分号，margin-left，20px，分号。

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

前面说到，样式表代码的编写格式很宽松，但是我们编写样式的时候还是要有一定的规范：

选择器和花括号中间用一个空格隔开；

每一条样式声明语句单独一行定义；

两组样式定义用空行来分隔。

样式文件定义好后，在 external-1.html 文件的 head 元素里输入 link，按下回车键或 tab 键，emmet 会为我们自动补全一些代码，我们只需要设置 href 属性的外部样式文件路径就好了。这里我们填入 mystyle.css。保存。

预览页面，第一个页面的样式添加好了。

在 external-2.html 文件的 head 元素里也添加一个 link 元素，设置同样的路径 mystyle.css。保存。

预览页面，第二个页面的样式也添加好了。

不难发现，在 mystyle.css 定义的一套样式，应用到了两个页面上，做到了多个页面的样式共享。

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=55

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

1）字体的属性

font 属性
font-family 属性
font-size 属性
font-weight 属性
font-style 属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一个声明中设置所有的字体属性
font-family	字体名称、inherit	设置字体类型
font-size	xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit	设置字体大小
font-weight	normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	设置字体粗细
font-style	normal、italic、oblique、inherit	设置字体风格

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        font-size: 20px;
        font-family: 隶书;
        line-height: 28px;
      }
      span {
        font: italic 16px 华文彩云;
      }
    </style>
  </head>
  <body>
    <h3>Web 前端技术</h3>
    <span
      >在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
      系统，就必须掌握 Web 前端技术。</span
    >
  </body>
</html>

显示为，

（2）CSS 中链接标签可用的伪类：

a:link
a:hover
a:active
a:visited

CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态	效果
a:link	普通的、未被访问的链接。
a:hover	鼠标指针位于链接的上方。
a:active	链接被单击的时刻。
a:visited	用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。

状态	颜色	背景色	文本修饰
未访问	蓝色	无	无下画线
鼠标移到	黑色	#DDDDDD	下画线
正单击	红色	#AAAAAA	删除线
已访问	绿色	无	无下画线

对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">这是一个链接</a>
  </body>
</html>

显示为，

为什么要按照这样的顺序来使用呢？调整几个伪类的顺序，看看会发生什么。

我们把 a:link 放到最后，效果如下：

从图中可以发现其中的样式属性都被覆盖了。

（3）列表相关的样式属性：

list-style 属性
list-style-image 属性
list-style-position 属性
list-style-type 属性

属性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一个声明中设置所有的列表属性
list-style-image	URL、none	设置图像为列表项标志
list-style-position	inside、outside、inherit	设置列表中列表项标志的位置
list-style-type	disc（默认）、circle、square、decimal 等	设置列表项标志的类型

例子，

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

在线咨询

上一篇：手把手教（超详细）：个人新手如何快速建立一个网站
下一篇：niushop阿里云短信配置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

零基础教你学前端-54、如何添加CSS_外部样式

您的项目需求