006、CSS概述

番蔬条

已于 2022-05-01 20:34:35 修改

阅读量217

点赞数

分类专栏：前端笔记文章标签：前端

于 2022-05-01 10:40:51 首次发布

本文链接：https://blog.csdn.net/weixin_46390041/article/details/124523724

版权

前端笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

1、产生背景

从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只包含很少的显示属性。
随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能，例如文本格式化标签。
但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。
于是 CSS 便诞生了。

2、发展过程

版本	说明
CSS 1	1995年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为 w3c 的推荐标准。
CSS 2	1997年初，W3C 组织负责 CSS 的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的 CSS 规范第二版。
CSS 3	CSS3 是 CSS 层叠样式表技术的升级版本，于1999年开始制订，2001年5月23日 W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

3、CSS概念

css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的文件样式的计算机语言。
作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。

4、CSS的组成

1）层叠式：css 中贯穿始终的加载特性，具有层叠性和继承性。

2）样式：定义如何显示 HTML 元素，比如文字文本、背景、盒模型、浮动、定位等等。

5、CSS语法

1）CSS规则

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

2）书写位置

css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式。

内联式：

也被习惯叫做行内式。
书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。
所有的 css 样式属性总体组成标签的 style 属性的属性值。

<div style="width: 100px;height: 100px;font-size:14px;">1</div>

内联式缺点：

内联式必须写在标签上，没有完全脱离 HTML 标签。
css 样式代码让标签结构繁重，不利于 HTML 结构的解读。
一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。因此，实际工作中不会使用内联式（行内式）编写 css 代码。

内嵌式：

书写位置：在 HTML 文件中，<head>标签内部有一个<style>标签。
<style>标签写在<title>后面，所有 css 代码书写在<style>标签内部。
<style>标签有一个标签属性叫做 type，属性值是 ”text/css ” 。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    /* css规则：选择器、属性 */
    p,div {
      font-size: 30px;
    }
  </style>
</head>

内嵌式特点：

优点：a、实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构。b、多个标签可以利用一段代码设置相同的样式，节省代码量。
缺点：a、结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部。b、css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用。 c、在 HTML 中如果 css 代码太多，会造成文件头重脚轻。

外联式：

外联式 CSS，也可以叫做外链式 CSS、外部 CSS。
书写位置：在一个单独的扩展名为 .css 的文件中。
书写语法：内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
注意：在 .css 文件中书写时，不需要再加<style>标签。
外联式引用：

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

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

<link rel="stylesheet" href="01.css" type="text/css">

外联式优点：

①实现了 HTML 和 css 完全分离。

②多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量。

③可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。

④一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层。

导入式：

书写位置：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其他的外部的 .css文件。
导入方式：利用一条 @import url(路径) 语句进行引入。

<style>
    @import url(01.css);
    h1 {
      color: red;
    }
</style>

导入式问题：

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

实际应用：

小型案例：可以使用内嵌式 CSS。
实际工作、大型网站项目：推荐使用外联式 CSS。

3）样式规则

以内嵌式样式表为例：

所有的 css 代码都必须书写在<head>标签内部的一对<style>标签内。
css 在给某个标签设置样式前，必须使用选择器先选中标签。
css 样式的属性，属性名和属性值的键值对写法为 k:v; 。
给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。
给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出。

<style>
    /* css的注释 */
    p {
      color: red;
      font-size: 30px;
    }
</style>

注意：

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

4）CSS 注释语法

语法格式： /*中间部分为注释内容*/
VS code快捷键：ctrl+/

5）CSS样式格式

开发过程中，应用展开格式，选择器和样式属性名和属性值可以不分大小写，最好小写，特殊情况除外，选择器与大括号 {} 之间保留一个空格。 冒号后面，属性值前面，保留一个空格。

CSS常用样式：

颜色color：

作用：给文字设置颜色。
属性名 k ：color
属性值 v ：颜色名、颜色值

颜色名：颜色名就是使用颜色的英文单词进行表示。

需要记忆一些最常用的颜色名：

红色	red
橙色	orange
黄色	yellow
绿色	绿色
青色	cyan
蓝色	blue
紫色	purple
黑色	black
白色	white
金色	gold
粉色	pink
浅黄色	lightyellow
黄绿色	yellowgreen
天蓝色	skyblu

更多的颜色名可以通过查询得到：CSS 颜色名称 | 菜鸟教程

颜色值：颜色值指使用具体颜色的数值表示。包括： rgb 模式和十六进制模式写法

rgb 模式：

rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式。
每个原色的取值范围是0~255，一共256个数值。三个原色共能混合成 1677多万种颜色。
书写方法：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)

十六进制模式：

十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进制的 0--255 的数字。
十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。
书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。 0→00，255→ff
书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

常用颜色的十六进制色值：

红色	#ff0000 / #f00
绿色	#00ff00 / #0f0
蓝色	#0000ff / #00f
黑色	#000000
白色	#ffffff
灰色	#808080

十六进制颜色值简写模式：如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。灰色 #808080不能简化！

字体font-family：

作用：定义元素内文字的字体。
属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。
属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。
如果不设置字体属性，不同的浏览器有自己的默认字体。
常用的中文字体：宋体 SimSun ，微软雅黑 Microsoft Yahe
常用的英文字体： Arial，consolas
注意事项：

font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。
浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。
中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。

实际应用：

首选字体需要根据设计图确定，最后需要设置备用字体。

<style>
    p {
      color: #00f;
      font-family: "Candara","Arial","微软雅黑","宋体";
    }
</style>

字号 font-size：

作用：设置文字的大小。属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。
属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。
单位：

注意：

如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、 IE，默认显示字号为 16px。
不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号。

实际应用：

网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px以上。
尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有 bug。
实际工作中的字号，需要以设计图为准。

6）盒子实体化三属性

实体化属性：

属性名	属性值	说明
width	px单位的数值	定义元素占有的宽度
height	px单位的数值	定义元素占有的高度
background-color	颜色名、颜色值	定义元素的背景颜色

6、CSS选择器

在内嵌式和外部css中，要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素，这时需要用到 CSS 中的选择器。
选择器：选择要添加样式的 HTML 标签的一种方法、模式。
首先学习 css2.1 版本的七种选择器：

基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器：后代选择器、交集选择器、并集选择器。

基础选择器

1）标签选择器

通过标签名去选择标签元素。
书写方式：标签名。
选择范围：选中的是HTML文件中所有的同名标签。
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
特点：

优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
缺点：只能实现全选，不能对局部的标签添加特殊样式。

2）id选择器

通过标签上的 id 属性去选择标签。
书写方式：#id 属性值
选择范围：只能选中一个标签。
id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置
缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

3）类选择器

通过标签的 class 属性去选择标签。
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签。
class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。
特点：

多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中。
一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。

类选择器的特殊应用：

原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。

类选择器的有点：

①通过一个类选择器进行多选，选中多个标签，添加公共样式。

②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。

实际工作中，通常有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)

4）通配符选择器

通过一个特殊符号选择页面内所有的标签。
书写方式：*
选择范围：包含标签在内的所有标签。
通配符特点和应用：

优点：可以实现全选，简化书写。
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意：实际上线的网站不允许使用 * 去清除默认内外边距。
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

高级选择器

1）后代选择器

通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。
特点：减少 class 属性的定义使用，选择效率更高。

2）交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
比较常见的是标签与类的交集。
交集选择器更多写法：

交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
IE6 不支持类名连续交集写法。
交集选择器可以作为其他高级选择器的组成部分。

3）并集选择器

不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围：是所有的单独选择器选中的标签的并集集合。
用途：①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。 ②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

7、CSS层叠式

继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如<body>，后期所有的后代标签都可以从<body>进行继承。

层叠性

思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？

解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。判断最终胜出的属性是谁，需要依赖判断优先级。

怎么判断？

基础选择器的权重：根据选择范围，范围越大权重越小， * < 标签选择器 < 类选择器 < id 选择器。
高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
比较顺序：( id 个数, 类的个数, 标签的个数）
基础选择器：!importtant>行内>id>类>标签>通配符
高级选择器的权重：依次比较（id，类，标签）的个数
id不等于10个类

番蔬条

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
006、CSS概述

1、产生背景从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只包含很少的显示属性。随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能，例如文本格式化标签。但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。于是 CSS 便诞生了。2、发展过程版本说明 CSS 1 1995年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为 w3c
复制链接

扫一扫

专栏目录