CSS学习记录——三种样式表

------------恢复内容开始------------

学HTML的时候还没有想到要写博客记录的习惯，所以现在博客记录就直接从css开始吧。

CSS的学习我选择听了B站上的一个课程，是尚硅谷的课程，感觉效果还不错，学习方法就是跟着视频一起敲代码，相关的笔记直接打在了注释里，所以以后这里的记录主要就是以代码的形式为主了。

内联样式表和内部样式表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内联样式表</title>
        <!-- 也可以将CSS样式写道head的style标签里 -->

        <style type="text/css">
        /* 这里是内部样式表 */
                 p{
                     /* 这里，是一个选择器 */
                     color: red;
                     font-size: 90px;
                 }
        </style>
    </head>
    <body>
        <!-- 
            可以将CSS样式编写到元素的style属性当中
            将样式直接编写到style属性当中，这样的样式几位内联样式
            内联样式只对当前的元素的内容起作用
            内联样式不方便重复使用
            内联样式不方便后期的维护，属于结构和表现的结合
         -->
         <p style="color: red;font-size: 30px;">谁知盘中餐，粒粒皆辛苦。</p>
    </body>
</html>

外部样式表：

<!-- 将样式表编写到外部CSS的文件中，然后通过link标签来将外部的CSS文件引入到当前页面中
    这样外部的css样式表会应用到当前页面
 -->
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>外部样式表！</title>
     <link rel="stylesheet" type="text/css" href="style.css"/>
     <!-- rel和ytpe为固定值；href为相对路径 -->
 </head>
 <body>
     <p>外部样式表！</p>
     <!-- 将css样式统一编写到外部样式表中，完全使结构和样式分离，
        可以使样式表在不同的页面中使用
        将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存加快用户的访问速度，提高用户体验 
     -->
    <!-- 在开发中，最推荐使用外部css使用方式 -->
 </body>
 </html>

外部样式表需要单独写一个css文件，这里是一个极其简单的css文件：

p{
    color: red;
    font-size: 30px;
}

CSS学习记录——三种样式表

猜你喜欢