初学CSS笔记

本文将简单介绍下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. 由于就近原则,所以一般内联样式的优先级都是高于内部和外部样式表的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,083评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,506评论 0 40
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 5,356评论 1 3
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 4,410评论 0 0