HTML学习笔记:加载CSS样式

HTML页面加载CSS样式的四种方法

1.在标签内部添加css样式

  • 写好HTML代码后,在标签页内,直接写CSS代码
  • 例如<h1>hello</h1>,添加字体颜色样式之后,<h1 style="color:#434343">hello</h1>

示例test.html

(css的属性请自行百度,这里不做解释)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试CSS样式</title>
</head>

<body>
    <div style="text-align: center; background-color: antiquewhite; font-size: 40px">
    Welcome&nbsp;to&nbsp;rumosky.com!
    </div>
    <div style="text-align: center;">
    <h1 style="font-size: 30px">hello world</h1>
        I love rumosky.com!
    </div>
    <hr>
    <div style="text-align: center; background-color: #FFFFFF; color: #717171;">
    Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved
    </div>
</body>
</html>

1.png

2.在head头部添加css样式

  • 写好HTML代码后,在<head>和</head>直接,添加CSS代码。
  • 在头部这样添加:<style type="text/css">(这里写CSS代码)</style>
  • css书写方式请仔细看示例代码的注释。

示例test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试CSS样式</title>
    <style type="text/css">
        #header {text-align: center;
                 background-color: antiquewhite; 
                 font-size: 40px}
        .body {text-align: center;}
        .footer {text-align: center; background-color: #FFFFFF; color: #717171;}
        h1 {font-size: 30px;}
        /* 说明:.xxx的样式需要用class="xxx"才可以用 
                #xxx的样式需要用id="xxx"才可以用
                总结的来说:#用id调用,.用class调用
                直接在开头写HTML内置的标签,会修改相应标签的样式
        */
    </style>    
</head>

<body>
    <div id="header">
    Welcome&nbsp;to&nbsp;rumosky.com!
    </div>
    <div class="body">
    <h1>hello world</h1>
        I love rumosky.com!
    </div>
    <hr>
    <div class="footer">
    Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved
    </div>
</body>
</html>

1.png

3.@import方法引入外部css文件

  • 上面两个方式如果css样式太多,会让页面看起来很乱,不方便阅读。
  • 将css代码单独存在一个xxx.css文件里,然后在<style type="text/css">和</style>直接加入@import url("style.css")语句即可。URL是css文件的保存路径。
  • 具体使用请仔细看示例代码的注释。

示例test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试CSS样式</title>
    <style type="text/css">
    @import url("style.css");
    /* @import有三种写法:
          @import url("style.css");
          @import url(style.css);
          @import "style.css";
以上3种方式都有效。当使用url(url)的方式时,包住路径的引号可有可无;当直接使用url时,包住路径的引号必须保留。*/
    </style>
</head>

<body>
    <div class="header">
    Welcome&nbsp;to&nbsp;rumosky.com!
    </div>
    <div class="body">
    <h1>hello world</h1>
        I love rumosky.com!
    </div>
    <hr>
    <div class="footer">
    Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved
    </div>
</body>
</html>

示例style.css

.header {
    padding: 20px 0 20px 15px;
    font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
    font-weight: 600;
    text-align: center;
    background-color: #444444;
    color: #FFFFFF;
    text-align: center;
}
.body {
    font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
    background-color: #FAFBFC;
    color: #444444;
    text-align: center;
}
.footer {
    padding: 20px 0 20px 15px;
    background-color: #FFFFFF;
    color: #717171;
    text-align: center;
}

2.png

4.link方法引入外部css文件(推荐)

  • 与@import方法相比,link兼容性更好,加载速度更快,有利于网站SEO优化。
  • 将css代码单独存在一个xxx.css文件里,然后在<head>和</head>之间写下<link rel="stylesheet" href="css文件保存路径" type="text/css">即可
  • 推荐使用此方法写css样式。

示例test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试CSS样式</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div class="header">
    Welcome&nbsp;to&nbsp;rumosky.com!
    </div>
    <div class="body">
    <h1>hello world</h1>
        I love rumosky.com!
    </div>
    <hr>
    <div class="footer">
    Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved
    </div>
</body>
</html>

示例style.css

.header {
    padding: 20px 0 20px 15px;
    font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
    font-weight: 600;
    text-align: center;
    background-color: #444444;
    color: #FFFFFF;
    text-align: center;
}
.body {
    font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
    background-color: #FAFBFC;
    color: #444444;
    text-align: center;
}
.footer {
    padding: 20px 0 20px 15px;
    background-color: #FFFFFF;
    color: #717171;
    text-align: center;
}

2.png

总结:

  • HTML页面添加css样式,总的来说,只有两种。
  • 1,在HTML文本内部书写CSS样式;2,导入外部的CSS样式文件到HTML文件。
  • 内部书写有两种:在标签里分别书写和在head头部之前统一书写。
  • 外部导入也有两种:@import方法和link方法。
  • @import方法和link方法都可以简化HTML代码,方便阅读。但是link加载速度快,兼容性好。推荐使用link。
  • 相对于在内部书写,外部书写CSS方便后期修改。否则修改一个<p>标签样式就需要修改所有HTML文件,很麻烦。
Last modification:April 14th, 2019 at 12:57 am
^_^您的每一分钱,都是对我最大的鼓励!

2 comments

  1. 空灵使者。

    真棒!超级棒!啦啦啦!

    1. 如默
      @空灵使者。

      可以可以,

Leave a Comment