了解&深入CSS|青训营笔记

罗罗ll
103 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第二天，今天主要学习CSS。

本堂课重点内容

  • 选择器
  • 布局

详细知识点介绍

什么是CSS？

  1. Cascading Style Sheets
  2. 用来定义页面元素的样式
  • 设置字体颜色
  • 设置位置和大小
  • 添加动画效果

CSS语法

retouch_2022072712313617.jpg 语法由一个 选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

页面中使用CSS

image.png

  • 外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML<link> 元素引用它
  • 内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件<head>标签里的<style>标签之中。
  • 内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素。除非你有充足的理由，否则不要这样做！

CSS是如何工作

image.png

  1. 浏览器载入 HTML 文件。
  2. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。
  3. 浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理。
  4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
  6. 网页展示在屏幕上（着色）。

选择器

  1. 指定网页上我们想要样式化的HTML元素，以便设置样式
  2. 多种方法选择元素
  • 标签名、类名、id
  • 属性
  • DOM树中的位置

通配选择器

* {}

标签选择器

h1 {}

id选择器

#unique { }

类选择器

.box { }

属性选择器

a[title] { }

伪类与伪元素

  1. 不基于标签和属性定位元素
  2. 几种伪类
  • 状态伪类
  • 结构性伪类

状态伪类
UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。

a:hover { }

:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素，用来样式化一个元素的特定状态。

结构性伪类
结构性伪类主要作用是选择子元素。

20201220215913386.png

组合

  • 后代选择器(以空格  分隔)

用于选取某元素的后代元素，以下实例选取所有 <a> 元素插入到 <nav> 元素中。

nav a {}
  • 子元素选择器(以大于 > 号分隔)

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素，以下实例选择了<div>元素中所有直接子元素 <p>。

div>p {}
  • 相邻兄弟选择器（以加号 + 分隔）

可选择紧接在另一元素后的元素，且二者有相同父元素，以下实例选取了所有位于 <h2> 元素后的第一个 <p> 元素:

h2+p {}
  • 普通兄弟选择器（以波浪号 ～ 分隔）

选取所有指定元素之后的相邻兄弟元素，以下实例选取了所有<h2> 元素之后的所有相邻兄弟元素 <p>。

h2~p {}

选择器组

根据组合的选择器选择不同的标签， 以,分割开, 如果有公共的样式设置，可以使用。

h1, ul, div {}

选择器的特异度

  • 权重：行内样式>ID选择器>class、属性、伪类选择器>标签、伪元素选择器。
  • 权重向量： (9999, 100, 10, 1)
    (行内样式，ID选择器，class/属性/伪类选择器/，标签/伪元素)

继承

一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。

控制继承

  • inherit

    设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

  • initial

    设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

  • revert (en-US)

    将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。

  • revert-layer (en-US)

    将应用于选定元素的属性值重置为在上一个层叠层中建立的值。

  • unset

    将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

字体

使用建议：字体列表最后写上通用字体族，英文字体放在中文字体前面。 Web Fonts

布局

布局是什么？

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟结点和内容等信息计算

布局相关技术

常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动、绝对定位

  • 标准盒子模型

image.png

Flex Box是什么？

  1. 一种新的排版上下文
  2. 可以控制子盒子的：
  • 摆放流向
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

image.png

flex-direction

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

image.png

align-items

image.png

Grid布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，是目前唯一一种 CSS 二维布局。 image.png

position

  • 定位元素（positioned element） 是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
  • 相对定位元素（ relatively positioned element ） 是计算后位置属性为 relative 的元素。
  • 绝对定位元素（absolutely positioned element） 是计算后位置属性为 absolute 或 fixed 的元素。
  • 粘性定位元素 （ stickily positioned element ） 是计算后位置属性为 sticky 的元素。

实践练习例子

选择器

  • 通配选择器

  • 标签选择器

  • id选择器

  • 类选择器

  • 属性选择器

  • 状态伪类选择器

  • 结构性伪类选择器

  • 后代选择器

<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>

运行一下

image.png

  • 子元素选择器
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>
<body>
<div><p>我是div里的p，div是我的父亲</p></div>

<div><span><p>我是div里的span里的p，div是我的爷爷</p></span></div>
</body>

运行一下

image.png

  • 相邻兄弟选择器
<style>
div+p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>
</body>

运行一下

image.png

  • 普通兄弟选择器
<style>
div~p
{
	background-color:yellow;
}
</style>
</head>
<body>
	
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
</div>
<p>段落 2。不在 div 中。</p>
<p>段落 3。不在 div 中。</p>
</body>

运行一下

image.png

  • 选择器组
<style>
h1, div, p
{
	background-color:yellow;
}
</style>
</head>
<body>
	<h1>我是h1</h1>
	<div>我是div</div>
	<p>我是小p</p>
	<nav>我是nav</nav>
</body>

运行一下

image.png

课后个人总结

通过这节课，我加深了对CSS的理解，对于CSS我们要采取合适的布局满足需求，CSS选择器要区分计算清楚权重，以便灵活使用。

引用参考

blog.csdn.net/csucsgoat/a… blog.csdn.net/mouday/arti… developer.mozilla.org/en-US/docs/…

avatar
文章
阅读
粉丝