CSS day01

1.1 什么是CSS

  1. 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)（[标准通用标记语言](https://baike.baidu.com/item/%E6%A0%87%E5%87%86%E9%80%9A%E7%94%A8%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/6805073)的一个应用）或[XML](https://baike.baidu.com/item/XML)（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.2 语法

选择器+样式
案例：

  • 选择器用来指定cHTML标签的样式
  • 属性和属性值以键值对的形式出现
  • 属性和属性值用：分割
  • 属性值以；结尾

    1.3 代码风格

  1. 样式的格式书写
    1. 紧凑型 h {color : red;}
    2. 展开格式
  2. 样式大小写

  3. 空格规范

    1. 属性的：后面保留一个空格
    2. 选择器和大括号之间保留空格

      CSS基础选择器

      2.1 CSS选择器的作用

      根据需求把不同的标签选出来，这就是选择器的作用。

  4. 找到指定的标签

  5. 更改指定的样式

    2.2 基础选择器

  • 标签选择器
    • 优势：能够快速的把同一类标签选取出来
    • 缺点：不能够差异化的处理样式
  • 类选择器
    • 优势：可以实现差异化的选额一个或多个标签
  • id选择器
  • 通配符选择器

    2.3 类选择器

    多类名开发中使用的场景
  1. 可以把一些标签元素相同的样式放到一个类里面
  2. 这些标签都可以调用这个公共的类，然后调用自己独有的类
  3. 节省css代码，统一修改比较方便

    2.4 id选择器

    定义，只能调用一次
    一般用于页面唯一的元素

    2.5 通配符选择器

    在CSS中，使用*定义，可以选取所有的标签

    2.6 font-family定义字体系列

  • 每个字体需要使用英文逗号隔开
  • 如果出现某个字体有多个单词构成 使用空格分割和引号包裹

  • 尽量使用系统中自带的字体

    2.7 font-size字体大小

  • px常用的单位

  • 可以给body设置默认的文字大小

    2.8 font-weight字体粗细

    属性值：bold或者700(加粗)
    属性值：normal或者400(不加粗)

    2.9 font-style文字样式

  • normal 标准样式

  • italic 浏览器会显示倾斜字体

    3.1 字体的复合属性

    把字体的属性写在一起，减少代码量
    font：font-style font-weight font-size/line-height font-family

  • 不能更换以上属性的顺序

  • 不需要的属性值可以省略，注意font-size和font-family不能省略！！！

    3.2 CSS的文本属性

    文字颜色

  • red、green、blue属于预定义颜色

  • ff00EE 十六进制

  • rgb(255,0,0)

对齐文本
text-align 设置文本内容水平对齐方式

  • left
  • center
  • right

装饰文本
text-decoration 给文本添加下划线、删除线、上划线

  • none 默认 无
  • underline 下划线
  • overline 上划线 不常用
  • line-through 删除线 不常用

文本缩进
text-indent 通常用段落的首行缩进

  • ?px

行间距
line-height 控制文字行与行之间的距离
行间距=上下间距+文本高度
如果存在多行，可以使用上一行文字的底部为起点到下一行文字的底部测量得出行间距。

3.3 CSS的引入方式

  1. 行内样式表(行内式)
  2. 内部样式表(嵌入式)
  3. 外部样式表(链接式)

    3.3.1 内部样式表

    写在html页面内部，把css代码抽取出来，放到style标签内

  • style标签可以放在html页面的任何位置，一般放在标签中

    3.3.2 行内样式表

    直接在标签内部写上style标签，适合修改比较简单的样式。

  • style本身就是属性

  • 属性值使用双引号包裹
  • 只能控制当前的标签

  • 没有体现结构和样式分离，不常用！！！

    3.3.3 外部样式表

    实际开发多用于外部样式表，用于样式比较多的情况，核心是将样式单独写到CSS文件中，之后引入到html文件中。

  • 新建一个CSS文件，把所有CSS代码都当如此文件中

  • 3.3.4 引入方式总结

    | 引入方式 | 优势 | 缺点 | 控制 | | —- | —- | —- | —- | | 行内样式表 | 书写简单，适用于简单的样式 | 结构和样式混写 | 单个标签 | | 内部样式表 | 部分结构和样式分离 | 没有实现完全分离 | 单个页面 | | 外部样式表 | 完全实现结构和样式的分离 | 需要引入 | 多个页面 |

CSS day02

1. Emmet语法

该语法的前身是Zen Coding，使用缩写，来提高html/css的编写速度

  • 生成标签，直接输入标签名+tab键即可
  • 如果想生成多个标签，加上_就可以了，例如div_3
  • 如果存在父子级标签，使用> 比如ul > li 就可以了
  • 如果存在兄弟关系的标签，用 + 就可以了比如div + p
  • 如果生成带有类名或者id名的，直接使用.demo 或 #two tab
  • 如果生成的div类名是有顺序的， 可以使用自增 $ 符号
  • 如果想要在标签内直接输入文字 可以使用{}

    1.1 快速格式化

  1. ctrl + ,
  2. 搜索emmet.include
  3. 在system.json里设置 如下代码：

“editor.formatOnType”: true,
“editor.formatOnSave”: true

2. 复合选择器

在CSS中分为基本选择器和复合选择器，所谓复合选择器实际就是把基础选择器进行组合形成的

  • 复合选择可以更准确，更高效的选择目标元素
  • 复合选择器是由两个或多个基础选择器，不同方式组合形成的

  • 常用的复合选择有：后代选择器、子选择器、并集选择器、伪类选择器等等

    2.1 后代选择器

    后代选择器又称包涵选择器，可以选择父元素里面的子元素。
    语法格式：父标签写在前面 子元素写在后面用空格分隔

    2.2 子元素选择器

    只能选择某元素最近的一级选择器
    语法格式：元素1 > 元素2

    2.3 并集选择器

    把一组不同的标签组合起来，同时为他们指定样式，通常用于集体声明
    语法格式：使用，把各个选择器链接起来。
    语法规范：尽量竖着来写

    2.4 伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果
    语法格式：伪类选择器使用冒号：例如：hover ，：first-child

    2.4.1 链接伪类选择器

  • a:link 用于设置链接的样式

  • a:visited 用于设置访问过的链接样式
  • a:hover 用于设置鼠标悬浮在其上的链接样式
  • a:active 用于设置活动的链接样式，即鼠标按下未弹起

注意：必须遵守LVHA的顺序，避免不生效

2.5 focus选择器

主要用于设置表单的样式
语法格式：冒号+focus

2.6 复合选择器总结

后代选择器 选择父元素下的任意子元素 儿子、孙子都可以 a b 常用
子选择器 只能选择与父元素最近的一级元素 只能是儿子 a > b 少用
并集选择器 由两个或多个基本选择器组成 用于集体声明 a,b 常用
链接伪类选择器 用于设置链接不同状态的样式 和链接相关 a：LVHA 常用
focus选择器 用于设置表单元素样式 和表单相关 input：focus 常用

3. 显示模式

什么是元素的显示模式？
作用：一个网页的标签是比较多的，在不同的地方可以用到不同标签，了解他们的特点可以更好的给网页做布局。
实际上就是标签或者元素以什么样的形式显示出来
HTML一般分为块级元素和行内元素
例如：
div块级元素独自占一行，一行又可以放多个span元素

3.1 块元素

h1、p、div、ol、ul。。。

  1. 独占一行
  2. 高度、宽度、内外边距都可以控制
  3. 宽度默认是容器的宽度
  4. 每一个容器及盒子，里面都可以放行内或者块级元素

注意：文字类的元素不能放块级元素

3.2 行内元素

a、ins、i、del、s、span、strong、em。。。

  1. 一行可以有多个行内元素
  2. 宽度和高度设置 是无效的
  3. 默认的宽度是内容的宽度
  4. 行内元素只能容纳文本或其他行内元素

注意：
链接里面不能在放链接
特殊情况下a标签可以包含块级元素，但是最好给a标签转换成成块级元素

3.3 行内块元素

在行内元素中有几个特殊的标签，如：img、input、td他们同时具有块元素和行内元素的特点

  1. 在相邻的行内元素中，会有空格作为缝隙，一行可以放置多个—行内元素特点
  2. 宽度就是行内元素内容的宽度—行内元素特点
  3. 宽高和内外边距是可以设置的—块级元素特点

3.4 显示模式总结

行内元素 一行可以放多个 内容宽度为默认宽度 只能存文本或其他行内元素 无法设置宽高
块级元素 一行在只能放一个 默认宽度为容器宽度 可以存放任意元素 宽高和内外边距都可以设置
行内块元素 一行可以放多个 内容宽度为默认宽度 可以设置宽高

3.5 元素显示模式的转换
一个模式的元素需要另外一个模式的特性
display：block
display：inline
display：inline-block

3.4 小米侧边栏案例







手机 电话卡
电视 盒子
笔记本 显示器
家电 插线板
出行 穿戴

3.5 单行文字垂直居中原理

4. CSS背景

背景属性可以设置颜色、图片、位置、平铺、图像固定等等
background-color: transparent | color
一般情况下默认背景颜色是透明的

4.1 背景图片

常用于一些logo或者装饰性的小图片，或者超大图片。
优点：方便控制位置
background-image: url();

4.2 背景平铺

默认情况下都是平铺的
background-repeat: reeat | no-repeat | repeat-x | repeat-y
页面元素可以设置背景颜色和图片，但图片位于背景颜色上方

4.3 背景图片的位置

background-position：x y；
参数代表坐标，可以用方位名词或者精确单位

  • 如果两个值都是方位名词，前后顺序是不影响效果的， left top == top left
  • 如果只写一个方位词，那么第二参数默认居中对齐
  • 如果使用精确单位，那么左边的参数代表X轴，右边的参数代表Y轴
  • 如果采用混合写法，左边的一定是X轴

    4.4 背景图片固定

    是指背景图片是否随着页面其他原色移动而移动
    background-attachment：scroll | fixed

    4.5 背景图片的简写形式

    一般定义为 background: 背景颜色、背景图片地址、背景展示方式、背景是否滚动、背景图片位置

    4.6 背景颜色半透明

    background: rbga(0,0,0,alpah[0~1])

需求分析：

  • 首先需要把链接元素由行内元素转换成行内块元素
  • 需要把文本设置为水平垂直居中
  • 设置背景图片

  • 鼠标经过发生变化，需要设置链接伪类选择器

    5. CSS三大特性

    5.1 层叠性

    如果碰到冲突的样式那么根据就近原则进行覆盖

    5.2 继承性

  • 子元素可以继承父元素的样式(text-,font-,line-开头的可以继承包括color属性) 高度 宽度不可继承

  • 合理的使用继承能够极大减少代码量

行高的继承
font：15px/1.5 Micorsoft YaHei；

  • 行高的继承可以不带单位
  • 如果子元素没有设置行高，那么将自动继承父元素的1.5
  • 当前子元素的行高是：文字大小*1.5

    5.3 优先级

    当选择器相同时执行层叠性，如果不同则执行优先级

    5.4 选择器的权重

    | 继承或 * | 0，0，0，0 | | —- | —- | | 标签选择器 | 0，0，0，1 | | class选择器 伪类选择器 | 0，0，1，0 | | id选择器 | 0，1，0，0 | | 行内样式style=”“ | 1，0，0，0 | | !important | 无穷大 |

权重的特点：

  1. 由4组数字，不可进位
  2. 按从左到右的顺序进行比较，如果相同，则比较后位
  3. 可以理解为 行内样式>id选择器>类选择器>标签选择器

  4. 继承的权重为0，如果没有单独选出，不管父元素的权重有多高都为0





    我是子元素



    5.5 权重的叠加

    在复合选择器中，会出现权重叠加的情况，需要计算权重。

  • div ul li 0，0，0，3
  • .nav ul li 0，0，1，2

  • nav ul li 0，1，0，2

    CSS day03

    1. 盒子模型

    实际上就是把HTML中的布局元素看作成一个矩形的盒子(容器)
    CSS盒子模型，本质上是对HTML元素的一种封装，它包括外边距、内边距、内容和边框
    网页布局的核心本质
  1. 先准备好网页相关的元素，网页元素基本都是盒子
  2. 使用CSS设置盒子样式，并摆放到合适的位置
  3. 往盒子里添加内容

    1.1 盒子属性

  • margin 外边距
  • padding 内边距
  • content 内容

  • border 边框

    1.2 border

  • border-width

  • border-color
  • border-style
    • solid 实线边框
    • dashed 虚线边框
    • dotted 点状边框

  • border：1px solid red 没有先后顺序

    1.3 border-collapse

    表格的细线边框：
    作用：在表格场景中 合并相邻的单元格

    1.4 边框大小会影响盒子大小

    1.5 padding

    内容和边框的距离
    简写的形式及意义
    padding：5px 代表向下左右都是5px
    padding：5px 10px 代表上下5px 左右10px
    padding：5px 10px 6px 代表上是5px 左右10px 下是6px
    padding：5px 10px 6px 8px 上 右 下 左 顺时针

    1.6 padding也会影响盒子的实际大小

    1.7 padding 不撑开盒子的情况

    如果盒子本身没有指定宽度或高度，那么padding不会撑开盒子！！！

    1.8 外边距的运用

    可以让盒子水平居中，但必须满足下面两个条件

  • 盒子必须制定了宽度

  • 盒子的左右外边距都设置为auto

常见的三种写法：
margin-left：auto | margin-right：auto
margin：auto
margin：0 auto

1.9 外边距的合并与塌陷

使用margin定义块元素的垂直外边距时，可能会出现合并的现象

  • 当有两个块元素，并且是同级关系，上面的元素有margin-bottom属性，下面的元素有margin-top属性。此时这两个元素的间距并不是bottom+top，而是值较大的那个。称为相邻块元素垂直外边距的合并现象
  • 当有两个嵌套元素时，父元素有上外边距，子元素也有上外边距。此时父元素会塌陷至较大的外边距值
    • 给父元素设置边框
    • 给父元素设置padding
    • 给父元素设置overflow:hidden

清除内外边距
在网页中不同的元素有不同的内外边距，而且不同的浏览器也不一致，因此在布局前，取消所有元素的内外边距

注意：为了解决行内元素的兼容性，尽量只设置它左右的外边距！

2. PS的基本操作

3. 圆角边框

border-radius：length
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：

  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同
  • 设置圆形盒子
    • 先决条件原来的盒子必须是正方形，设置圆形的半径等于正方形款或者高的一半即可

  • 设置椭圆形盒子

    • 设置圆形的半径等于矩形高的的一半

      4. 盒子阴影

      语法格式：box-shadow：

  • h-shadow 水平阴影的位置

  • v-shadow
  • blur 模糊距离
  • spread 阴影尺寸
  • color 颜色
  • inset 将外部阴影改成内部阴影

注意：默认为outset，不需要手动写上，如果写上会不生效

5. 文字阴影

语法格式：text-shadow

  • h-shadow
  • v-shadow
  • blur 模糊程度

  • color

    CSSday04

    网页布局元素的分类有哪几种？

  • 标准流

  • 浮动

  • 定位

    1.1 什么是标准流

    标准流也称为文件流或文档流，是按照默认的标签格式进行排列的。

  • 如果是块元素，那么他们呢各自独占一行从上往下排列 div table ul ol li form p h hr….

  • 如果是行内元素，那么他们各自在一行从左到右排列，如果碰到父元素那么自动换行 a span i em….

    1.2 浮动

    概念：创建浮动框，将其移动到一边，直到左边缘或者右边缘触及边缘，包含块或另一个浮动框的边缘
    为什么要学习浮动？
    问题：

  • 如何将若干个div元素水平排列成一行，且元素间没有空隙？

  • 如何让两个元素左右对齐？

使用传统标准流是无法解决的，这时候需要使用浮动，目的就是为了改变标签的默认排列方式！
语法格式：选择器 {float: none left right}
网页布局的第一准则：多个块级元素纵向排列时使用标注流，多个块级元素横向排列时使用浮动。

1.3 浮动特性

  • 浮动元素会脱离标注牛(脱标)
    • 浮动元素会脱离标准流的控制
    • 不会保留原来的位置
  • 浮动元素的对齐方式
    • 当有多个元素设置浮动时，对齐方式为顶端对齐
    • 浮动的元素紧贴着排列，当父元素一行放不下时，会自动另起一行。

  • 无论什么元素一旦添加浮动，都具备行内块元素的特点

    • 如果块级没有设置宽度，默认和父级一样。加浮动后，宽度由内容来决定
    • 行内元素同理

      1.4 浮动元素常和标准流的父元素

      1.5 浮动元素的注意事项

      浮动元素和标准流父元素的搭配：

  • 先用标准流的父元素排列上下位置，再再内部用浮动元素排列左右

一个元素浮动了，理论上兄弟元素也要跟着一起浮动

  • 一个盒子里有多个元素，如果一个元素浮动了，那么其他兄弟元素也要跟着浮动。

  • 浮动的盒子只会影响到后面的标准流，不会影响到前面的盒子。

    1.6 为什么要清除浮动

    多数情况下我们不方便给标准流父元素设置高度，因为不知道内容的大小，一旦内容设置浮动后，它本身是不占用空间的。此时父元素的高度为0，这回影响其他元素的排版。

    1.6.1 清除浮动的本质

    概念：实际上就是清除浮动元素脱离标准后流带来的影响
    策略：闭合浮动
    方法：

  • 额外标签法 隔墙法

    • 在浮动元素末尾添加空标签，且必须是块元素。clear: both left right
  • overflow
    • 给父元素设置overflow属性，hidden auto
    • 优点代码简洁
    • 缺点无法显示溢出的部分
  • after伪元素
    • .clearfix :after { content: “”,display:block height: 0; clear: both visibility: hidden}
    • .clearfix { *zoom: 1} 用于兼容IE6、7
  • 双伪元素
    • .clearfix:before,.clearfix:after {content: “”; display: table;}
    • .clearfix-after { clear: both;}
    • .clearfix { *zoom: 1}
    • 优点代码简洁，缺点是照顾低版本浏览器~

清除浮动总结：

  1. 父级没有高度
  2. 子元素浮动了
  3. 影响下面布局了
    | 额外标签法 隔墙法 | 通俗易懂，写法简单 | 添加了无意义的标签，结构性差 | | —- | —- | —- | | overflow | 写法简单 | 无法显示溢出的部分 | | after伪元素法 | 书写复杂 | IE6-7不支持:after,照顾了兼容性问题 | | 双伪元素法 | 简洁易懂 | IE6-7不支持:after,照顾了兼容性问题 |

5. 学成在线案例

  1. 创建工程目录文件夹
  2. 在目录文件夹下新建img文件夹
  3. 使用VScode打开目录文件夹
  4. 创建index.html
  5. 创建style.css

  6. 引入CSS文件

    5.1 CSS属性书写顺序(重点)

  7. 布局定位：display\position\float\visibility\overflow

  8. 自身属性：width、height、margin、padding、border、background
  9. 文本属性：color、text-、font、

  10. 其他属性(css3)：content、border-radius、box-shadow、text-shadow…

    5.2 页面布局的整体思路

  11. 必须确定页面的版心(可视区)

  12. 分析页面中的模块，以及每个行模块的列模块 也就是页面布局第一准则
  13. 一行中的列模块经常浮动布局，先确定每个列的大小，再确定位置 也就是页面布局第二准则
  14. 制作html结构，遵循先有结构 后有样式的原则，结构永远最重要

  15. 所以要先搞清楚布局结构，再写代码尤为重要，多练多练多练！！！！

    5.3 头部制作

    导航栏注意点：
    实际开发中，不会直接用链接a而是用li 包含链接(li+a)的做法

  16. li+a语义更加清晰，一看就是有条理的列表型内容

  17. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑，故意堆砌关键字容易被搜索引擎降权处理，致使网页排名下降！

注意：

  • 让导航栏在一行显示，因为li是块级元素，需要设置浮动，让其在一行内显示
  • 可以不设置导航栏的宽度，以便将来可以添加新的导航内容

  • 因为导航栏内的文字个数不同，最好给a链接设置左右padding撑开盒子

    5.3.2 搜索框的制作

    分析：

  • 设置好大盒子的宽高以及外边距

  • 内部嵌套两个盒子
    • 搜索文本框设置宽高，注意右测得框线设置。
      • 默认文字样式：颜色、大小、左内边距。因为盒子本身有宽度，使用padding后需要减少盒子宽度
    • 设置按钮的宽高