web前端学习笔记二

最新推荐文章于 2024-12-28 20:21:11 发布

别不开心ovo

最新推荐文章于 2024-12-28 20:21:11 发布

阅读量991

点赞数 2

分类专栏： Web前端文章标签：前端学习 css

本文链接：https://blog.youkuaiyun.com/weixin_44064728/article/details/126121992

版权

Web前端专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

一、CSS的引入方式

1、内联样式
要使用内联样式，需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性
缺点：缺乏整体性和规划性，不利于维护，维护成本高

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

2、内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
缺点：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

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

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

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

二、选择器

1、全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化

*{
     margin: 0;
     padding: 0;
 }

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

p{
    font-size:14px; 
 }

注意：

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

3、类选择器
规定用圆点 . 来定义，针对想要的所有标签使用，比较灵活

<h2 class="oneclass">你好</h2>

.oneclass{
 width:800px;
}

class属性的特点

类选择器可以被多种标签使用
类名不能以数字开头
同一个标签可以使用多个类选择器，用空格隔开

<h3 class="classone classtwo">我是一个h3</h3>

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

<h2 id="mytitle">你好</h2>

#mytitle{
   border:3px dashed green;
}

注意：

ID是唯一的
ID不能以数字开头

5、合并选择器
语法：选择器1,选择器2,…{ }
作用：提取共同的样式，减少重复代码

.header, .footer{
    height:300px; 
    }

选择器的优先级
CSS中，权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
ID选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低：内联样式 > ID选择器 > 类选择器 > 元素选择器>全局选择器

三、一些基本属性

1、字体属性
color：规定文本的颜色

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

font-size：设置文本的大小
chrome浏览器接受最小字体是12px

font-weight：设置文本的粗细
在这里插入图片描述

font-style：指定文本的字体样式
在这里插入图片描述

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

font-family:"MicrosoftYaHei","Simsun","SimHei";

注意：

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

2、背景属性

在这里插入图片描述

background-image语法：

 background-image: url("images/img1.jpg");

background-repeat属性：
设置如何平铺背景图像

在这里插入图片描述

background-size属性：
设置背景图像的大小

在这里插入图片描述

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

在这里插入图片描述

3、文本属性
text-align：指定元素文本的水平对齐方式

在这里插入图片描述

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

在这里插入图片描述

text-transform：控制文本的大小写

在这里插入图片描述

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

p{
 text-indent:50px;
 }

负值是允许的，如果值是负数，将第一行左缩进

4、表格属性

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

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

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

table { 
	border-collapse:collapse; 
	}
table,td {
	border: 1px solid black; 
	}

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

table { 
	width:100%; 
	}
td { 
	height:50px; 
	}

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

td { 
	text-align:right; 
	}

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

td { 
	height:50px; vertical-align:bottom; 
	}

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

td { 
	padding:15px;
	}

表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色

table, td, th {
	border:1px solid green;
	}
td { 
	background-color:green; color:white;
	}

四、关系选择器

1、后代选择器
选择所有被E元素包含的F元素，中间用空格隔开

<ul>
     <li>宝马</li>
     <li>奔驰</li>
</ul>
 <ol>
     <li>奥迪</li>
</ol>

<!-- E F{} -->
ul li{
    color:green; 
    }

2、子代选择器
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

<div>
    <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
    <a href="#">子元素2</a>
</div>

div>a{
    color:red
}

3、相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

h1+p{
    color:red; 
    }

4、通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

h1~p{
    color:red; 
    }

五、CSS 盒子模型（Box Model）

1、盒子模型（Box Model）
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
Content(内容) - 盒子的内容，显示文本和图像

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离

div{
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 2px solid red;
        margin: 10px;
        background-color: green;
    }

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

CSS3弹性盒内容
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素

<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div> 
<style>
    .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
   }
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
   }
</style>

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

3、父元素上的属性
display 属性
display:flex; 开启弹性盒，属性设置后子元素默认水平排列

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

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

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

.flex-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey; 
    }

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

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

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

.flex-container {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey; 
    }

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

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

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

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

<div class="flex-container">
   <div class="flex-item1">flex item1</div>
   <div class="flex-item2">flex item2</div>
   <div class="flex-item3">flex item3</div>
</div> 
<style>
 .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: gold;
   }
   .flex-item1 {
   		height: 150px;
        background-color: red;
        flex: 1;
   }
   .flex-item2 {
        height: 150px;
        background-color: green;
        flex: 2;
   }
   .flex-item3 {
        height: 150px;
        background-color: blue;
        flex: 1;
   }
</style>

六、文档流

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

2、文档流产生的问题

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

3、脱离文档流

浮动
绝对定位
固定定位

七、浮动和定位

1、浮动
float 属性定义元素在哪个方向浮动，任何元素都可以浮动
在这里插入图片描述
浮动的原理

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

注意：

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
当容器不足以横向摆放内容时候，会在下一行摆放

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

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

清楚浮动的方案

父元素设置高度
overflow清除浮动
伪对象方式

父元素设置高度
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

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

伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理
为父标签添加伪类 after ，设置空的内容，并且使用 clear:both ;

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div> 
<div class="nav"></div>

.container{
    width: 350px;
    border: 1px solid red;
}
.container::after{
    content: "";
    display: block;
    clear: both;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

3、定位
position 属性指定了元素的定位类型
在这里插入图片描述
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置： left、top、right、 bottom

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

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

<div class="box1"></div> 
<div class="box2"></div>

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2; 
    }
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1; 
    }

八、CSS 新特性

1、圆角
使用 CSS3 border-radius 属性，可以给任何元素制作 “圆角” border-radius 属性，可以使用以下规则：

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

<div class="box1"></div>
<div class="box2"></div> 
<div class="box3"></div>

div{
    margin: 10px; 
    }
.box1 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
    }
.box2 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px; 
    }
.box3 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px; 
    }

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

box-shadow: h-shadow v-shadow blur color;

在这里插入图片描述

<div class="box"></div>

/* 三个方向的阴影效果 */
.box{
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    box-shadow: 0 10px 30px rgba(0, 0, 0,0.5);
}

九、动画

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

1、@keyframes创建动画

@keyframes name {
    from|0%{
   css样式
   }
    percent{
   css样式
   }
    to|100%{
   css样式
   }
}

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

2、animation执行动画

animation: name duration timing-function delay iteration-count direction;

在这里插入图片描述

3、切换背景颜色

<div class="animation"></div>

.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite; 
    }
.animation:hover {
    animation-play-state: paused; 
    }
@keyframes anima {
    0% {
        background-color: red;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: blueviolet;
    }
}

4、呼吸效果

<div class="box"></div>

.box {
    width: 500px;
    height: 400px;
    background-color: #8ac007;
    margin: 40px auto;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe{
    0% {
        opacity: 0.2;
        box-shadow:0 1px 2px rgba(255,255,255,0.1);
    }
    50% {
        opacity: 0.5;
        box-shadow:0 1px 2px rgba(18,190,84,0.76);
    }

    100% {
        opacity: 1;
        box-shadow:0 1px 2px rgba(59,255,255,1);
    }
}

十、媒体查询

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

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

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

2、参数说明

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

3、媒体查询语法

@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: green;
   } 
}

十一、雪碧图

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

优点

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

原理

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

<i class="icon1"></i> 
<i class="icon2"></i>

.icon1 {
    display: block;
    background-image: url(1.png);
    background-position: -20px 0;
    width: 45px;
    height: 70px; 
    }
.icon2 {
    display: block;
    background-image: url(1.png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px; 
    }

十二、字体图标

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

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

使用字体图标

注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择 font-class 引用

<link rel="stylesheet" href="./css/iconfont.css">
<span class="iconfont icon-add-circle"></span>

.iconfont{
    font-size: 35px;
    color: red; 
    }