学习CSS必读

最新推荐文章于 2022-06-21 15:23:41 发布

X可乐

最新推荐文章于 2022-06-21 15:23:41 发布

阅读量262

点赞数

文章标签： css

本文链接：https://blog.csdn.net/CS_DGD/article/details/108845326

版权

CSS概述

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

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

CSS概念
- CSS全称 Csscading style Sheets，层叠样式表，是一种用来表现HTML的文件样式的计算机语言。
CSS作用
- 静态的修饰网页，并且可以配合各种脚本语言动态地对网页个元素进行格式化
前端三层技术
- HTML — 结构层 — 从语义的角度看搭建网页结构
- CSS — 样式层 — 从美观的角度描述页面样式
- JS — 行为层 — 从交互的角度描述页面行为
CSS的出现，实现了网页的结构和样式分离，拯救了混乱的HTML，更加拯救了我们的WEB开发者
没有CSS的网页我们也可以读取到信息，但是视觉效果将会出现毁灭式的崩塌
CSS的组成
- 层叠式
  - CSS中贯穿始终的加载特效
    - 层叠性
    - 继承性
- 样式
  - 定义如何显示HTML元素
    - 文字文本
    - 背景
    - 盒模型
    - 浮动
    - 定位
    - 其他

内联样式表

CSS规则
- CSS规则只要有两个部分构成：选择器，以及一条或多条说明
  - p : 选择器
  - width / height ：属性名
  - 300px / 14px ：属性值
  - width: 300px / font-size: 14px：多条样式属性
```
p {
    width: 300px;
    font-size: 14px;
}
```
书写位置
- CSS的代码根据书写位置的不同分为四种方式：内联式、内嵌式、外联式、导入式
内联式
- 也被叫做行内式
- 书写位置：
  - 在HTML标签之上的style属性中书写CSS样式
  - 所有的CSS样式属性总体组成标签的style属性的属性值
```
<div style="width: 100px; height=""200px; font-size: 14px"></div>
```
内联式缺点
- 内联式必须写在标签上，没有完全脱离HTML标签
- CSS样式代码让标签结构繁重，不利于HTML结构的解读
- 一个内联式的CSS代码，只能够给一个标签使用，如果多个标签需要使用，需要重新再去书写一遍，增加代码量
因此，实际工作中不会使用内联式（行内式）编写CSS代码

内嵌式样式表

书写位置：
- 在HTML文件中，<head>标签内部有一个<style>标签
- <style>标签书写在<title>标签后面，所有CSS代码书写在<style>标签内部
- <style>标签有一个标签属性叫做type，属性值时"text/css",可选项
```
<style type="text/css">
    p {
          width: 300px;
          font-size: 14px;
      }
</style>
```
内嵌式特点
- 优点
  - 实现了结构和样式的初步分离
  - CSS只负责样式，HTML负责结构
  - 多个标签可以利用一段代码设置，相同的样式，节省代码量
- 缺点
  - 架构和样式并没有完全分离，代码依旧写在HTML文件的<style>标签的内部
  - CSS样式只能给一个HTML文件使用，不能够被多个HTML文件同时利用
  - 在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="xl.css" type="text/css"></link>

外联式优点
- 实现了HTML和CSS完全分离
- 多个HTML文件可以共用一个CSS文件，便于提取公共CSS，减少代码量
- 可以实现一个CSS变化，多个HTML页面同时变化，减少工作量
- 一个HTML文件可以引入多个CSS文件，可以实现同一个页面中CSS代码分层

导入式样式表

书写位置：
- 在内嵌式样式表<style>标签内部，或者外联式样式表内部，导入其他的外部的.css文件

导入方式：

利用一条@import url(路径)语句进行引入

<style>
  @import url(xl.css)
  div {
      color : red
  }
</style>

导入式问题
- 导入式样式表的作用与外联式样式表基本相同
- 但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果网速比较慢是，会导致网页出现没有css样式的效果，给用户的体验不好
实际应用
- 小型案例：可以使用内嵌式CSS
- 实际工作、大型网站项目：推荐使用外联式CSS

CSS样式规则语法

CSS规则
- CSS规则由两个主要部分构成：选择器，以及一条或多条声明
样式规则
- 以内嵌式样式表为例 — 外联式也一样
  - 所有的CSS代码都必须书写在<head>标签内部的一对<style>标签内
  - CSS再给某个标签设置样式前，必须使用选择器选中对应的标签
  - CSS样式的属性，属性名和属性值的键值对写法为 k:v;
  - 给每个选择器添加的样式属性都必须写在一对大括号{}之内
  - 给一个标签添加的所有需要的样式，都要在{}内部一一罗列出来
```
<style>
  div {
      width: 200px;
      height: 200px;
      color: red;
  }
</style>
```
注意事项
- 分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误
- CSS中所有属性与属性之间对空格、换行、缩进不敏感
一个清晰易读的CSS代码，离不开CSS注释的合理添加
- 语法格式
  - /* 中间部分为注释内容 */
- 快捷键
  - ctrl + /

CSS代码书写风格

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

CSS样式格式
- 展开格式：开发过程使用，代码可读性强，便于调错
```
<style>
  div {
      width: 200px;
      height: 200px;
      color: red;
  }
</style>
```
- 紧凑格式：上传服务器时使用，减少不必要的空白字符，加锁文件大小，有利于传输
```
<style>
  div{width: 200px;height: 200px;color: red;}
</style>
```
英文大小写
- CSS中的英文可以使用大写，也可以使用小写，不影响实际效果
- 建议：
  - CSS中的选择器和样式属性名、属性值等都是用小写英文，特殊情况除外
空格规范
- 选择器与大括号{}之间保留一个空格
- 属性值与前边的冒号之间保留一个空格

常用属性 — color

作用：给蚊子设置颜色
属性名 k : color
属性值 v : 颜色名、颜色值
- 颜色名
  - 使用颜色的英文单词进行表示
- 颜色值
  - 使用具体颜色的数值表示
  - 包括：rgb模式和十六进制模式写法
    - rgb模式
      - 根据红绿蓝三原色进行混合而成的颜色模式
      - 每个原色的取值范围是0-255，一共256个数值，三个原色共能混合成1677多万种颜色
      - 书写方式：rgb（红，绿，蓝） — color: rgb(123,231,20)
    - 十六进制模式
      - 是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进制的0-255的数字
      - 十六进制：逢16进1，每个数位上只能出现0-9，a-f之间的字符
      - 书写为颜色值时，红绿蓝每个色值都要使用两位数的十六进制进行替换
      - 书写方式：使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值 — color: #0000ff
      - 十六进制颜色值简写模式：如果红绿蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写
        红色 #f00
        绿色 #0f0
        类似#808080是不能进行简化的

常用属性 — font-family

作用：定义元素内文字的字体
属性名 k : font-family，字体属于font综合属性的一个单一属性
属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号间隔
常用字体
- 中文
  - 宋体 — SimSun
  - 微软雅黑 — Microsoft Yahei
- 英文
  - Arial
  - consolas
- 如果不设置字体属性，不同浏览器有自己的默认字体
注意事项
- font-family可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体
- 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路
- 中文字体中一般都带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面
实际应用中
- 首选字体需要根据设计图确定，最后需要设置备用字体

常用属性 — font-size

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

相对长度单位	说明
px	像素值，最常使用的单位
em	倍数，继承自祖先元素设置的字号的倍数
%	百分比，集成自祖先元素设置的字号的百分比
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

注意事项
- 如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如chrome、IE，默认显示字号为16px
- 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。Chrome浏览器最先加载显示字号为8px，IE浏览器最小可以支持1px的字号
实际应用
- 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+
- 尽量使用12px、14px、16px等偶数的数字字号，ie6等老式浏览器支持奇数会有bug
- 实际工作中的字号，需要以设计图为准

CSS样式属性 — 盒子实体化三属性

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

实体化属性

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

CSS选择器 — 标签选择器

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

选择器
- 选择要添加样式的HTML标签的一种方法、模式
- 首先学习CSS2.1版本的七种选择器：
  - 基础选择器：标签选择器、id选择器、类选择器、通配符选择器
  - 高级选择器：后代选择器、交集选择器、并集选择器
标签选择器
- 通过标签名选择标签元素
- 书写方式：标签名
- 选择范围：选中的是HTML文件中所有的同名标签
- 注意：标签选择器可以选择所有的同名标签，会忽视HTML元素的嵌套关系，不管嵌套多深，都能被选中
- 优点：可以选中所有的同名标签，设置所有同名标签的公共样式
- 缺点：只能实现全选，不能实现局部特殊样式

CSS选择器 — id选择器

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

CSS选择器 — 类选择器

通过标签的class属性去选择标签
书写方式：.class属性值
选择范围：页面中所有class属性值相同的标签
class命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class属性值可以与其他的class相同
特点
- 多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同一个类选择器选中
- 一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这个标签，每个选择器后面的样式都会添加给同一个标签
类选择器的特殊应用
- 原子类：在CSS中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可
类选择器的优点
- 通过一个类选择器进行多选，选中多个标签，添加公共样式
- 一个标签可以被多各类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量
实际工作中，通常我们有一个使用规律：类上样式（CSS）id上行为（JS）

CSS选择器 — 通配符选择器

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

CSS选择器 — 后代选择权

由于基础选择器不能实现所有选择情况，后期再基础选择器的基础上衍生出了几种高级选择器。高级选择器的组成部分是基础选择器

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

/* div ul li p {
    color: red;
} */
div p {
    color: red;
}

<div>
    <ul>
        <li>
            <p>hi xl</p>
        </li>
    </ul>
</div>

CSS选择器 — 交集选择器

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

p.list {
    color:red
}
<p>111</p>
<p>222</p>
<p class="list">333</p>
<p class="list">444</p>
<span>555</span>
<span>666</span>

更多写法
- 交集选择器可以进行类名的连续交集，需要满足更多条件才能选中标签
- IE不支持类名连续交集写法
- 交集选择器可以作为其他高级选择器的组成部分
```
  p.list.do {
      color:red
  }
  <p>111</p>
  <p>222</p>
  <p class="list">333</p>
  <p class="list do">444</p>
  <span>555</span>
  <span>666</span>
```

CSS选择器 — 并集选择器

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

p,span{
    color : red
}
<p>111</p>
<p>222</p>
<p class="list">333</p>
<p class="list do">444</p>
<span>555</span>
<span>666</span>

并集选择器用途
如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法
可以使用标签选择器的并集写法，进行默认样式清除，替换通配符的功能

继承性

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

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

层叠性 — 选中目标标签

思考问题 — 同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中盖集成那个祖先级的？
解决问题 — 就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，他会层叠、覆盖掉其他属性。
判断最终胜出的属性是谁，需要依赖判断优先级
判断选择器是否选中目标标签
- 选中目标标签
  - 第一步：比较选择器权重，权重高的层叠权重低
  - 第二步：权重一样，比较CSS中代码书写顺序，后写的层叠先写的
- 选中目标标签的祖先级
  - 第一步：比较就近原则，HTML结构距离目标标签的层叠远的
  - 第二步：如果距离相同，比较选择器权重，权重大的层叠权重小的
  - 第三步：如果权重相同，比较CSS书写顺序，后面的层叠前面的
- important
  - 在比较权重的过程中，important可以提升某条属性的权重到最大
  - 在就近原则比较时无效
- 行内式
  - 行内式权重高于所有其他选择器，但是低于important
选中目标标签
- 比较选择器权重，权重高的层叠权重低
  - 基础选择器的权重：根据选择范围，范围远大权重越小
  - * < 标签选择器 < 类选择器 < id选择器
  - 高级选择器权重比较方法：一次比较组成高级选择器的id的个数，类的个数，标签的个数，如果前面能够比较出大小就不在比较后面，如果前面相对就往后比较，直到比较出大小
    - 比较顺序：id个数，类的个数，标签的个数

层叠性 — 选中祖先级

选中目标标签的祖先级
- 如果选择器中的是祖先元素，文字的样式可以被继承
  - 第一步：比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的远近，近的迭代远的
  - 第二步：如果选中的祖先级距离目标一样近（同一个祖先级）比较选择器权重，权重大的层叠小的
  - 第三步：如果距离一样进，权重也相同，最后比较CSS中的书写顺讯，后面的层叠前面的