CSS的讲解_ 字节宝

什么是css?

在百度百科上的解释是：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

总结：CSS就是用来修饰网页和对网页进行排版的层叠样式表

那我们为什么要学CSS呢？

CSS有丰富的样式定义，可以让我们的网页更加美观，用户体验更好
CSS可以多页面使用，可以多次重复应用到多种HTML页面中，减少程序员重复的工作量
结构清晰，易于修改，方便程序员编写网页

那么CSS是如何工作的呢？

首先先加载我们的HTML代码，加载完成后进行HTML的解析，在解析的同时加载CSS。待解析完成后创建我们对应的DOM树，然后把解析后的CSS挂载在DOM树上，最后对用户进行展示页面。

那么接下来就让我们一起学习CSS，

我们要写CSS了就要考虑我们CSS的嵌入方式了,那CSS的嵌入方式有哪几种呢？接下来我们就一起看看

CSS的嵌入方式

一、内联样式

代码语言：HTML复制

<h2 style="background-color: #FF6633">背景颜色：#FF6633</h2>

二、内嵌样式

代码语言：CSS复制

  <style type="text/css">
  p{
  background-color: #FF6633
  }
  </style>

三、外链式

这里需要我们创建一个.CSS文件链接，并且把CSS样式写.CSS文件里面

代码语言：CSS复制

<link rel="stylesheet" href="./style.css">

CCS的选择器

当我们要使用CSS样式的时候，首先第一步就是要去选择我们要设置的元素。那怎么去选择我们的元素呢？

这里我们就要用到我们的CSS选择器了。

在CSS中，有五种常用的选择器，分别是：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

那我们接下来就一一来介绍他们

简单选择器（根据名称、id、类来选取元素）

代码语言：HTML复制

<div class="a" ><div>

代码语言：CSS复制

    .a {
      width: 500px;
      height: 500px;
      background-color: aqua;
    }
    h1{
      width: 500px;
      height: 500px;
      background-color: aqua;
    }

组合器选择器（根据它们之间的特定关系来选取元素）

代码语言：HTML复制

  <div class="a">
    <p>aaa</p>
  </div>

代码语言：CSS复制

   .a p {
      background-color: aqua;
    }

伪类选择器（根据特定状态选取元素）

代码语言：HTML复制

 <a href="#" target="_blank">这是一个链接</a>

代码语言：CSS复制

  a:hover {
      color: hotpink;
    }

伪元素选择器（选取元素的一部分并设置其样式）

代码语言：HTML复制

<p>伪元素选择器</p>

代码语言：CSS复制

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

属性选择器（根据属性或属性值来选取元素）

代码语言：HTML复制

<a href="#">属性选择器</a>
<a href="#" target="_blank">根据属性或属性值来选取元素</a>

代码语言：CSS复制

a[target] {
  background-color: yellow;
}
</style>

而属性选择器中~=, |=, ^=, $=, *=的是属于比较难理解和比较细的地方，这里推荐一篇比较详细的文章可以让大家更仔细的去学习和理解这部分内容《CSS 属性选择器》

选择器的特异度--优先级

字典序比较： !important >内联> id> class >标签

我们讲了CSS的选择器我们在讲讲CSS的字体

CSS的字体

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

在 CSS 中，我们使用 font-family 属性规定文本的字体。font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始（英文字体放在中文字体前面），并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

最后给大家推荐两个好用的CSS学习/查询网站

MDN：developer.mozilla.org/zh-CN/docs/…

Learn CSS :https://web.dev/learn/css/

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞