CSS简记

CSS概念

• CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
• 后缀名为.css
• CSS用户HTML文档中元素样式的定义
  使用css的目的就是让网页具有美观一致的页面

CSS语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（即样式）

image.png

<style>
      h1{
           color:blue;
           font-size:12px;
           }
</style>

CSS的引入方式

• 内联样式（行内样式）

  
  image.png

• 内部样式

  
  image.png

• 外部样式（最优）

  
  image.png

选择器

选择器种类

• 全局选择器
  优先级最低，一般用于样式初始化

  
  image.png

• 元素选择器

  
  image.png
  image.png

• 类选择器

  
  image.png

• ID选择器

  
  image.png

选择器的优先级

优先级从高到底：行内（内联）样式>ID选择器>类选择器>元素选择器

字体属性

CSS字体属性定义字体，颜色、大小、加粗、文字样式

color：文本的颜色
font-size：文本大小
font-weight：设置文本的粗细

image.png

font-style：指定文本的字体样式

image.png
font-family：指定一个元素的字体
image.png

背景属性

CSS背景属性主要有以下几个：

image.png
image.png
image.png
image.png
image.png

文本属性

• text-align:指定元素文本的水平对齐方式，值：left right center
• text-decoration：underline（下划线）、overline（上划线）、line-through（删除线）

• text-transform：控制文本的大小写 captialize（每个单词开头大写）、uppercase（全部字母大写）、lowercase（全部字母小写）

  
  image.png
• text-indent：规定文本块中首行文本的缩进（单位px，负值允许）

表格属性

• 折叠边框和宽高
  表格：table>trN>tdN
  border-collapse：折叠边框，将table与td中设置的边缘线折叠起来，使看起来是单线条

image.png

• 表格文字对齐方式

td{ text-align:right; }

垂直对齐属性设置垂直对齐
td{ vertical-align:bottom}

• 表格填充
  padding：设置文本与表格边缘的距离

  
  image.png
  image.png
• 背景与字体颜色
  background-color
  color

关系选择器

• 后代选择器

image.png

• 子代选择器

image.png

• 相邻兄弟选择器

image.png

• 通用兄弟选择器

image.png

CSS盒子模型(Box Model)

盒子模型在设计和布局时使用
概念：所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTMl元素，它包括：
外边距（margin），边距（border），内边距（padding），和实际内容（content）

image.png
Margin（外边距）：清除边框外的区域，外边距是透明的；如果只设置一个值，那么默认情况下上下左右外边距都是这个值，也可以分别设置各个方向的值；两个值：第一个上下，第二个左右。同时也可以四个值分开来写，比如margin-right。
Border（边框）：围绕在内边距和内容外的边框
Padding（内边距）：清除内容周围的区域，内边距是透明的（适应内容的背景颜色），两个值：第一个上下，第二个左右。同时也可以四个值分开来写，比如padding-left。
Content（内容）：盒子的内容，显示文本和图像

image.png image.png

弹性盒子模型（flex box）

弹性盒子是CSS3的一种新的布局模式
CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排序、对其和分配空白空间

• CSS3弹性盒内容
  弹性盒子由弹性容器（felx container）和弹性子元素（Flex item）组成
  弹性容器通过设置display属性的值为flex将其定义为弹性容器
  弹性容器内包含了一个或多个弹性子元素

image.png

默认弹性盒里内容横向摆放

• flex-dicrection属性

image.png

• justify-content属性

image.png

• align-items属性

image.png

子元素上的属性

• flex-grow/flex：简单理解就是设置权重，然后自动为分配的元素分配剩余的空间，这个属性的优先级大于宽高

image.png image.png image.png

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间

image.png

解决方法：脱离文档流

• 脱离文档流：
  1、 浮动
  2、 绝对定位
  3、 固定定位

浮动

增加一个浮层来放置内容

flow属性定义元素在那个方向浮动，任何元素都可以浮动。

image.png

• 浮动的原理
  1、 浮动以后使元素脱离文档流
  2、 浮动只有左右浮动，没有上下浮动

image.png
image.png image.png

浮动在导航的应用

image.png image.png
image.png

清除浮动

• 浮动的副作用
  当元素设置float浮动后，该元素就会脱离文档流并向左或向右浮动
  1、 浮动会造成父元素高度坍塌：当父元素没有设置高度，由子元素撑起高度时，父元素会包裹子元素，但子元素浮动时，这种撑起效果就消失了，父元素肉眼不见，即父元素坍塌。
  2、 后续元素会造成影响
• 浮动清除方案:
  1、 父元素设置高度
  2、 受影响的元素增加clear属性
  当clear：both，无论左浮动还是右浮动，都清除

image.png image.png

3、 overflow清除浮动（使用较多）

image.png image.png image.png

4、 伪对象方式

image.png image.png

定位

position属性指定了元素的定位类型
其中绝对定位和固定定位会脱离文档流
设置定位后：可以使用四个方向值进行调整位置：left、top、right、bottom

值	描述
relative	相对定位
absolute	绝对定位（可以多层覆盖）
fixed	固定定位（页面滚动，不会对其位置造成影响，类似于悬浮按钮）

注意：设置定位后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

• z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

image.png

CSS3新特性

• 圆角
  border-radius属性
• 阴影
  box-shadow：h-shadow v-shadow blur color；

值	描述
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影的颜色

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果，也是CSS3新特性的一种
可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%
0%是动画的开始，100%是动画的完成。

animation执行动画

值	描述
name	设置动画的名称
duration	设置动画的持续时间
timing-function	设置动画效果的速率（如下）
delay	设置动画的开始时间（延时执行）
iteration-count	设置动画循环的次数，infinite为无限次数循环
direction	设置动画播放的方向（如下）
animation-play-state	控制动画的播放状态：running代表播放，而paused代表停止播放

timing-function值	描述
ease	逐渐变慢（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认为normal表示向前播放
alternate	动画播放在第偶数次向前播放，第奇数次向反方向播放

image.png

例子：鼠标悬浮于导航时状态变化效果

image.png

opacity：透明度

image.png

媒体查询

媒体查询能使页面在不同终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式

• 设置meta标签
  去掉这段代码后，在手机端将等比例缩放

  
  image.png
• 媒体查询语法
  根据设备屏幕的的尺寸不同，发生变化

image.png

雪碧图

image.png

• 优点
  1、 减少图片的字节
  2、 减少网页的http请求，从而大大的提高页面的性能
• 原理
  1、 通过background-image引入背景图片
  2、 通过background-position把背景图片移动到自己需要的位置

移动图片，只展示需要的那一部分

image.png image.png

可以通过检查调整position

image.png

字体图标

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载会就越慢。所以，我们可以使用字体图标的方式来显示图标，及解决了失真的问题，也解决了图片占用资源的问题
常用字体图标库：阿里字体图标库

• 优点
  1、 轻量型：加载速度块，减少http请求
  2、 灵活性：可以利用CSS设置大小颜色等
  3、 兼容性： 网页字体支持所有现在浏览器，包括IE低版本

• 使用字体图标
  1、 下载代码
  2、 选择font-class引用