CSS

CSS概述

​ css产生背景：

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

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

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

发展过程

​ css概念：

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

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

​ 前段三层技术：

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

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

​ css的组成：

层叠式

css中始终贯穿的加载特性

• 层叠性
• 继承性

样式

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

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

css代码四种书写方式

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

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

内联式样式表

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

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

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

1

​ 内联式缺点：

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

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

内嵌式样式表

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

​ 内嵌式特点

外联式样式表

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

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

​ 外联式引用：

• 外联式样式表必须引入到HTML文件中，才能正常运行加载。

• 引入方式：在HTML中的标签内部使用标签进行引入。

• 标签属性：

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

  外联式的优点：

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

导入式样式表

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

导入式问题：

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

实际运用

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

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

css样式规则语法

​ css规则：

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

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

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

注意事项;

1. 每条属性后面的分号必须写，如果不隔开会导致后面所有的代码加载错误。
2. 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模式：

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

每个原色的取值范围是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模式的一种简化写法，使用十六进制的数字字符去替换十进制0~255的数字。
• 十六进制：逢十六进一，每个位数上只能出现0_9，af之间的字符。
• 书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。

​ 0——0
255——ff

• 书写方式：使用#开头，后面连续书写红、绿、蓝颜色的十六进制的两位数值。

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

红色：#ff0000 绿色：#00ff00 蓝色：0000ff

黑色：#000000 白色：#ffffff 灰色：#808080

​ 十六进制颜色值简写模式：

如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。

比如：红色：#f00 绿色：#0f0 蓝：#00f

​ 类似#808080是不能进行简化的。

常用属性font-family

作用 ：定义元素内文字的字体

属性名k：font-family，字体属于font综合属性的一个单一属性。

属性值v：名字名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。

font-family（字体库家族）

常用字体：

中文：宋体（SimSun） 微软雅黑（Microsoft YaHei）

英文：Arial consolas

如果不设置字体属性，不同的浏览器会有自己的默认字体。

注意事项：

• font-family可以设置多个字体，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。

• 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须设置一个所有机器都具备的通用字体作为后路

• 中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。（看主要用英文字体，还是中文）

• 实际应用：
  首选字体要根据设计图确定，最后需要设置备用字体

常用属性-font-size

作用：设置文字字体大小

属性名k：font-size，字号属于font综合属性的一个单一属性。

属性值v：可以使用相对单位长度，也可以使用绝对单位长度。推荐使用相对长度单位。

注意事项：

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

实际应用：

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

盒子实体化三属性

如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。

实体化属性：

css选择器

在内嵌样式中和外部css中，要想将css样式应用于特定的HTML元素中，首先需要找到该目标元素，这时需要用到css中的选择器。

• 选择器：选择需要添加样式的HTML标签的一种方法、模式。

• css2.1版本中有七种选择器：

  基础选择器	标签选择器、id选择器、类选择器、通配符选择器
  高级选择器（衍生）	后代选择器、交集选择器、并集选择器

标签选择器

• 通过标签名去选择标签元素
• 书写方式：标签名

标签名 {

属性： 属性值；

}

优点：

• 可以选中所有的同名标签，设置所有同名标签的公共样式。

缺点：

• 只能实现全选，不能对局部的标签添加特殊样式

id选择器

• 通过标签上的id属性去选择标签
• 书写方式：#id属性值
• 选择范围：只能选中一个标签
• id命名规则：必须以字母开头，后面可以有字母、下划线、横线，严格区分大小写。每个id属性值必须是唯一的，不能与其他的id同名（相当于身份证号）。

#id {

属性名： 属性值；

}

id选择器特点：

• 缺点：id选择器只能实现单选，不能完成多选的功能

类选择器

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

.class {

属性值：属性名；

}

类选择器特点：

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

类选择器的特殊应用

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

类选择器的优点

1. 通过类选择器多选，选中多个标签，添加公共样式
2. 一个标签可以被多个选择器同时选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。

实际工作中，我们通常有一个使用规律：

类上样式（css），id上行为（JavaScript）

通配符选择器

• 通过一个特殊符号选择页面上所有的标签
• 书写方式：*
• 选择范围：包含标签在内的所有标签

通配符特点和应用

• 优点：可以实现全选，简化书写

• 缺点：通配符效率低，设置的部分公共样式不是所有的标签都需要添加，如果使用通配符选择器，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。

注意：实际上线的网站不允许使用*去清除默认内外边距。普通案例，为了节省书写，可以使用通配符。

后代选择器

• 通过标签之间的嵌套关系去选择元素，基本组成部分就是基础选择器
• 后代选择器也叫包含选择器
• 书写方式：空格表示是后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级、
• 选择范围：通过后代选择器中前面的一系类基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签
• 注意：后代选择器必须满足所有的后代关系才能被选中，后代关系不一定只能是父子关系

.box ul li p {

属性值： 属性名；

}

后代选择器特点

• 优点：减少class属性的定义使用，选择效率高

交集选择器

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

交集选择器的跟那个多写法

• 交集选择器可以进行类名的连续交集，需要满足更多的条件才能被选中
• .demo.ps{ } ie6不支持连续交集的写法，只认最后一个
• 交集选择器可以作为其他高级选择器的组成部分

并集选择器

• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器进行并集书写，相当于一种简化写法
• 书写方式：将多个选择器中间用逗号隔开，最后一个后面不能加逗号

h2,.demo { }

并集选择器用途

1. 如果多个标签有公共样式，但是不能用一个选择器选中，可以使用并集写法
2. 可以使用标签选择器并集写法，进行默认样式清除，替换通配符的功能
3. css3增加了更多选择器

继承性

css概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。

• 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来的，这种现象就是继承性。
• 能够被继承的样式是所有文字相关样式属性，其他属性都不能被继承。
  

继承性的应用

• 继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如,后期所有的后带标签都可以从继承。

层叠性

同一个标签被多个选择器选中，应继承哪一个样式属性：

使用层叠性解决冲突，多个选择器在进行加载的过程中，最终只有一个属性会加载成功，它会层叠、覆盖掉其他的属性

判断方法（优先级）：

选择器权重：

*<标签选择器<类选择器<id选择器（权重高的层叠权重低的）

十个类的权重不等于1个id，无这种换算关系

如果选择器权重相同，需要比较css代码的书写顺写，后写的层叠先写的（后加载，就近原则，继承父亲）

important和行内式

!important关键字

• 如果再比较选择器权重的过程中，遇见一个！important关键字，可以将某条csss样式属性的权重提高到最大（不会改变选择器的权重）
• 书写位置：在某个css属性的属性值后面加空格！important

注意：

1. 就近原则中，不需要比较选择器权重，important会失效
2. important不能提升选择器的权重，只能提升某条属性的权重到最大。

（important只会在比较权重时产生效果）

行内式

行内式权重高于所有其它选择器，但是低于！imporant

• 行内样式与外链式与内联式样式比较权重时，行内式的权重最高
• 但是与important关键字相比权重要低

未深刻记忆内容

• 需区分内联样式和行内样式的区别

行内样式又称为内联样式

内嵌式样式表，书写位置在标签内部的

• class属性值命名规则

必须以字母开头，后面可以跟字母、横线、下划线，严格区分大小写。

• ！important会将制定的一条样式属性的权重提升到最大，而不是提升选择器权重到最大

拓展

学习方法

1. 养成定时学习习惯（28天） ，可以选择比如定时早上七点学习 。

2. 记笔记，需要学会总结 ，要把知识转化为自己的 ，经常复盘。

3. 案例代码需要多练习（认识、熟悉、理解），做到从自己仿照写到自己可以徒手写代码，不借助任何外力。最少三遍练习，不要轻视任何一行代码。

4. 要多和同学交流 多帮助别人 在交流中巩固知识。

5. 前期写代码要多自己手敲，不要太依赖快捷键。

6. 作业
   

   试着写写它的样式结构，看看应该用什么标签把它呈现出来

7. Chrome开发工具

Chrome开发者工具

开发者工具面板

• Elements：查找网页源代码中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器中得到反馈
• console：记录开发者工具中的日志信息，且可以作为与js进行交互的命令行
• Sources：断点调试JS
• Network：从发起网页页面请求Request后分析HTTP请求后得到的 各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
• Applicantion：记录网页资源加载的所有资源信息，包括数据存储（LocalStorage、SessionStorage、indexDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security：判断当前网页是否安全
• Audits：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到css文件等。

要学会在控制台调试代码，了解面板的内容。

SEO权重标签

SEO（搜索引擎优化）操作的时候，经常会用到一些HTML标签，来突出网页中关键词或重要的主题，这种标签我们称为HTML权重标签，例如h系列、stronge、em、b、u、i、font。

结构化、语义化清晰地网站，更利于网站的搜索排名，要善于使用语义化明确的标签描述网页结构，例如h系列、p、ol、dl等，以及h5新增的标签。

SEO标签属性

SEO（搜索引擎优化）操作的时候，也会用到一些HTML属性标签，来突出网页中关键词，例如meta标签的name属性（keywords、description），超链接和图片的title、alt属性。

约定俗成，建议3-5个关键词

a标签的href属性值不同，a标签有不同的作用。

1. url地址：绝对路径会自动跳转到对应的链接的页面，相对路径时会点击自动下载文件并发生跳转，锚点url会自动跳转到也免得对应位置，可以用于页面滚动。
2. #：单独的一个符号，代表跳转到页面得顶部，可以用于制作返回顶部。
3. js调用

调用js的某个方法，不建议使用

<a href= "javascript:void(0);"οnclick=“js_metnod()”>

调用js的某个方法，不发生页面跳转，，有兼容问题

<a href= "javascript:void:;"οnclick=“js_metnod()”>

调用js的某个方法，不发生页面跳转

（有小手标志，不发生页面跳转）