Bluemsun第三周预习

CSS基础
- 声明块
- - 样式表
  - 常见样式声明
- 选择器
- 选择器的组合与并列
- - 组合
  - 并列
层叠与继承
- 层叠
- - 1.重要性
  - 2.特殊性
  - 3.源次序
  - - 爱恨法则的原理就是比较源次序！！！
盒模型
- 行内/块元素之殇
- 盒子的组成部分
- 行盒的盒模型
- - 行盒的特点：
  - 行块盒
总结

前言：
css这一章知识点比较多，学的时间久了一点。。

CSS基础

css全称为Cascading Style Sheets，意为层叠样式表。我们在HTML之中说过，页面的样式由css代码完成，这里可以暂且将HTML之中的元素对应成css之中的规则。
CSS规则=选择器+声明块

声明块

声明块出现于{}之中，每一个声明表示了其样式。

样式表

样式表是css代码的书写位置，其引用有三种
1.内部样式表
顾名思义，内部样式表书写于style内部，应该在head里面进行声明。

<head>
...
<style>css内容</style>
</head>

2.内联样式表
内联样式表与内部样式表有所不同，它要在元素内部进行联用。

<h1 style="color:red;">~~</h1>

3.外部样式表
外部样式表是将样式书写到独立的css文件之中，可以说是用的最多的

<head>
...
<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
</head>

外部样式表有几个优势：

1.可以解决多页面样式重复问题
2.有利于浏览器缓存，提高效率
3.有利于代码分离，易于代码保护

常见样式声明

1.color:指的是元素内部的颜色
颜色的定义有两种方法
1.颜色预设值：意为已经定义好的颜色、例如：red，blue等等。
2.色值表示法:通过计算色值来表示，每种颜色可以用0~255之间的数字表达

色值表示法还分为两种：rgb表示法和hex表示法
rgb表示法：通过光学三原色（red，green，blue）进行计算，每个颜色取值为0~255.。
hex表示法：通过十六进制进行计算，格式为#红绿蓝。

这里面介绍几个很火的颜色（笑）
#008c8c 马尔斯绿
#002FA7 克莱因蓝
#003153 普鲁士蓝
#FBD26A 申布伦黄
#470024 勃艮第红
（尊的很好看啊qwq）

2.background-color：元素背景颜色。（真的只是字面意思）
3.font-size：元素内部文字尺寸大小。
其有两个单位：px和em

px：像素，是绝对单位
em：指的是相对父元素的字体大小，是相对单位

这里对于em我们要注意的是，若无，则继承父元素字体大小，直到HTML时使用基准字号。
4.font-weight：字体粗细
定义时可以用文字/数字

normal=400
bold=700

5.font-family：字体
字体之中需要注意的是，所使用的字体必须是用户计算机中存在的字体，此兼容性问题我们通过定义多个字体实现

注意：最后最好写上sans-serif（非衬线字体），简而言之就是兜底的。

6.font-style：字体样式
取值为italic时，可以实现字体倾斜。

7.text-decoration：文本修饰
可以实现给文本加线

overline：文本上加线
line-through：穿过文本加线
underline：文本下加线

8.text-indent：首行文本缩进
取值同为px与em。
9.text-aline：元素内部文字水平排列方式
这最常见的就是直接取值为center。
10.line-height：每行文本高度
这个常用于设置使得文本完全居中。

文本完全居中：1.设置height 2.设置line-height与其相同 3.设置text-aline使其为center

11.width/height
指的是元素的高度与宽度。

选择器

选择器，顾名思义，是要将某种东西选择出来，那我们要选什么呢？其实是要选择相应的元素来对其设置样式。

1.元素选择器
字面意思，十分简单，看中哪个元素就把他选上。

（选中的元素）+{声明块内容}

2.ID选择器
id选择器存在的目的就是要特异性的来选择元素。在这里我们要先明确元素的id属性，然后再进行使用。

#+id+{声明块内容}

这样我们就选中了id为此的元素

3.类选择器
类选择器的适用范围极其之广，可以说是最常用的选择器，在这里我们需要引用一个全局属性class来对其进行筛选

.+class名+{声明块}

这样我就选中了class名为此的一类元素

需要注意的是，id是独一无二的，而class类名可以设置成一样的

4.通配符选择器
比较无脑的一个选择器，他会选择所有元素。。。。

*+{声明块内容}

这就是通配符*，覆盖面广，但其特殊性就会差一些。

5.属性选择器
属性选择器相对比较特殊，他是通过属性名与属性值来选中元素

[属性]+{}：表示选择所有具有此属性的元素
[属性+属性值]+{}：特殊性更强一些，精确到属性值。

属性选择器还有各种稀奇古怪的用法（不是），具体可以参考此链接
属性选择器mdn

6.伪类选择器
伪类选择器无法顾名思义（笑），它表示选中某些元素的某种状态。

link：超链接未被访问过的状态
visited：超链接被访问过的状态
hover：鼠标悬停的状态
active：激活状态
举个栗子qwq

a:hover{color:red;}

需要注意的是，伪类选择器的书写是有顺序的，称之为love-hate法则，其原理后面会讲。

7.伪元素选择器
伪元素选择器的用法有些朦胧，目前有一用法；
在所选内容前后生成一个新的子元素。

元素+::before/after{声明块}

更多应用方法请见此链接

选择器的组合与并列

组合

1.且关系，两个选择器之间不加任何东西，同时满足两者

a.class{。。。}

2.后代元素：两个选择器空格连接

div li{。。。}

3.子元素：两个选择器‘>’连接

div>ul{。。。}

4.相邻兄弟元素：A+B形式，表示选中A后的第一个B。
5.兄弟元素：A~B形式，表示选中A后的所有B。

并列

这是一种”语法糖“式的写法，，每种选择器用‘，’链接。

层叠与继承

CSS全称为层叠样式表，那么理解层叠就很有必要。
首先我们明确一个概念：声明冲突
同一样式同时应用到同一元素叫做声明冲突

层叠

为了解决声明冲突，我们理解层叠
层叠又称权重计算，是一个解决声明冲突的过程，由浏览器完成
层叠分为三步，比较重要性，比较特殊性，比较源次序。

三步是有先后次序的！！！！

1.重要性

重要性比较要从高到低：作者样式表!important>普通作者样式表>浏览器默认样式表。

2.特殊性

总体规则：选择器所选范围越窄越特殊。
具体计算过程：通过选择器计算一个四位数

（千位）：如果是内联样式，记为1，否则为0。
（百位）：等于选择器中ID选择器的个数
（十位）：等于所有伪类，类，属性选择器的个数
（个位）：等于所有元素，伪元素的个数

经统计，这个数大概是逢256进1

3.源次序

代码书写靠后的胜出！！

爱恨法则的原理就是比较源次序！！！

由于源次序使得靠后的胜出，则可知，当重要性与特殊性相同时，active先胜出，这时不会影响我们所需的样式。

盒模型

box：盒子，每个元素在页面都会生成一个矩阵区域

行内/块元素之殇

盒子类型：
1.行盒（display等于inline的元素）：实际就是行内元素。
2.块盒：(display等于block的元素)：实际是块元素。
display的默认值是inline。

盒子的组成部分

无论是行盒还是块盒，都由四个部分组成，从内到外为：

1.内容contect：我们之前介绍的width，height为盒子内容的宽高。
2.填充（内边距）padding：边框到内容的距离，含有上下左右四个方向，分别可以定义为padding-left/right/top/bottom，或者使用语法糖写法：padding：上右下左；
3.边框border：边框=样式+宽度+颜色（style，width，color）其中样式默认为none，color默认为字体颜色。
4.外边距margin：表示边框到其他盒子的距离，其定义相当于padding的用法

行盒的盒模型

行盒的特点：

1.盒子沿着内容延申
2.不能设置宽高，其通过字体大小，行高，字类型
3.内边距，边框，外边距只在水平方向上有效，垂直方向仅影响背景。

行块盒

行块盒：display=inline-block
它不独占一行，但是盒模型的所有尺寸都能生效

具体可以参考网页的换页处~

总结

CSS的内容真的很多，而且精通的话需要很多的练习，要求我们熟悉其应用环境，多敲代码。
写于
2022/4/12
20：10

Bluemsun第三周预习【CSS+选择器+盒模型】相关推荐

面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
CSS学习—盒模型和布局模型
最近做的小项目需要搭建一个小网站,因此从慕课网上学习HTML+CSS的基础知识,将接触到的知识点用这个博客总结出来. 一.盒模型 1.元素分类在CSS中,html中的标签元素大体被分为三种不同的 ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
CSS——弹性盒模型(Flex)
CSS--弹性盒模型前言本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
php如何每天自调用不同的ccs,Python-ccs高级选择器盒模型
css高级选择器与盒模型脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...

Bluemsun第三周预习【CSS+选择器+盒模型】