2020年CSS课堂笔记

CSS（基础）

1. css简介

css：层叠样式表

选择器：删选具有相似特征的元素

语法：

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

css引入方式

1. 行内样式：将css代码写在元素开始标签的style属性中，可以设置多个样式，使用";"隔开
2. 内部样式：在当前网页head标签中，写上一对style标签，然后在style标签中，使用选择器编写css代码
3. 外部样式：需要一个单独的css文件书写css样式，在head标签中使用link标签把单独的css文件关联起来，在同一个页面可以引入多个css文件（是使用最多的样式）

2.css选择器

1. 基础选择器
   • id选择器：选择具体的唯一的id属性值的元素
     • 语法：#id属性值{ }
   • 元素选择器：选择具有相同标签名称的元素
     • 语法：标签名称{ }
   • 类选择器：选择具有相同的class属性值的元素
     • 语法：.class属性值{ }

注意：id选择器优先级高于元素选择器，类选择器优先级高于元素选择器

2. 扩展选择器：
   • 选择所有元素
     • 语法：*选择器{ }
   • 并集选择器
     • 语法：选择器1，选择器2{ }
   • 子选择器：筛选选择器1元素下的选择器2元素
     • 语法：选择器1 选择器2{ }
   • 属性选择器：选择元素名称，属性名=属性值的元素
     • 语法：元素名称[属性名="属性值"]{ }
   • 伪类选择器：选择一些元素具有的状态
     • 语法：元素:状态{ }
     • 如：<a>
       • 状态：
         • link：初始化的状态
         • visited：被访问过的状态
         • active：正在访问状态
         • hover：鼠标悬停方向

3.伪类和伪元素

伪类：元素在不同状态下表现的不同样式

伪元素：文档结构中没有出现的元素

伪元素使用::

静态伪类：只能用于超链接，用得少

1. link:超链接点击之前的样式
2. visited:超链接点击之后的样式

动态伪类：能用任何元素

1. hover:鼠标放到元素上的状态，最常用的状态
2. active:点击时没有松开鼠标的状态，用得不多
3. focus:输入框在获得焦点时的状态

4.CSS基础

块级元素特点：

1. 可以设置行高
2. 独占一行，不能和其他元素待在一行
3. 当没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定
4. 当设置有宽高时，元素的宽高就是设置的值

行级元素特点：

1. 不可以设置宽高，设置的宽高无效
2. 可以和其它元素呆在一行
3. 宽度由元素内容决定

行内块级元素特点：

1. 可以设置宽高
2. 可以和其它元素呆在一行
3. 当没有设置时，宽高由元素内容决定
4. 当设置有宽高时，元素的宽高就是设置的值

常用尺寸单位：
像素：px
   1.屏幕上的一个点作为单位，稳定精确
   2.用得最多的尺寸单位

em单位
   1.em是以自身字体大小作为参考,是自身字体大小的倍数
   2.当自身字体大小改变时，em会跟着改变
   
rem单位
   1.rem是以根元素(html元素)字体大小作为参考,是根元素字体大小的倍数
   2.当根元素字体大小改变时，rem会跟着改变
   
%单位
   1.%是以父元素作为参考,是父元素的百分比
   2.当父元素改变时，使用%作单位的子元素会跟着改变

颜色表示方式
   颜色名称：
      1.html和css规范中定义了147种可用的颜色名
      2.颜色名用得少
   16进制颜色值:
      1.#rrggbb  ,rr(红色)，gg(绿色)，bb(蓝色)
      2.16进制整数规定颜色成分，所有值必须介于 00与ff之间
      3.用得多
      
   rgb颜色值
      1.通过定义三种（红，绿，蓝）颜色的强度来定义颜色 
      2.所有值必须介于 0到255之间
      3.rgb(红,绿,蓝);            

   rgba颜色值
      1.在rgb颜色值基础上增加了透明度 
      2.a:alpha表示透明度，取值0-1
      3.a取值为0时，表示完全透明，取值为1时，表示完全不透明.值越小，透明度越高              

5.字体属性

1. font-family：设置字体类型，默认微软雅黑

2. font-style：设置斜体文字

   • normal 文字正常显示
   • italic 字体倾斜
   • oblique 偏倾斜
   • inherit 和父元素字体样式一样

3. color：设置文字颜色， 默认为黑色

   • 合法的颜色值：颜色名 16进制颜色值 RGB颜色值 RGBA颜色值

4. font-variant：设置不同大小的大写字母

5. font-weight：设置字体的粗细

   • 数字 100 - 900 没有单位 数字越大，字体越粗

   • normal 正常 相当于700

   • bold 粗体

   • bolder特粗体

   • lighter 特细体 相当于400

6. font-size：设置字体的大小，默认16px

6.文本属性

1. text-indent：文本缩进
   • 尺寸单位 使用em（1em等于1个汉字的长度）作为单位
2. text-align：文本的水平对齐方式
   • left 左对齐
   • right 右对齐
   • center 居中
3. vertical-align：垂直对齐方式
   • baseline 默认值，对齐父元素基线
   • sub 对齐下标
   • super 对齐上标
   • top 顶部对齐
   • bottom 底部对齐
   • middle 垂直居中对齐
4. word-spacing：设置中文字（英文单词）之间的标准间隔
5. letter-spacing：设置字符（字母）之间的间隔
   • 合法的尺寸单位，如果设置为负值，字间距会变小
   • normal：正常的字间距
6. text-transform：设置文本的大小写
   • none 对文本不做任何修改
   • uppercase 全大写
   • lowercase 全小写
   • capitalize 单词的首字母大写
7. line-height：设置行高，行与行之间的间距
   • 合理的行高 默认值normal
   • 尺寸单位 固定的行高
   • 数字 当前字体尺寸的倍数来设置行高
   • 百分比 当前字体尺寸的百分比来设置行高
8. text-decoration：添加到文本的修饰
   • none 默认标准的文本
   • underline 定义文本下的一条线
   • overline 定义文本上的一条线
   • line-through 定义穿过文本的一条线
   • inherit 定义闪烁的文本
9. text-shadow：设置文本阴影
   • 值1 值2 值3 值4
     • 值1 水平阴影位置 。正值，阴影在右；负值，阴影在左
     • 值2 垂直阴影位置。正值，阴影在下；负值，阴影在上
     • 值3（可选） 阴影模糊距离
     • 值4 （可选）阴影颜色：合法颜色值

7.背景属性

1. background-color：设置背景色
   • transparent：透明
2. background-image：设置背景图像
   • none：没有任何图像
   • url(图片路径)
3. background-repeat：对背景图像进行平铺
   • no-repeat 不允许平铺
   • repeat 水平垂直方向重复平铺
   • repeat-x 向水平方向重复平铺
   • repeat-y 向垂直方向重复平铺
4. background-position：设置图像在背景中的位置
   • center 居中
   • top 上边
   • bottom 底部
   • right 右边
   • left 左边
5. background-attachment：设置固定的背景图像
   • scroll：默认值，背景图像随滚轮而滚动
   • fixed：滚轮滚动，图像不动

8.边框属性

边框四大要素：宽度、颜色、样式、方向

简写：border-边框方向: 边框宽度 边框颜色 边框样式;

1. border-width：设置边框的宽度
   • 从上、右、下、左的顺序指定宽度
2. border-color：设置边框颜色
3. border-style：设置边框的样式
   • none 定义无边框
   • dashed 定义虚线
   • solid 定义实线
4. border-radius：设置圆角边框
   • 按照上左、上右、下右、下左的顺序设置像素值
5. box-shadow：设置边框阴影
   • 值1 值2 值3 值4
     • 值1：水平阴影位置
     • 值2：垂直阴影位置
     • 值3（可选）：阴影模糊距离
     • 值4（可选）：阴影尺寸
     • 值5（可选）：阴影颜色，默认黑色
6. outline：轮廓设置，轮廓会加在边框之外
   • 边框宽度 边框颜色 边框样式

9.盒子属性

盒子模型

1. 所有元素都可以有宽高
2. 所有元素都是一个矩形，都可以看做一个盒子
3. 盒子包括：外边距+边框+内边距+元素内容

外边距

外边距要素

1. 外边距的方向:top bottom left right
2. 外边距尺寸：合法的尺寸单位 百分比

外边距语法

margin：设置外边距

margin-方向：设置该方向的外边距属性值

同时设置4个方向的值

1. margin ：上 右 下 左 （从上到左顺时针排列）
2. margin ：上 左右 下
3. margin：上下 左右
4. margin：4个方向一样的值

margin: 0 auto;块级元素水平居中，只对块级元素有效

注意：

1. 元素上下排列时，上下外边距会合并（上下外边距取最大值）
2. 元素左右排列时，左右外边距会叠加（左右外边距会相加）
3. 行级元素只有左右外边距，没有上下外边距
4. 块级和行内块级元素的外边距4个方向都有效

内边距

所有元素都可以设置内边距

内边距要素

1. 内边距的方向：top bottom left right
2. 内边距大小：合法的尺寸单位，百分比

内边距语法

padding：设置内边距

padding-方向：设置该方向的内边距属性值

同时设置4个方向内边距

1. padding：上 右 下 左（从上到左顺时针排列）

2. padding：上 左右 下

3. padding：上下 左右

4. padding：4个方向值一样

5. overflow：规定内容溢出了元素框时发生的事情

   • visible 内容不会被修剪，会显示在元素框之外 默认值
   • hidden 内容会被修剪，溢出的内容不可见
   • scroll 内容会被修剪,会显示滚动条，以便查看溢出的内容
   • auto 当内容大于元素框时， 内容会被修剪,会显示滚动条，以便查看溢出的内容。当内容小于元素框时，不会显示滚动条

10.列表、表格、鼠标、滤镜

列表

1. list-style-type：设置列表标志类型
   • none：列表样式重置
2. list-style-position：设置列表标志位置
   • outside 标志在列表项之外
   • inside 标志在列表项之内
3. list-style-image：设置列表项图像
   • url(图像路径)

简写：list-style：列表标志 列表标志位置 列表项图像

表格

1. border-spacing：设置相邻的单元格距离
   • 水平间隔值 垂直间隔
2. border-collapse：设置是否表格边框合并为单一的边框
   • separate 默认值，边框会被分开
   • collapse 表格边框合并为单一的边框
3. width：设置宽高
4. height：设置行高
5. text-align：表格文本对齐
6. background：设置表格背景

鼠标

1. cursor：设置鼠标箭头样式
   • auto 默认，浏览器设置的光标
   • pointer 一只手

滤镜

1. filter：定义图像的可视效果
   • blur(合法的尺寸单位) 高斯模糊 ，默认值是0，值越大，图像越模糊
   • saturate(百分比) 饱和度，默认值是100%，图像不变，0%时图像会变成黑白图像
   • grayscale(百分比) 灰度，默认值是0%，值为100%，图像会变成黑白图像
   • contrast(百分比) 对比度，默认值：100%，图像没有变化。值为0%时，图像会变成全黑
   • opacity(百分比) 透明度，默认值：100%，表示完全不透明，0%时，表示完全透明

11.浮动与定位

浮动

浮动：让块级元素能在一行

浮动特点

1. 浮动元素就像浮云一样浮起来了。浮动元素后面的正常元素会自动补位
2. 浮动元素会脱离正常的文档流，并没有完全脱离文档流
3. 浮动元素会被父元素宽度所约束，所以浮动元素并没有完全脱离文档流
4. 浮动元素会对它下面正常元素中的文字产生影响

动的特点

1. 当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行
2. 左浮动：元素会向左跑，会从上一行最右边出来继续往左跑，直到遇到有浮动属性的元素，才会停止
3. 右浮动：元素会向右跑，会从上一行最左边出来继续往右跑，直到遇到有浮动属性的元素，才会停止

语法：

1.float: 浮动

• left 向左浮动
• right 向右浮动

清除浮动

1. clear：规定元素哪一侧不能有浮动元素
   • left; 元素左侧不能有浮动元素
   • right; 元素右侧不能有浮动元素
   • both;元素左右两侧都不能有浮动元素

注意：设置清除浮动属性时，要考虑元素的加载顺序

定位

定位：规定元素的位置，用于没有规律的元素而布局
定位的三种类型：相对定位，绝对定位，固定定位
定位使用方法：

1. 规定是哪一个定位方式 position: 定位方式
2. 指定在方向上的偏移量:top bottom left right

注意：top和bottom只有一个会生效，left和right只有一个会生效，left和top优先

1. position : 设置定位方式
   • relative 相对定位
   • absolute 绝对定位
   • fixed 固定定位

相对定位

position: relative;

1. 指定了相对定位后，元素就是一个定位元素，脱离文档流,但没有完全脱离文档流
2. 相对定位元素脱离了文档流，但原来的位置还得保留
3. 相对定位是相对于原来的位置进行定位

绝对定位

position: absolute;

1. 指定了绝对定位后，元素就是一个定位元素，完全脱离文档流
2. 原来的位置不会保留
3. 绝对定位是相对于最近有定位属性的父元素进行定位.如果往上没找到有定位元素的父元素，才会相对于body元素进行定位

固定定位

position: fixed;

1. 指定了固定定位后，元素就是一个定位元素，完全脱离文档流
2. 原来的位置不会保留
3. 固定定位是相对于浏览器窗口进行定位.注意：不是相对于body元素进行定位