拉勾教育大前端就业9期训练营——前端基础CSS重点知识笔记，附3个练习题及感想

本文链接：https://blog.csdn.net/m0_46552208/article/details/121462342

CSS

CSS概述

css产生背景：

HTML被发明开始，样式就以各种形式存在，最初的HTML只是包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的需求，HTML添加了更多的显示功能，比如文本格式化标签。

随着这些功能的增加，HTML变得越来越乱，页面越来越臃肿。

发展过程

css概念：

css全称cascading style sheets，层叠样式表，是一种用来表现HTML的文件样式的计算机语言。

作用：静态的修饰网页，并且可以配合各种脚本语言动态的对网页各元素进行格式化。

前段三层技术：

HTML	Css	JavaScript
结构层	样式层	行为层
从语义的角度搭建网页结构	从美观的角度描述页面样式	从交互的角度去描述页面的行为

css的出现，实现了网页结构和样式的相分离，拯救了混乱的HTML。

HTML不需要再去实现样式相关的内容，只需要呈现与语义化的结构内容，让css去实现样式，css网页的美容师

css的组成：

层叠式

css中始终贯穿的加载特性

层叠性
继承性

样式

定义如何在浏览器中显示HTML元素

比如：文字文本、背景、盒模型的样式、浮动、定位等等

css代码四种书写方式

css的代码根据书写位置的不同分为四种书写方式

内嵌式、内联式、外联式、导入式

内联式样式表

内联式，也被习惯叫做行内式

书写位置：在HTML标签上的style属性中书写css样式

所有css样式属性总体组成标签style属性的属性值。

内联式缺点：

内联式必须写在标签上，完全没有脱离HTML标签
css样式代码让标签结构繁重，不利于HTML结构的解读
一个内联式css代码，只能给一个标签使用，如果是多个标签具有相同样式，同样的css代码需要书写很多次，增加代码量

（后端可能会使用内联式编写css代码，实际工作不推荐用）

内嵌式样式表

书写位置：在HTML文件中，标签内部有一个

您好

内嵌式特点

优点	缺点
实现了样式和结构的初步分离。css只负责样式，HTML负责结构	结构与样式没有完全分离，代码依旧书写在HTML文件的

外联式样式表

外链式css，也可以叫做外链式css，外部css
书写位置：在一个单独的拓展名为.css的文件中
书写语法：内部代码与内嵌式样式表中的

直接在.css文件中书写css规则。

外联式引用：

外联式样式表必须引入到HTML文件中，才能正常运行加载。
引入方式：在HTML中的标签内部使用标签进行引入。

标签属性：

属性名	属性值	说明
rel	stylesheet	表示引入的外部文件与HTML之间的关系，样式表
href	css文件路径	hypertext reference，超文本引用
type	text/css	表示加载时代码按照纯文本形式的css代码加载。HTML5可以省略type的属性不写

外联式的优点：

实现了HTML和css完全分离
多个HTML文件可以同时使用一个css 文件，便于提供公共css，减少代码量。
可以实现一个css变化，多个HTML页面同时变化的需求，减少工作量。
一个HTML文件可以引入多个css文件，可以实现一个页面中css代码分层

导入式样式表

书写位置：在内嵌式样式表

导入式问题：

导入式样式表的作用于外联式样式表基本相同。
但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有css样式的效果，给用户的体验感不好。（会优先加载HTML结构，在加载css样式）
实际工作中较少使用导入式，推荐使用外联式样式表

实际运用

小型案例：可以使用内嵌式css

实际工作、大型网站项目：推荐使用外联式css。

css样式规则语法

css规则：

css规则主要由两个主要的部分组成：选择器，以及一条或多条声明。

p {width: 10px;font-size: 14px;}

选择器 {属性名: 属性值;}

注意事项;

每条属性后面的分号必须写，如果不隔开会导致后面所有的代码加载错误。
css中所有属性与属性之间对空格、换行、缩进不敏感。

css注释语法

一个清晰易懂的css代码，离不开css注释的合理添加

/内容/

vscode快捷键：ctrl+/。

html注释语法

<！—内容—>

css代码书写风格

代码风格是实际开发中的书写方式，并非强制标准。

展开格式

开发过程使用，代码可读性强，便于调错。

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>

展开方式：将代码进行换行缩进空白书写

紧凑格式

上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。

<style>
    div{width: 200px;height: 200px;background-color: skyblue;}
</style>

可以在浏览器中搜索css压缩进行软件自动压缩

css中的英文可以使用大写，也可以使用小写。

建议：css中的选择器和样式属性、属性值等都使用小写英文，特殊情况出除外。

空格规范

选择器与大括号之间保留一个空格
冒号后面，属性值前面，保留一个空格

css常用样式

文本三属性

颜色color
字体font-family
字号font-size

颜色color

作用：给文字设置颜色

属性名k：color

属性值v：颜色名、颜色值

颜色名	颜色值
颜色名就是使用英文的英文单词进行表示	颜色值指用具体颜色的数值表示：rgb模式和十六进制模式写法

需要记忆的常用颜色名：
在这里插入图片描述

rgb模式：

是根据红绿蓝三原色进行混合而成的颜色模式。

每个原色的取值范围是0~255，一共256个数值。

书写方法：rgb（红，绿，蓝）

常用的rgb色值：

红色：rgb（255，0,0）绿色：rgb（0，255，0）蓝色：rgb（0，0，255）

黑色：rgb（0,0,0）白色：rgb（255,255,255）灰色：rgb（128,128,128）
在这里插入图片描述

0代表颜色的亮度最低，所以所有色值为0，代表黑色。

十六进制模式

十六进制模式：是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进制