CSS之邂逅 (一)：认识CSS、编写CSS样式、CSS注释、常见的CSS属性_使用内嵌样式(inline style) 内部样式表(internal style sheet) 打-优快云博客

本文链接：https://blog.youkuaiyun.com/Sedrick_/article/details/129373993

这篇文章介绍了CSS的基本概念，包括其作为样式表语言的角色，历史发展，以及如何通过内联样式、内部样式表和外部样式表应用样式。还涵盖了CSS的语法、常见属性，如颜色、字体和布局方法，如浮动和flex布局。此外，提到了Emmet工具和一些高级元素的使用，以及CSS在Web开发中的重要性。

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. 邂逅CSS✨

1.1 CSS是一种语言吗？

MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言
维基百科解释：是一种计算机语言，但是不算是一种编程语言

1.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

1.3 CSS的总结

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

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

2. 编写CSS样式✨

2.1 CSS的语法

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

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

2.2 CSS的应用

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

内联样式（inline style）
- 将CSS样式作为属性写入元素中，CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号

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

<!-- style="属性名:属性值;属性名2:属性值2;"-->
<!-- 多个样式用;分号隔开，冒号: 和值之间最好加个空格-->

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

内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
- 将CSS放在HTML文件<head>元素里的<style>元素之中。
- 使用CSS选择器，来选择对应的元素添加样式
- 只应用当前所配置文档的元素

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

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

外部样式表（external style sheet）
- 将css样式在一个独立的css文件中编写（后缀名为.css）
- 通过元素引入进来；

可以使多个网页使用同一种样式，不需要再重新写一遍

在这里插入图片描述

@import

如果样式很多，每次都用link会很麻烦。所以可以在style元素或者CSS文件中使用@import导入其它的CSS文件

/* @import url(./other.css); */
@import "./other.css";

.title {
  color: red;
  font-size: 30px;
  background-color: skyblue;
}

3. CSS注释✨

CSS代码也可以添加注释来方便阅读：

CSS的注释和HTML的注释是不一样的
/* 注释内容 */

4. 常见的CSS属性✨

CSS官网文档地址： https://www.w3.org/TR/?tag=css

由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：可以到https://caniuse.com/查询CSS属性的可用性
这个网站在后续的browserlist工具中再详细说明

4.1 必须掌握的CSS属性

请添加图片描述

4.2 常见CSS属性的应用

font-size 设置字体大小
color 设置设置文本内容的前景色,包括文字、装饰线、边框、外轮廓等的颜色
background-color 设置背景颜色
width 设置宽度
height 设置高度

<style>
    .title {
      /* 设置字体大小 */
      font-size: 24px;
      /* 设置字体颜色 */
      color: chocolate;
      /* 设置颜色背景 */
      background-color: blue;
      /* 宽度和高度 */
      /* 在没有内容的情况下，默认是没有高度的；有内容的话是被内容撑起来的 */
      width: 150px;
      height: 80px;
    }
  </style>

<body>
  <!-- 拓展：div是块级元素独占一行，尽管我们设置了宽度和高度 -->
  <div class="title">Hello world</div>
  <span>我是span元素</span>
</body>

4.3 练习案例

<!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 {
      /* 拓展：这里把元素特性更改为 行内元素 ，但是在行内元素中是不能设置宽度的 */
      /* display: inline; */
      width: 500px;
      /* 方式一：改变元素特性和垂直方向的布局 */
      /* display: inline-block;
      vertical-align: top; */

      /* 方式二：浮动 */
      float: left;
      margin-left: 30px;
    }

    .item img {
      width: 500px;
    }

    .item p .keyword {
      font-size: 30px;
      color: saddlebrown;
    }
  </style>
</head>
<body>
  
  <h2>星球介绍</h2>
  <div class="item">
    <h3>地球</h3>
    <!-- alt => alternative -->
    <img src="./images/diqiu.jpg" alt="木星">
    <p>
      <span class="keyword">木星（Jupiter）</span>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
    </p>
  </div>
  <div class="item">
    <h3>木星</h3>
    <img src="./images/muxing.jpg" alt="">
    <p>
      <span class="keyword">地球（Earth）</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1]  它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
    </p>
  </div>

</body>
</html>