W.T.的博客

Every day to be a little better

前端-CSS学习笔记01-认识CSS

发表于 更新于 分类于
本文字数： 1.9k 阅读时长 ≈ 2 分钟
邂逅CSS，编写CSS的三种方式，CSS注释，CSS元素类型

1. 认识CSS

  • 层叠样式表（Cascading Style Sheet）
  • 又称串样式列表、级联样式表、串接样式表、阶层式样式表
  • 是为网页添加样式的代码
  • CSS是一种语言？
    • MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言
    • 维基百科解释：是一种计算机语言，但是不算是一种编程语言

2. CSS的历史

  • 早期的网页都是通过HTML来编写的，但是希望HTML页面可以更加丰富

    • 这个时候就增加了很多具备特殊样式的元素：比如i、strong、del等等
    • 后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划
    • 1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1
    • 直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2
    • 在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签
    • 从CSS3开始，所有的CSS分成了不同的模块(modules)，每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容
    • 直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation

  • 总结：CSS的出现是为了美化HTML的，并且让结构(HTML)与样式(CSS)分离

    • 美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等
    • 美化方式二：对HTML进行布局，按照某种结构显示(CSS进行布局 – 浮动、flex、grid)

3. CSS如何编写

  • CSS这么重要，那么它的语法规则是怎么样的呢?

  • 声明(Declaration)一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式

    • 属性名(Property name)：要添加的css规则的名称
    • 属性值(Property value)：要添加的css规则的值

  • 如何将CSS样式应用到元素上?

    • CSS提供了3种方法，可以将CSS样式应用到元素上
      • 内联样式(inline style)
      • 内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
      • 外部样式表(external style sheet)

3.1. 内联样式

  • 内联样式(inline style)，也有人翻译成行内样式

    • 内联样式表存在于HTML元素的style属性之中
    1
    <div style="color: red; width: 18px; height: 18px;"></div>

  • CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

  • 很多资料不推荐这种写法

    1. 在原生的HTML编写过程中确实这种写法是不推荐的
    2. 在Vue的template中某些动态的样式是会使用内联样式的

  • 所以，内联样式的写法依然需要掌握

3.2. 内部样式表

  • 将CSS放在HTML文件<head>元素里的<style>元素之中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <head>
      <style>
        div{
          color: red;
          width: 18px;
          height: 18px;
        }
      </style>
    </head>
    <body>
      <div></div>
    </body>

  • 在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似(原理并不相同)

3.3. 外部样式表

  • 外部样式表(external style sheet) 是将css编写一个独立的文件中，并且通过<link>元素引入进来

  • 使用外部样式表主要分成两个步骤

    • 第一步：将css样式在一个独立的css文件中编写(后缀名为.css)

      1
      2
      3
      4
      5
      6
      /* style.css */
      div{
        color: red;
        width: 18px;
        height: 18px;
      }

    • 第二步：通过<link>元素引入进来

      1
      2
      3
      <head>
        <link rel="stylesheet" href="./style.css">
      </head>

3.4. @import

  • 可以在style元素或者CSS文件中使用@import导入其他的CSS文件
1
@import url(./font.css);

4. CSS的注释

  • CSS的注释和HTML的注释是不一样的
  • /* 注释内容 */
1
2
3
4
5
6
div{
  /* 字体大小 */
  font-size: 18px;
  /* 前景色 */
  color: red;
}
本文结束  感谢您的阅读