H5大前端（Web前端）学习笔记-CSS部分

2024-01-03 04:15:01

我是跟着这个视频学习的：https://www.bilibili.com/video/BV1gY4y1U78C?p=20&vd_source=c096def4d5f55f1aab46258c0a27641b

前端Web

CSS

CSS简介

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

语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）
CSS语法
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

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

CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关标签内使用样式（style）属性。Style属性可以包含任何CSS属性。

温馨提示
缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: red;  font-size: 24px;">CSS</p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表

温馨提示
单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
    <style>
        h1{
            background: red;
        }
    </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表讲师理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件夹来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部。

<link rel="stylesheet" type="text/css" href="xxx.css">

CSS选择器

全局选择器（通配符选择器）

可以与任何元素匹配，优先级最低，一般做样式初始化

*{
    margin: 0;
    padding: 0;
}

元素选择器（标签选择器）

HTML文档中的元素，p、b、div、a、img、body等
标签选择器，选择的是页面上所有这种类型 的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{
    font-size: 14px;
}

温馨提示
① 所有的标签，都可以是选择器比如ul、li、label、dt、dl、input、div等
② 无论这个标签隐藏的多深，一定能够被选择上
③ 选择的所有，而不是一个

类选择器（class选择器）

规定使用.来定义，针对你想要的所有标签使用，优点：灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width: 800px;
}

class属性的特点
① 类选择器可以被多种标签使用
② 类名不能以数字开头
③ 同一个标签可以使用多个类选择器，用空格隔开

<h3 class="classone classtwo">三级标题</h3>
<h3 class="classone" class="classtwo">三级标题</h3>  //错误

ID选择器

针对某一个特定的标签来使用，只能使用一次。CSS中的ID选择器以#来定义

<h2 id="mytitle">你好</h2>
#mytitle{
	color: red;
}

特别强调
① ID是唯一的
② ID不能以数字开头

合并选择器

语法：选择器1,选择器2,...{}
作用：提供共同的样式，减少重复代码

选择器的优先级

CSS中，权重用数字衡量

选择器权重
元素选择器1
class选择器10
ID选择器100
内联样式1000

优先级从高到低为：行内样式>ID选择器>类选择器>元素选择器

字体属性

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

color

规定文本的颜色

div{color: red;}
div{color: #ff0000;}
div{color: rgb(255, 0, 0);}
div{color: rgba(255, 0, 0, 0.5);}

font-size

设置文本的大小
能否管理文字的大小在网页设计中是非常重要的。但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

p{font-size: 20px;}

温馨提示
Chrome浏览器接受最小字体使12px

font-weight

设置文本的粗细

h1{font-weight: normal;}
p{font-weight: 900;}
值描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗，400等同于默认，而700等同于bold

font-style

指定文本的字体样式

值描述
normal默认值
italic定义斜体字

font-family

font-family属性指定一个元素的字体

温馨提示
每个值用逗号分开
如果字体名称包含空格，它必须加上引号

font-family: "Microsoft YaHei","Simsun","SimHei";

背景属性

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

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小属性

background-image属性

设置元素的背景图像
元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

background-image: url("xxx.jpg");

background-repeat属性

该属性设置如何平铺背景图像

值说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺

background-size属性

该属性设置背景图像的大小

值说明
length设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置第一个，第二个值auto
percentage计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置第一个，第二个值auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain保持图片纵横比并将图片缩放成适合背景定位区域的最大大小

background-position属性

该属性设置背景图像的起始位置，其默认值是：0% 0%

值说明
left top左上角
left center左 中
left bottom左 下
right top右上角
right center右 中
right bottom右 下
center top中 上
center center中 中
center bottom中 下
x% y%第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%。如果只指定的一个值，其他值默认是50%。默认值为0% 0%
xpos ypos单位是像素

文本属性

text-align

指定元素文本水平的对齐方式

值描述
left文本居左排列，默认值
right把文本排列到右边
center把文本排列到中间

text-decoration

text-decoration属性规定添加到本文的修饰，下划线、上划线、删除线等

值描述
underline定义下划线
overline定义上划线
line-through定义删除线

text-transform

text-transform属性控制文本的大小写

值描述
capitalize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母

text-indent

text-indent属性规定文本块中首行文本的缩进

温馨提示
负值是允许的。如果是负数，将第一行左缩进。

表格属性

表格边框

指定CSS表格边框，使用border属性

table, td{
	border: 1px solid red;
}

折叠边框

border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{
	border-collapse: collapse;
}

表格的宽度和高度

width和height属性定义表格的宽度和高度

表格的文字对齐

表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式，向左，右，或中心

td{
	text-align: center;
}

垂直对齐属性设置垂直对齐

td{
	height: 300px;
	vertical-align: center;
}

表格填充

如果在表的内容中控制单元格之间的边框，应使用td元素的填充属性

td { padding: 20px;}

表格颜色

可以指定边框颜色，td元素的文本和背景颜色

关系选择器

  • 后代选择器
  • 子代选择器
  • 相邻兄弟选择器
  • 通用兄弟选择器

后代选择器

定义
选择所有被E元素包含的F元素，中间用空格隔开
语法

E F{}

子代选择器

定义
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
语法

E>F{}

相邻兄弟选择器

定义
选择紧跟E元素后的F元素，用+号表示，选择相邻的第一个兄弟元素，只能向下选择
语法

E+F{}

通用兄弟选择器

定义
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
语法

E~F{}

CSS盒子模型（Box Model）

所有的HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用的。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
盒子模型
① Margin（外边距）- 清除边框外的区域，外边距是透明的两个值：第一个值上下，第二个值左右）
② Border（边框）- 围绕在内边距和内容外的边框
③ Padding（内边距）- 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
④ Content（内容）- 盒子的内容，显示文本和图像

弹性盒子模型（flex box）

定义

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

CSS3弹性盒内容

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

温馨提示
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
</div>
<style>
		.container{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            display: flex;
		}
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
</style>

温馨提示
默认弹性盒子里的内容横向摆放

父元素上的属性

display属性
display: flex;开启弹性盒
display: flex;属性设置后子元素默认水平排列

flex-direction属性
flex-direction属性指定了弹性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse;

① row：横向从左到右排列（左对齐），默认的排列方式
② row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
③ column：纵向排列
④ column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

justify-content属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐（垂直）

justify-content: flex-start | flex-end | center;

① flex-start：弹性项目向行头紧挨着填充。这是默认值。第一个弹性项的main-start外边距边线被放置在该行的mian-start边线，而后续弹性项依次平齐摆放
② flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的mian-end边线，而后续弹性项依次平齐摆放
③ center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的。则弹性项目将在两个方向上同时溢出）

align-items属性
align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式（水平）

align-items: flex-start | flex-end | center;

① flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
② flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
③ center：弹性盒子元素在该行的侧轴（纵轴）上的居中位置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

子元素上的属性

flex
flex根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
默认为0，即如果存在剩余空间，也不放大。
如果只有一个子元素设置，那么按扩展因子转化的百分比比对其分配剩余空间。0.1即10%，1即100%，超出按100%。

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间。
例如：块元素自上而下摆放，内联元素从左到右摆放。
标准流里面的限制非常多，导致很多页面效果无法实现。

文档流产生的问题

  • 高矮不齐，底边对齐
  • 空白折叠现象
    • 无论多少个空格、换行、tab，都会折叠为一个空格
    • 如果我们想让img标签之间没有空隙，必须紧密连接

脱离文档流

使一个元素脱离文档流有三种方式
① 浮动
② 绝对定位
③ 固定定位

浮动

浮动的定义

float属性定于元素在哪个方向浮动，任何元素都可以浮动。

值描述
left元素向左浮动
right元素向右浮动

浮动的原理

  • 浮动以后使元素脱离了文档流
  • 浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。
在这里插入图片描述

<div class="box"></div>
<div class="container"></div>
<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .container{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
</style>

元素向左浮动

元素向右浮动

元素向右浮动

<div class="box"></div>
<div class="container"></div>
<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
        .container{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
</style>

所有元素向左/向右浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右。
所有元素浮动

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: beige;
        float: left;
        margin: 0 5px;
    }
</style>

当容器不足时
当容器不足以横向摆放内容的时候，会在下一行摆放。
在这里插入图片描述

<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: beige;
        float: left;
        margin: 5px 5px;
    }
    .container{
        width: 250px;
    }
</style>

清除浮动

浮动的副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动。

  • 浮动元素会造成父元素高度塌陷
  • 后续元素会收到影响

清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以必须清除副作用，解决方案有很多种：
① 父元素设置高度
② 受影响的元素增加clear属性：clear: both;
③ overflow清除浮动（推荐）

如果有父级塌陷，并且同级元素也受到了影响，可以使用overflow清除浮动。
这种情况下，父布局不能设置高度
父级标签的样式里面添加：overflow: hidden;clear: both;

④ 伪对象方式

如果有父级塌陷，并且同级元素也受到了影响，还可以使用伪对象方式处理
为父标签添加伪类after，设置空的内容，并且使用clear: both;
这种情况下，父布局不能设置高度

.container::after{
	content: "";
	display: block;
	clear: both;
}

定位

定义

position属性指定了元素的定位类型

值描述
relative相对定位
absolute绝对定位
fixed固定定位

其中，绝对定位和固定定位会脱离文档流。
设置定位之后，可以使用四个方向值进行调整位置：left、top、right、bottom

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

z-index

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

CSS3新特性（最常用）

圆角

使用CSS3border-radius属性，可以给任何元素制作“圆角”。
border-radius属性，可以使用以下规则：
① 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
② 三个值：第一个值为左上角，第二个值为右上角与左下角，第三个值为右下角
③ 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
④ 一个值：四个圆角值相同

阴影

box-shadow向框添加一个或多个阴影。

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

动画

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

@keyframes创建动画
使用@keyframes规则，可以创建动画

@keyframes name {
	form|0%{
		CSS样式
	}
	percent{
		CSS样式
	}
	to|100%{
		CSS样式
	}
}

name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值。

animation执行动画

animation: name duration timing-function delay iteration-count direction;
值描述
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动画播放在第偶数次向前播放，第奇数次向反方向播放

媒体查询

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

设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放，在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数解释
① width=device-width 宽度等于当前设备的宽度
② initial-scale 初始的缩放比例（默认设置为1.0）
③ maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
④ user-scalable 用户是否可以手动缩放（默认设置为no）

媒体查询语法

@media screen and (max-width: 768px){
    /* 设备小于768px加载样式 */
    body{
        background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px){
    /* 设备大于768px但小于992px加载样式 */
    body{
        background-color: pink;
    }
}   
@media screen and (min-width: 992px){
    /* 设备大于992px加载样式 */
    body{
        background-color: blue;
    }
}

雪碧图

CSS Sprite也叫做CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。她允许将一个页面涉及到的所有零星图片都包含到一张大图中去。

优点
① 减少图片的字节
② 减少网页的http请求，从而大大提高网页的性能

原理
① 通过background-image引入背景图片
② 通过background-position把背景图片移动到自己需要的位置

字体图标

在这里插入图片描述

常用的字体图标库：阿里字体图标库

优点
① 轻量性：加载速度快，减少HTTP请求
② 灵活性：可以利用CSS设置大小颜色等
③ 兼容性：网页字体支持现代所有现代浏览器，包括IE低版本

使用字体图标
① 注册账号并登录
② 选取图标或搜索图标
③ 添加购物车
④ 下载代码
⑤ 选择font-class引用

文章来源:https://blog.csdn.net/weixin_71370424/article/details/135234757
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。