0
点赞
收藏
分享

微信扫一扫

初学CSS笔记

扒皮狼 2021-09-30 阅读 64

本文将简单介绍下CSS来方便日后的CSS的学习。

CSS 全称 Cascading Style Sheets,中文意思是层叠样式表。如今支持最广泛的是CSS 2.1,同时还有CSS 3也是我们的主要学习内容。

下面我们将列出几种适合初学CSS的学习资源。

  1. CSS 2.1 中文 spec
  2. CSS Tricks
  3. Codrops 炫酷 CSS 效果

接下来,我们将介绍引入 CSS 的几种最基本的用法

  1. 内联样式,把 style 属性写到标签里面

    示例:

    <body style="background-color: gray;">
    <h1 style="text-align: center; color: red;">
    
  2. 不使用 style 属性,使用 style 标签,一般是写在 <head></head> 里面,不写在里面也无所谓。

    示例:

        <style>
            body{
                background-color: gray;
            }
            h1{
                text-align: center; color: red;
            }
        </style>
    
    

    不用在任何一个标签里写 style 属性,导致标签太长。

  1. 外部样式,使用 link 标签引入外部文件,这样避免 style 标签过长,使得文档更加纯粹。

    示例:

      <link rel="stylesheet" href="./a.css">
    

    这会发起一个 对 ./a,css 的GET请求

  1. 在CSS文件里面引入另外一个CSS

    示例:

    a.css

    @import url(./b.css);
    body {
        background-color: gray;
    }
    h1 {
        text-align: center;
        color: red;
    }
    

    在引入 a.css 之前 再引入一个 b.css

注意:
在同时使用多种引入方式时,我们要知道这些引入方式的优先级。

  1. 由于HTML的代码是从上到下执行的,所以 style 标签 (内部样式表) 和 外部样式表一般是没有优先级高低之分的,而是按照就近原则,哪种方式最后执行,哪种优先级就高。
  2. 由于就近原则,所以一般内联样式的优先级都是高于内部和外部样式表的。

举报

相关推荐

初学CSS知识总结

mysql初学笔记

分块初学笔记

10 - 初学指针笔记

Swagger初学习笔记

初学html,css的简单记录

小程序 初学笔记

0 条评论