CSS笔记-基础篇-css从入门到精通

出现的原因

历史

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。
1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

总结为一句话：1994年哈坤·利提出css概念，1996年第一版完成，1997年第二版完成

作用

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

美化页面，减少html的臃肿

参考文档

• 入门教程：https://www.w3school.com.cn/css/index.asp
• 参考手册：https://www.w3school.com.cn/cssref/index.asp，https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

基本概念

css的作用是对页面上的元素重新排列，使其变得更美观，排列过程中会涉及到的内容有：

• 语法（css是一种控制元素的语言，那么它的写法是什么，在哪里写）
• 选择器（页面上那么多元素怎么能精准的控制某一个或一批的元素）
• 盒子模型（一个元素在页面上有哪些部分组成）
• 效果（能够改变元素的哪些属性）
• 展示（控制元素在页面上的位置，在元素中的位置，显示与隐藏）

语法

写法

css的基本组成为：选择器 {属性1：值1；属性2：值2…}
其中选择器部分可以是一种，也可以是多种选择器的组合，属性和值的组合即为需要控制的效果，多个属性之间使用分号隔开

注释

css代码中使用/*注释内容*/来写注释，此内容并不会被执行，注释内容可以是单行也可以是多行

书写位置

根据css与页面元素的位置将其分为三种：

• 行内式（作为元素的属性存在，使用style属性指定）
• 内部式（单独使用style标签存放样式）
• 外部式（将css代码单独写在文件中，在页面上通过link方式链接进来）

选择器

在css中最重要的就是选择器了，它决定了你能控制的元素，只有先准确的找到了对应的元素才可以控制它们的属性
目前总共有五类选择器：

• 简单选择器
• 组合选择器
• 伪类选择器
• 伪元素选择器
• 属性选择器

简单选择器

使用元素标签名、id属性值、class属性值、或*进行选取的都称为简单选择器

/*元素选择器，可以为页面上的任意元素*/
p {} 

/*id选择器，使用#区分，紧跟的为标签中的id属性值*/
#idattr {} 

/*类选择器，使用.区分，紧跟的为标签中的class属性值*/
.classattr {}

/*通用选择器，表示选取页面上所有的元素*/
* {} 

组合选择器

组合选择器使用的还是简单选择器中的四种，区别在于它可以使用多个简单选择器，通过一些特定的符号即可组合出不同的选取功能
总共有五种：分组、后代、子元素、相邻兄弟、通用兄弟

/*分组选择器，通过逗号分隔多个选择器，从而对多个被选中的元素进行统一操作*/
选择器1,选择器2...{}

/*后代选择器，在选择器1选中元素的后代里选取符合选择器2的元素，使用空格分隔*/
选择器1 选择器2 {}

/*子元素选择器，在选择器1选中元素的儿子中选取符合选择器2的元素，使用大于号分隔*/
选择器1 > 选择器2 {}

/*相邻兄弟选择器，和选择器1具有相同父元素的下一个符合选择器2的元素，选中的元素同级，使用加号分隔*/
选择器1 + 选择器2 {}

/*通用兄弟选择器，和选择器1具有相同父元素的所有符合选择器2的元素，选中的元素同级，使用波浪号分隔*/
选择器1 ~ 选择器2 {}

/*加强关系，表示选取同时满足选择器1和选择器2的元素*/
选择器1选择器2 {}

伪类选择器

伪类，顾名思义不是真正存在的，它是部分元素自带的类，它标识的是一种状态，具体有哪些伪类名可参考：https://www.w3school.com.cn/css/css_pseudo_classes.asp

/*伪类选择器，通过冒号控制元素在某种状态下的样式*/
选择器1:伪类名称 {}

伪元素选择器

和伪类选择器类似，伪元素是自带的元素，可以认为是元素周围默认插入的其他元素，它标识的是元素的位置样式，具体伪类可参考：https://www.w3school.com.cn/css/css_pseudo_elements.asp

/*伪元素选择器，通过两个冒号控制元素周围的样式*/
选择器1::伪元素名称 {}

属性选择器

通过元素的属性进行区分，根据属性的不同又可以区分为7中类型

/*选取满足选择器且具备属性1的元素*/
选择器[属性1] {}

/*选取满足选择器且具备属性1=值1的元素*/
选择器[属性1=值1] {}

/*选取满足选择器且属性1中具备值1的元素*/
选择器[属性1~=值1] {}

/*选取满足选择器且属性1中以值1开头的元素*/
选择器[属性1!=值1] {}

/*选取满足选择器且属性值以值1开头的元素*/
选择器[属性1^=值1] {}

/*选取满足选择器且属性值以值1结尾的元素*/
选择器[属性1$=值1] {}

/*选取满足选择器且属性值包含值1的元素*/
选择器[属性1*=值1] {}

不同选择器之间的权重也不一样，style指定的样式权重为1000，id为100，类或伪类为10，元素名或伪元素为1，css根据权重的总和判断该执行哪部分代码，可通过！important将特定的权重提升至最大
继承后的权重为0

盒子模型

页面是由元素组成的，每个元素就是一个盒子，元素的内容放在盒子里，除了内容外还会有一些额外的东西，在页面上将盒子分为四部分：

• 内容（元素实际存放的内容）
• 边框（包围内容的一圈线条）
• 内边距（内容与边框之间的缝隙）
• 外边距（边框到其他盒子之间的距离）

每一部分都由上下左右四部分构成

效果

css可以控制页面上所有的元素样式，主要分为以下几类：

• 文字的样式
• 元素的颜色
• 元素的宽高
• 边框（内边距，边框，外边距）
• 背景
• 列表
• 表格
• 链接

文字

页面上大部分内容都是由文字组成的，因此css对其提供了特别多的支持

• 文字颜色（color，可选值为颜色名、十六进制值、RGB）
• 文字水平对齐（text-align，可左、右、居中、拉伸对齐）
• 文字垂直对齐（vertical-align，可上、中、下对齐）
• 文字装饰（text-decoration，可设置上滑、下滑、删除线）
• 文本转换（text-transform， 可设置首字母、全字母大小写）
• 文字缩进（text-indent，首行缩进；letter-spacing，字母间距；line-height，行高；）
• 字体（font-family）
• 字体样式（font-style，倾斜；font-weight，粗细；font-size，大小，通常使用em作为单位）
• 简写形式（font，顺序为font-style font-variant font-weight font-size/line-height font-family）

所有字体属性参考：https://www.w3school.com.cn/css/css_font_shorthand.asp，所有文字属性参考：https://www.w3school.com.cn/css/css_text_shadow.asp

颜色

在css中指定颜色有四种方式：

• 颜色名（red、blue…）
• RGB（rgb(红，绿，蓝)，其中的颜色为0-255的数值）
• HEX（十六进制数，#rrggbb，每两位取值范围00-ff）
• HSL（hsl(色相，饱和度，亮度)，每位取值范围0-100%）

使用颜色的元素有：

• 文本（color）
• 边框（border[-方位]）
• 背景（background-color）

宽高

• 宽度（width）
• 高度（height）
• 立体度（z-index）

通常所指的宽高都是说内容的宽高，而盒子的宽高计算需要加上内边距、外边距和边框的宽高，宽高计算方式为：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

边框（内边距，边框，外边距）

• 宽度
• 颜色
• 样式
• 简写

背景

• 背景色
• 背景图
• 是否滚动
• 简写形式

列表

表格

• 边框
• 合并边框
• 对齐

链接

• 颜色
• 伪类样式
• 文本装饰
• 背景色

展示

将页面想象为一个二维白板，左上角为起始点，元素向搭积木一样顺序排列，可存在如下几种排放方式：

• 定位（以左上角为坐标原点，手动指定元素具体存在在哪里）
• 浮动（使元素脱离第一层二维平面，在其前面重新建立二维平面，在第二层上排列）
• 显示与隐藏
• 溢出（元素内容大于指定大小时的处理方式）

定位

在css中，定位通过position设置类型，上下左右设置具体位置，未浮动的元素在页面上的定位方式有四种：

• 静态定位（static，按照元素的顺序依次排列，不受上下左右数值的影响，默认的定位类型）
• 相对定位（relative，先执行静态定位，然后按照上下左右的数值微调）
• 固定定位（fixed，不执行静态定位，固定在窗口的某个位置，由上下左右的数值决定）
• 绝对定位（absolute，不执行静态定位，以父元素为定位元素的位置进行偏移）

浮动

在css中，浮动通过float设置，浮动的主要目的是用来实现文字包围图片的效果，总共有四种：

• 左浮动（left，先默认排列，垂直方向不变，水平方向移到最左边）
• 右浮动（right，先默认排列，垂直方向不变，水平方向移到最右边）
• 不浮动（none，按照默认的位置排放，水平方向不移动）
• 继承浮动（inherit, 继承父元素的浮动类型 ）

可以设置浮动也可以清除浮动，清除浮动有五种，使用clear指定，分别为左、右、两侧、不清除和继承父类的属性
在浮动的时候也可以指定定位

显示与隐藏

要把元素放在页面上，首先要搞清楚元素占用的空间，通过display控制，根据所占宽度的不同可以将元素分为三种类型：

• 行内元素（inline，无法指定宽高，大小由内容本身决定）
• 块级元素（block，可以指定宽高，独占一行）
• 行内块元素（inline-block，可以指定宽高，由行内元素或行内块元素转换而来，大小为指定的宽度）

隐藏元素时分为两种：

• 直接删除（使用display：none指定，隐藏后不占用位置）
• 隐藏（使用visibility: hidden指定，隐藏后会继续占有原来的位置）

溢出

当内容超出元素指定的大小时就会出现溢出，控制溢出的样式由overflow指定，它有四种类型：

• 可见（visiable，默认值，溢出后继续显示）
• 隐藏（hidden，将溢出的部分隐藏）
• 滚动（scroll，无论是否溢出都加滚动条）
• 自动（auto，自动适配，只有在溢出后才显示滚动条）