初始CSS

用户409379271368
79 阅读4分钟

一. 什么是CSS
CSS又叫层叠样式表；可以分段理解，层叠是CSS的特性之一，样式则是装饰HTML，HTML中不乏有许多自带样式的标签，在没有实现结构与样式分离之前，需要某种样式就做出某种样式的标签，不仅会导致HTML越来越臃肿不好管理，且通用性不高，于是后面实现了结构与样式进行分离，而CSS就是这些样式的集合，就叫样式表。CSS它不是一种编程语言，它是一种计算机语言。

二. CSS的历史
早期网页是用HTML编写的，但是页面不够美观，为了让页面更加的丰富，于是带有各种样式的HTML标签就出现了，比如：i，del，strong等，后面许多浏览器厂商也实现了各自的样式语言，这时候还没有得到统一。1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1；直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2；在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签；从CSS3开始，所有的CSS分成了不同的模块（modules），每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。

总结：CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离；

美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等；

美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局 – 浮动、flex、grid）；

三. CSS的格式

image.png
css的书写格式是一个键值对
属性名（Property name）：要添加的css规则的名称；
属性值（Property value）：要添加的css规则的值；

四. CSS书写位置
知道了CSS的格式之后，就需要知道CSS应该写在什么地方，是有单独的CSS标签吗？CSS有三种书写位置

  1. 第一种：内联样式
    内样样式是直接写在开始标签中的style属性中的，多个样式之间使用分号隔开；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- 内联样式(inline) -->
  <div style="color: red; font-size: 30px;">我是div元素</div>
  <h1 style="font-size: 100px">我是标题</h1>

</body>
</html>

缺点：这种方式虽然方便，但是不能够实现复用，如果还有其他元素需要使用同样的样式的话，只能够复制样式，加入到开始标签中

  1. 内部样式
    内部样式书写在head标签中的style标签中，相比于内联样式，它的复用性比内联样式高，但是书写比内联样式麻烦，需要使用到选择器；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 内部样式表(internal) */
    /* 选择器 */
    /* 两个div都可以找到 */
    /* div {
      color: red; 
      font-size: 30px; 
      background-color: orange;
    } */

    /* 找到class为.div-one的元素 */
    .div-one {
      color: red; 
      font-size: 30px; 
      background-color: orange;
    }
  </style>

</head>
<body>
  
  <div class="div-one">我是div元素</div>
  <div>我也是div元素</div>

  <p>我是段落</p>
  <h1>我标题</h1>

</body>
</html>

优点：样式得到复用
缺点：页面与页面之间的不能够实现样式复用，比如我在当前页面使用了一个样式，我下一个页面也需要使用该样式，则只能复制样式到该页面中。

  1. 外部样式
    外部样式的复用性最高，它是在外部创建CSS文件，在CSS文件中写入对应的选择器和样式，在需要的页面通过link元素去引用，实现多页面复用的效果。(如果要引入多个CSS文件，则可以创建一个新的CSS文件通过@import去引入这些文件，最后在需要引入的页面中去引入这个新创建的CSS文件也可)
.title {
  font-size: 30px;
  color: red;
  background-color: purple;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- link元素是用来引入资源 -->
  <!-- href -> hypertext reference -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/test.css">
</head>
<body>
  
  <h1>我是h1元素</h1>
  <div class="title">我是01中的title</div>

</body>
</html>

五. CSS注释
CSS中的注释快捷键是：ctrl+/

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
    /* css的注释 */
    .box {
      font-size: 30px; /* 字体大小 */
      color: red; /* 前景色 */
    }
  </style>
</head>
<body>

  <div class="box">我是盒子</div>
  
</body>
</html>

六. CSS中常见的样式
官方文档： www.w3.org/TR/?tag=css
CSS推荐文档地址：developer.mozilla.org/zhCN/docs/…
由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：可以到caniuse.com/ 查询CSS属性的可用性

avatar
文章
阅读
粉丝