邂逅CSS

Rsquo
165 阅读5分钟

CSS基础

1. 认识CSS

  • CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。

  • CSS是一种语言吗？

    • MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言

    • 维基百科解释：是一种计算机语言，但是不算是一种编程语言

  • 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）

2. CSS规则

  • CSS的语法规则

image.png

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

    • 属性名（Property name）：要添加的css规则的名称

    • 属性值（Property value）：要添加的css规则的值

3. 三种编写规则

CSS提供了3种方法，可以将CSS样式应用到元素上：

  • 内联样式（inline style）

    • 内联样式（inline style），也有人翻译成行内样式

    • 内联样式表存在于HTML元素的style属性之中

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

    <p style="color: red; font-size: 24px;">我是一个段落</p>

  • 内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）

    • 将CSS放在HTML文件元素里的元素之中 
    <!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>
  <style>
    /* 选择器 */
    .title {
      color: red;
    }

    .box {
      color: white;
      background-color: salmon;
    }
  </style>
</head>
<body>

  <h2 class="title">我是标题</h2>
  <div class="box">我是一个box</div>

</body>
</html>

  • 外部样式表（external style sheet）

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

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

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

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

/* 可以通过@import引入其他的css资源 */
@import url(./style.css);
@import url(./test.css);

<!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 rel="stylesheet" href="./css/index.css">
</head>
<body>
  
  <h2 class="title">我是标题</h2>
  <p class="content">
    我是段落, 哈哈哈哈
  </p>

</body>
</html>

4. CSS中的注释

  • 注释语法如下
/* 注释 */

5. 常见的CSS

  • 最常见的CSS

    • font-size：文字大小

      • 浏览器默认字体大小16px

    • color：文字颜色

    • background-color：背景颜色

    • width：宽度

    • height：高度

  • CSS属性的官方文档

6. 案例练习

  • 星球介绍
<!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>
  <style>
    .item {
      width: 500px;
      background-color: skyblue;
    }

    .album {
      width: 500px;
    }

    .keyword {
      font-size: 30px;
      color: white;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <h1>星球介绍</h1>


  <div class="item">
    <h2>地球</h2>
    <img class="album" src="../images/diqiu.jpg" alt="">
    <p>
      <span class="keyword">地球(Earth)</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁，它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
    </p>
  </div>

</body>
</html>
  • 效果：

image.png

7. 知识补充

  • link和@import的区别（两者都是外部引用CSS的方式）：

    • link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS

    • link引用CSS时，在页面加载时同时加载；@import需要页面完全载入以后再加载

    • link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持

    • link支持使用javascript控制DOM改变样式；而@import不支持

    • link引入样式的权重大于@import引入的样式

  • src和href的区别：

    • 请求资源类型不同

      (1) src是sourse的意思，在请求src资源时会将其指向的资源下载并应用到文档中

      (2) href是Hypertext Reference的缩写，表示超文本引用，用来建立当前元素和文档之间的链接

    • 作用结果不同

      (1) src用于替换当前内容

      (2) href用于在当前文档和引用资源之间建立联系

    • 浏览器解析方式不同

      (1) 当浏览器解析到src,会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

      (2) 若在文档中添加href,浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么使用 link 方式加载 CSS，而不是使用@import方式的原因

avatar
文章
阅读
粉丝