CSS第一单元投影片(MODULE 1)

CSSModule⽤法总结什么是CSS Modules?官⽅解释是：可以理解为：所有的类名和动画名称默认都有各⾃的作⽤域的css⽂件。

通俗点来说是，每个class类是独⽴的可以被单独的按照某种规则编译为独⼀⽆⼆的域名，或者你也可以理解为，每个class都有⾃⼰的scope。

css作⽤域⽬前css作⽤域有三种⽅案1.css modules2.css in js3.BEM +scope其中1、3的区别如下1. 只要是靠⼈去保证代码质量总是不靠谱的，⼈的状态有起伏，但是机器没有，因此推荐⽤机器去解决这些问题。

这个是BEM+scope⽐较⽋缺的2. 需要注意css穿透，如果要改⼀些第三⽅的东西（当然写起来也⽐较简单），具体的可以了解下样式穿透3. BEM写起来很繁琐，⽽且是靠⼈去解决重名的问题。

那么cssModule解决了什么问题？1.变量全局污染问题css scope也能解决这个问题，但是解决问题的思路不⼀样，scope解决全局样式污染的问题的解决办法是通过，scope来限制⼦作⽤域对⽗作⽤域（也可以是全局作⽤域）的污染css module解决办法是通过:local(.text){color:red}:local函数来解决这个问题：global(.class){}:global能在⼦页⾯内写全局变量（我们在修改第三⽅库的时候通常会使⽤这个函数）2.对⽐BEM,BEM相对繁琐，⽽CSS Modulex相对灵活胜出原因： 1.BEM的解决办法是通过⼈来保证css的唯⼀性，CSS Module是通过webpack的打包机制类解决这个问题。

打包代码之前<h1 class="test">An example heading</h1> 打包代码之后<h1 class="_styles__test_309571057">An example heading</h1> 2.灵活，并且不同css⽂件内即使相同的class也不会互相影响 举个栗⼦import real from './real.css'import fake from './fake.css'element.innerHTML = `<div class="${buttons.red} ${rge}">`; 本质上，这种引⼊两个⽂件夹的写法是完全可以的，但是有些时候这种形式的代码复⽤是很实⽤的，还有⼀个不经常⽤的写法.element {composes: dark-red from "./colors.css";font-size: 30px;line-height: 1.2;}　借助CSS Module的compose，来解决这个事情。

css3 手册所有一、引言CSS（层叠样式表）是一种用于描述文档样式的标记语言，具体包括字体、颜色、布局等方面的样式定义。

CSS3是CSS的最新版本，是Web开发中常用的样式定义语言之一。

本手册将详细介绍CSS3的各项属性及其使用方法。

二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一，通过元素名称来选择文档中的元素。

例如，使用`p`选择器可以选择所有的`<p>`标签。

2. 类选择器类选择器用于选择带有特定类名的元素。

通过在类名前面加上点号（.），例如`.red`，可以选择具有`red`类的元素。

3. ID选择器ID选择器用于选择具有特定ID的元素。

通过在ID名称前面加上井号（#），例如`#header`，可以选择具有`header`的ID的元素。

4. 属性选择器属性选择器用于选择具有特定属性值的元素。

通过在属性名前加上方括号（[]），例如`[type="text"]`，可以选择type属性值为"text"的元素。

5. 伪类选择器伪类选择器用于选择元素的特殊状态。

常见的伪类选择器有`hover`、`active`和`visited`等。

6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。

常见的伪元素选择器有`::before`和`::after`等。

三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。

例如，`font-family: Arial, sans-serif;`可以设置字体为Arial。

2. 颜色可以使用`color`属性设置元素的文本颜色。

例如，`color: red;`可以将文本颜色设置为红色。

3. 背景可以使用`background-color`属性设置元素的背景颜色。

例如，`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。

四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。

CSS帮助手册2篇CSS帮助手册（上）CSS（层叠样式表）是一种用于描述网页中元素的样式和布局的标记语言。

它通过为HTML元素添加样式，实现了网页的美化和个性化。

本篇文章将为大家介绍CSS的基本语法、选择器和常用样式属性。

一、CSS基本语法CSS的语法由选择器和声明块组成。

选择器用于选择需要添加样式的HTML元素，而声明块则包含了一系列样式属性和值。

1. 选择器选择器是CSS中最重要的部分，它用于指定需要应用样式的HTML元素。

常见的选择器有：- 元素选择器：通过HTML元素的标签名选择元素，如`p`表示所有`<p>`元素。

- 类选择器：通过HTML元素的`class`属性选择元素，如`.red`表示所有`class`为red的元素。

- ID选择器：通过HTML元素的`id`属性选择元素，如`#header`表示`id`为header的元素。

- 属性选择器：通过HTML元素的属性选择元素，如`[type="text"]`表示所有`type`属性为text的元素。

- 伪类选择器：通过HTML元素的特殊状态选择元素，如`:hover`表示鼠标悬停时的元素。

2. 声明块声明块由一对花括号`{}`包裹，每个声明由属性和值构成。

属性用于指定需要修改的样式，值用于指定属性的具体取值。

例如，下面的CSS代码将为所有`<p>`元素设置红色字体:```cssp {color: red;}```二、常用的CSS样式属性CSS提供了众多样式属性，可以用来修改HTML元素的外观和布局。

以下是常用的样式属性及其作用：1. 字体样式- `color`：用于设置文本颜色，值可以是颜色名称或RGB值。

- `font-size`：用于设置字体大小，值可以是像素、百分比或者其他单位。

- `font-family`：用于设置字体样式，值可以是字体名称或者字体族名称。

2. 边框样式- `border`：用于设置边框样式，属性值由边框宽度、边框样式和边框颜色组成。

DIV+CSS盒子模型CSS盒子模型-什么是CSS盒子模型。

认识日常生活中盒子：常常我们遇到盒子是用于可装东西长方形、正方形的盒子。

如装皮鞋盒子、装电视机盒子，这个是比较具体的盒子。

CSS盒子：根据字面我们可以理解，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。

这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）,即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样：一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。

因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。

所以我们CSS盒子模型因此而得来。

日常使用CSS盒子：我们说将什么内容放入一个盒子里，我们就要想到是放入<div></div>里，脑海里就要这个概念。

假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：Css样式代码：.yangshi{width:100px;}对应html代码：<div class="yangshi">内容</div>这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。

DIV+CSS是什么？DIV+CSS我们可以分为DIV和CSS两个概念。

CSS：我们也讲过是什么，大家可参考网址（CSS是什么）：DIV：这个是网页HTML的标签，通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。

1、DIV是html其中一个常用标签，如span、table、h1等之类标签2、在HTML中DIV标签我们用的最多，具有代表性3、div配合css类，布局出网页< div>内容</div>< div class="divcss5">内容</div>< div id="divcss5">内容</div>DIV CSS是什么截图您可能需要了解CSS是什么？什么是html？Html代码是什么？css是什么?什么是CSS？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。

CSS 简介CSS 概述• • • •CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 如何显示 样式通常存储在样式表 样式表中 样式表 把样式添加到 HTML 4.0 中，是为了解决内容与表 解决内容与表 现分离的问题• • •外部样式表可以极大提高工作效率 外部样式表 外部样式表通常存储在 CSS 文件 文件中 多个样式定义可层叠 层叠为一 层叠样式表极大地提高了工作效率 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字 体标签和颜色属性所起的作用那样。

样式通常保存在外部 的 .css 文件中。

通过仅仅编辑一个简单的 CSS 文档，外 部样式表使你有能力同时改变站点中所有页面的布局和外 观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得 上 WEB 设计领域的一个突破。

作为网站开发者，你能够为 每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。

如需进行全局的更新，只需简单地改变样式，然 后网站中的所有元素均会自动地更新。

如何创建 CSS 如何插入样式表 当读到一个样式表时， 浏览器会根据它来格式化 HTML 文 当读到一个样式表时， 档。

插入样式表的方法有三种： 插入样式表的方法有三种： 外部样式，内部样式， 外部样式，内部样式，内联样式外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选 择。

在使用外部样式表的情况下，你可以通过改变一个文件 来改变整个站点的外观。

每个页面使用 <link> 标签链接到 样式表。

<link> 标签在（文档的）头部： <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它 来格式文档。

css100个必背知识点CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等各个方面。

对于前端开发者来说，掌握CSS的基本知识是非常重要的。

下面是100个必背的CSS知识点，希望对大家有所帮助。

1. CSS是一种样式表语言，用于描述网页的外观和样式。

2. CSS可以通过选择器来选择HTML元素，并为其应用样式。

3. CSS样式可以通过内联样式、内部样式表和外部样式表来定义。

4. 内联样式是直接在HTML元素的style属性中定义的样式。

5. 内部样式表是在HTML文档的head部分中定义的样式。

6. 外部样式表是一个独立的CSS文件，通过link标签引入到HTML 文档中。

7. CSS选择器可以根据元素的标签名、类名、ID等属性来选择元素。

8. 标签选择器可以选择指定标签名的所有元素。

9. 类选择器可以选择具有指定类名的元素。

10. ID选择器可以选择具有指定ID的元素。

11. 后代选择器可以选择指定元素的后代元素。

12. 子元素选择器可以选择指定元素的直接子元素。

13. 相邻兄弟选择器可以选择指定元素的下一个兄弟元素。

14. 伪类选择器可以选择元素的特定状态或位置。

15. 伪元素选择器可以选择元素的特定部分。

16. CSS样式可以通过属性和值来定义。

17. 属性是用于描述元素的特性，如颜色、字体、边框等。

18. 值是属性的具体取值，如红色、宋体、1px等。

19. CSS样式可以通过简写属性来定义，如font、border等。

20. CSS样式可以通过继承来应用到子元素。

21. CSS样式可以通过层叠来决定最终的样式。

22. CSS样式可以通过优先级来决定应用的顺序。

23. 内联样式的优先级最高，其次是ID选择器、类选择器和标签选择器。

24. 伪类选择器的优先级比类选择器和标签选择器高。

25. 伪元素选择器的优先级比伪类选择器高。

26. !important关键字可以提高样式的优先级。

⽤CSS实现的阴影效果阴影效果成了平⾯设计的⼀个套路，平⾯设计师把它当作瑞⼠军⼑的起⼦，随处使⽤，尽管招致不少⾮议，却⼀直⼴受欢迎。

虽然⽤图像编辑软件也能实现阴影效果，但在Web设计快速发展的今天，适应性和易⽤性是⼤势所趋，这种以固定背景效果制作出的静态图⽚很难有良好的适应性。

假如有⼀种技术，⽤ CSS 对任意块级元素灵活地添加阴影，⽽且能随着内容的⼤⼩⾃动扩展，还要适⽤于⼤多数流⾏的浏览器，那该有多好！不信么？告诉您，只需写⼏⾏代码就能做到。

是不是很有意思？先别急，这可不是我们的发明，我们只不过对此作了改进。

这个技术是由著名的上的 Dunstan Orchard （向 Dunstan 脱帽致敬）构思出来的，并且作了。

我们觉得这个⽅法简洁实⽤，但深⼊研究之后，发现还有改进的余地。

这⾥是它的⼯作原理：先⽤图像软件制作⼀幅背景图⽚，图⽚上只有阴影，不能有可见的边界（⼀种简便的⽅法是对空⽩的选择区域应⽤某种效果）。

这个图⽚要能够覆盖将要修饰的最⼤元素，实践当中，800 x 600 ⼀般就⾜够了。

将它保存为GIF图⽚，记住⼀定要在背景颜⾊之上应⽤效果，此外再把它另存为完全透明的PNG图⽚（即没有背景⾊）。

这是为了根据浏览器的能⼒区别对待[译注：即让⽀持透明 PNG 图⽚的浏览器使⽤PNG，IE 使⽤GIF。

]。

这⾥是将要⽤到的以及。

我们先从如何为图⽚添加阴影开始，然后再扩展到其他块级元素。

为了直观起见，我们把这个 class 命名为 img-shadow，我们先⽤这只可爱的⼩猫作个试验：相应的代码（只需额外增加⼀个 div ）：<div class="img-shadow"><img src="cat.jpg" alt="test"/></div>下图演⽰了我们所⽤到的技术：⾸先，我们⽤先前准备的阴影图⽚作为该 div 的背景。

css 盒模型的理解CSS盒模型是网页布局中非常重要的一个概念，它描述了一个元素在页面中所占的空间大小。

理解盒模型对于开发者来说至关重要，因为它决定了元素的尺寸、边距和边框。

盒模型由四个部分组成：内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。

这四个部分围绕在元素周围，形成了一个虚拟的矩形框，决定了元素在页面中的布局和空间占用。

让我们来了解每个部分的作用和特点。

内容区域是元素实际显示内容的区域，它包括文字、图片、背景等。

内边距是内容区域和边框之间的空间，可以用来调整元素内容与边框之间的距离。

边框定义了内容区域的边界，可以设置边框的样式、粗细和颜色。

外边距是元素与其他元素之间的间距，用于调整元素与其他元素的相对位置。

在CSS中，我们可以使用盒模型属性来控制盒模型的尺寸和样式。

其中，width和height属性用于设置内容区域的宽度和高度。

padding属性用于设置内边距的大小，可以分别设置上、右、下、左四个方向的内边距。

border属性用于设置边框的样式、粗细和颜色。

margin属性用于设置外边距的大小，也可以分别设置上、右、下、左四个方向的外边距。

在实际应用中，我们常常需要计算盒模型的总宽度和总高度，包括内容区域、内边距、边框和外边距。

这个计算方式可以表示为：总宽度 = 左边框宽度 + 左内边距 + 内容区域宽度 + 右内边距 + 右边框宽度 + 左外边距 + 右外边距；总高度 = 上边框高度 + 上内边距 + 内容区域高度 + 下内边距 + 下边框高度 + 上外边距 + 下外边距。

盒模型还有一个重要的特性是盒模型的宽度和高度可以通过box-sizing属性进行调整。

默认情况下，元素的宽度和高度只包括内容区域，不包括内边距和边框。

如果将box-sizing属性设置为border-box，那么元素的宽度和高度将包括内边距和边框。

这个属性可以很方便地控制盒模型的尺寸，减少计算的复杂性。

CSS重点知识点整理CSS定义:CSs:层鲁样式表，英文全名:cascading stvle sheets，WEB 标准中的表现标准语言，简单说就是如何修饰网页信息的显示样式目前推荐遵循的是W3C发布的CSS3.0.1998年5月21日由w3C正式推出的css2.0CSS语法:选择器(又称为选择符)《属性: 属性值;属性: 属性值;}选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素属性: 属性是指定元素所具有的属性，它是css的核心，css2共有150多个属性属性值: 属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等.CSS的引入方式:内部样式外部样式行内样式内部样式的创建方式:1、结构创建对象2、在head里面书写标签style注: 使用style标记创建样式时，最好将该标记写在<head></head>; <style type="text/css">/*css语句*/</style>外部样式引入:1、创建对象2、新建一个CSS文件3、利用link或者import引入CSS文件<link rel="styles heet”href="CsS文件的路径">relation:用于定义文档关联stylesheet:样式表2<style type="text/css">@import ur1(目标文件的路径及文件名全称);</style>注: @和import之间没有空格url和小括号之间也没有空格; 必须结尾以分号结束引入外部样式表link和import之间的区别差别1: 本质的差别:link属于XHTML标签，而@import完全是CSS提供的一种方式差别2: 加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候)，link用的CSS 会同时被加载，而@mpot 用的CSS会等到页面全部被下载完再被加载。

CSS中的CSSModules是什么有什么用在前端开发的领域中，CSS（层叠样式表）是构建网页外观和布局的重要组成部分。

而随着前端技术的不断发展，出现了一种名为 CSS Modules 的技术，它为 CSS 的管理和使用带来了新的思路和方法。

那么，CSS Modules 到底是什么呢？简单来说，CSS Modules 是一种将 CSS 样式局部化的方式。

在传统的 CSS 开发中，我们通常会将所有的样式写在一个或多个 CSS 文件中，然后在 HTML 页面中通过`＜link>｀标签引入这些文件。

这样做的一个问题是，样式的作用域是全局的，可能会导致样式冲突和难以维护的情况。

而 CSS Modules 则改变了这一情况。

当我们使用 CSS Modules 时，每个 CSS 文件都被视为一个独立的模块，其中定义的样式只会在特定的组件或模块内部生效，而不会影响到其他的部分。

这就像是给每个组件都配备了自己专属的“样式盒子”，里面的样式只在这个盒子内部起作用，不会干扰到外面的世界。

为了实现这种局部化的效果，CSS Modules 会对 CSS 文件中的类名和选择器进行重命名。

比如说，你在 CSS 文件中定义了一个`button`的类，在经过 CSS Modules 的处理后，它实际在生成的代码中可能会变成类似于`button__abc123`这样的一个独特的名称。

这样一来，即使在不同的模块中都有`button`这个类名，也不会相互冲突，因为它们在最终的代码中已经变成了完全不同的名称。

接下来，让我们看看 CSS Modules 到底有什么用。

首先，它能够有效地解决样式冲突的问题。

在大型的前端项目中，多个开发者可能会同时编写不同的组件，并且可能会不小心使用了相同的类名。

如果使用传统的全局 CSS，就很容易出现样式相互覆盖、冲突的情况，导致页面的显示出现问题。

而有了 CSS Modules，每个组件的样式都是独立的，不会相互干扰，大大减少了样式冲突的可能性。

最全的CSS尺寸单位介绍前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念（以下概念读起来可能有些晦涩，如果看不懂也没关系）像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。

css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。

在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。

后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

其他品牌的移动设备也是这个道理。

物理像素它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。

物理像素的大小取决于屏幕。

是一个无法改变的属性。

设备独立像素我上一张图，你就会理解什么是设备独立像素就是我们开发过程中使用的css中的px设备像素比（device pixel radio）设备像素比 = 物理像素 / 设备独立像素，单位是dpr！（device pixel radio）Retina屏幕所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

也被称为视网膜显示屏——百度百科因为Retina屏幕的出现，在pc端默认情况下，css中的1px等于1物理像素，但在移动端1px不一定等于1物理像素，比如说iPhone 的设备独立像素是375 *667，因为它使用了Retina屏幕，他的dpr 是2，所以iPhone 6 的物理像素为 750 *1334在不同的屏幕上(普通屏幕vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的，不同的是1px所对应的物理像素个数是不一致的。

webpackcss_module配置与使⽤1.在每个样式中都是style.*中的形式⽐较⿇烦，可以使⽤react-css-modules解决这种问题。

例如在app.js中2.react-css-modules缺点是是需要运⾏时的依赖，⽽且需要在运⾏时才获取className，性能损耗⼤。

在⽐较⼤的项⽬中，会导致较⼤的延迟。

那么这个问题怎么解决那，可以使⽤bable-plugins-react-css-modules 把className获取前置到编译阶段。

3.bable-plugins-react-css-modules与react-css-modules是同⼀个作者开发的⼯具，bable-plugins-react-css-modules相对于react-css-modules，在性能⽅⾯有了较⼤的提⾼。

bable-plugins-react-css-modules有两种配置⽅式，⼀是配置在webpack.config.js，⼆是配置在.babelrc中，本⽂采取的⽅式是配置在webpack.config.js中。

...{test: [/\.js$/, /\.jsx$/, /\.es6$/],include: [path.resolve(__dirname, 'src'),],use: {loader: "babel-loader",options: {cacheDirectory: true,plugins: [[ "react-css-modules", {context: path.resolve(__dirname, "src"),"generateScopedName": "[path][name]__[local]--[hash:base64:5]"}]]}},}...在我们的产品中，均使⽤CSS Modules来作为样式解决⽅案，⼤致的代码是这样的：import React from 'react';import styles from './table.css';export default class Table extends ponent {render () {return <div className={styles.table}><div className={styles.row}><div className={styles.cell}>A0</div><div className={styles.cell}>B0</div></div></div>;}}但这⾥显然存在⼀些细节上的⿇烦：1. 引⼊样式时额外增加了⼀个styles变量2. 需要不断写styles.xxx，重复代码babel-plugin-react-css-modules插件可以⼀定程度上缓解这些问题，使代码变为：import React from 'react';import './table.css';export default class Table extends ponent {render () {return <div styleName='table'><div styleName='row'><div styleName='cell'>A0</div><div styleName='cell'>B0</div></div></div>;}}难点1. 我们的产品使⽤LESS⽽⾮原⽣的CSS来编写样式2. 为了⽣成的类名更漂亮，我们使⽤CSS Modules⽤了⼀个⾃定义的getLocalIdent实现3. 与webpack的整合可能存在⼀些难点解决⽅案安装依赖npm i --save babel-plugin-react-css-modulesnpm i --save-dev postcss-less需要注意的是，babel-plugin-react-css-modules有⼀个运⾏时依赖，所以⽤--save安装⽐较好。