CSS简记

2023-07-20 本文已影响0人搬码人

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

文本属性

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

弹性盒子模型（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

解决方法：脱离文档流

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

浮动

增加一个浮层来放置内容

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

image.png

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

image.png

浮动在导航的应用

image.png

清除浮动

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

image.png

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

image.png

4、伪对象方式

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代表停止播放