前端知识学习笔记-二（CSS）

strugglegirl

已于 2024-04-10 09:36:08 修改

阅读量1k

点赞数 23

分类专栏：前端知识文章标签：前端学习笔记 css

于 2024-04-03 17:11:35 首次发布

本文链接：https://blog.csdn.net/strugglegirl/article/details/135202748

版权

前端知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS简介

CSS概念
CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表
CSS文件后缀名为.css
CSS用于HTML文档中元素样式的定义。
语法
CSS 规则由两个主要的部分构成:选择照，以及一条或多条声明

  <style>
        body {
            color: #f00;
            font-size: 12PX;
            font-family: 微软雅黑;
        }
    </style>

CSS引用方式

内联样式(行内样式)
要使用内联样式，你需要在相关的标签内使用样式(style] 属性。style 属性可以包含任何 CSS 属性

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

<p style="background-color:darkgreen;font-size: 18px">我喜欢巧克力CSS</p>

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

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

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            color: #f00;
            font-size: 12PX;
            font-family: 微软雅黑;
        }
    </style>
</head>

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

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

选择器

CSS语法规则由两个主要的部分构成: 选择器，以及一条或多条声明 (样式)
全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化

*{
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

 body {
            color: #f00;
            font-size: 12PX;
            font-family: 微软雅黑;
        }

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

类选择器
规定用圆点来定义，针对你想要的所有标签使用

优点
灵活

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

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

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

<form>
    <input id="username" type="text" name="password" placeholder="请输入用户名">
    <input id="password" type="password" name="password" placeholder="请输入密码">
</form>
 #username{
            width: 200px;
            height: 30px;
        }

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

合并选择器
语法:选择器1.选择器2
作用:提取共同的样式，减少重复代码

.container .logo a{
    float: left;
    font-size: 18px;
    padding-left: 20px;
    line-height: 45px;
    width: 200px;
}

选择器的优先级

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

字体属性

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

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

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

h1 {font-size:40px;]1
h2 [font-size:30px;
p {font-size:14px;}

温馨提示
chrome浏览器接受最小字体是12px

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

H1 {font-weight:norma1;}
div{font-weight:bold;}
p(font-weight:900;}

font-style
指定文本的字体样式
在这里插入图片描述
font-family
font-family属性指定一个元素的字体

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

font-family:"Microsoft YaHei" ,"simsun","simHei"；

背景属性

CSS背景属性主要有以下几个
在这里插入图片描述
background-color属性
该属性设置背景颜色

<div class="box"></div>
.box{
    width: 100%;
    height: 45px;
    background-color:#189F41;
}

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

<div class="box"></div>
.box{
width: 400px;
height: 400px;
background-image: ur1("images/img1.jpg");
}

background-repeat属性
该属性设置如何平铺背景图像
在这里插入图片描述

.box{
	width: 400px;
	height: 400px;
	background-coor: #189F41;
	background-image: ur1("images/img1.jpg");
	background-repeat: no-repeat;
	}

background-size属性
该属性设置背景图像的大小
在这里插入图片描述

.box{
	width: 600px;
	height: 600px;
	background-image: ur1("images/img1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}

background-position属性
该属性设置背景图像的起始位置，其默认值是: 0% 0%
在这里插入图片描述

.box{
	width: 600px;
	height: 600px;
	background-color: #fcc;
	background-image: ur1("images/imgl.jpg") ;background-repeat: no-repeat;
	background-position: center;
	}

文本属性

text-align
指定元素文本的水平对齐方式
在这里插入图片描述

hl {text-align:center}
h2 {text-align:Teft}
h3 {text-align:right}

text-transform
text-transform 属性控制文本的大小写
在这里插入图片描述

 p{text-transform: capitalize}

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

p{
	text-indent:20px;
}

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

表格属性

使用CSS可以使 HTML 表格更美观
表格边框
指定CSS表格边框，使用border属性

<style>
        table{
            border: 1px solid black;
        }
    </style>

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

<style>
        table,td,th{
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
    </style>

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

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

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

td { text-align:right; }

vertical-align属性设置垂直对齐

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

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

td [ padding:15px; }

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

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

关系选择器

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

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

E F{}

<ul>
    <li>商品管理</li>
    <ol>
        <li>商品列表</li>
        <li>商品添加</li>
    </ol>
</ul>
ul li{
	color:green;
	}

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

E>F{}

 <div>
<a href="#">子元素1 </a>
<p> <a href="#">"孙元素</a> </p>
<a href="#">子元素2 </a>
</div>
div>a{
	color:red
}

相邻兄弟选择器
定义
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素
语法

E+F{}

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
hl+p{
	color:red;
}
#只有h1和第一个P标签生效

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

E~F{}

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

h1~p{
color:red;
}

CSS盒子模型（box model）

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

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

 <style>
       div{
           width: 1550px;
           height: 20px;
           background-color: red;
           padding: 10px;
           border: 1px solid #000;
           margin: 0px;
       }
    </style>

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

弹性盒子模型

定义
弹性盒子是CSS3的一种新的布局模式
CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
CSS3弹性盒内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置 displey 属性的值为flex将其定为弹性容器弹性容器内包含了一个或多个弹性子元素

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

<sty1e>
.flex-container {display: flex;
				width: 400px;
				height: 250px;
				background-color: ightgrey;
				}
</style>

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

父元素上的属性
display 属性
display:flex: 开启弹性盒
display:flex: 属性设置后子元素默认水平排列
flex-direction属性
定义
flex-direction 属性指定了弹性子元素在父容器中的位置
语法

flex-direction: row row-reverse l column column-reverse

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

justify-content 属性
定义
内容对齐(justifycontent)属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐
语法

justify-content: flex-start l flex-end I center

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

align-items 属性
定义
align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式
语法

align-items: flex-start l flex-end I center

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

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

文档流

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

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

脱离文档流
解决标准流问题，使用脱离文档流
使一个元素脱离标准文档流有三种方式：
a.浮动
b.绝对定位
c.固定定位

浮动

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

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

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

<div class=box></div>
.box{
	width:100px;
	height:100px;
    float: left;
}

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

<div class=box></box>
<div class=box></box>
<div class=box></box>
.box{
	width:100px;
	height:100px;
    float: left;
}

当容器不足时
当容器不足以横向摆放内容时候，会在下一行摆放

清除浮动

浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动
浮动元素会造成父元素高度塌陷后续元素会受到影响

清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用解决方案有很多种：

父元素设置高度
受影响的元素增加clear属性 (clear:both)
overflow清除浮动
伪对象方式

父元素设置高度

.container{
				width: 350px;
				height:500px
				}

受影响的元素增加clear属性

.tex{
            width: 100px;
            height: 100px;
           	clear:both;
        }

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

.container{
				width: 350px;
				border: 1px solid red;
				overflow: hidden;
				clear: both;
				}

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

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

定位

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

相对定位

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

.box{
	width: 200px;
	height: 200px;
	background-color: red;
	position: relative;
	left: 100px;
	}

绝对定位

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

.box1{
	width: 200px;
	height: 200px;
	background-color: red;
	position:absolute;
	left: 50px;
.box2{
	width: 300px;
	height: 300px;
	background-color: green;
	}

固定定位

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

.box1{
	width: 200px;
	height: 200px;
	background-color: red;
	position:fixed;
	left: 50px;
	}
.box2{
	width: 300px;
	height: 300px;
	background-color: green;
	}

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

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

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

.box1f{
	width: 200px;
	height: 200px;
	background-color: red;
	position:absolute;
	Z-index: 2;
	}

CSS3新特性

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

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

//圆角
 .box{
            width: 300px;
            height: 100px;
            background-color: red;
            margin: 10px;
            float: left;
            border-radius: 10Px;
        }
//圆形
.box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            float: left;
            border-radius: 100%;
        }

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

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

在这里插入图片描述

  .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            float: left;
            border-radius: 100%;
            box-shadow: 10px 10px 10px #888888;
        }

动画

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

@keyframes创建动画使用
@keyframes 规则，你可以创建动画
创建动画语法：

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

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

animation执行动画

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

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

//创建动画
 @keyframes move{
               0%{
                   width: 100px;
                   background-color: #888888;
               }
               50%{
                   width: 200px;
                   background-color: green;
               }
               100%{
                   width: 100px;
                   background-color: red;
                }
            }

//执行动画
.box{
                width: 100px;
                height: 100px;
                margin: 0;
                float: none;
                border-radius: 0;
                box-shadow: 10px 10px 10px #888888;
                animation: move 2s linear 0s infinite;
            }

呼吸效果

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

@keyframes breathe{
               0%{
                   opacity: 0.2;
                   box-shadow:0 1px 2px #888888;
               }
               50%{
                   opacity: 0.5;
                   box-shadow:0 1px 2px green;
               }
               100%{
                   opacity: 1;
                   box-shadow:0 1px 2px red;
                }
            }

.box{
                width: 100px;
                height: 100px;
                margin: 0;
                float: none;
                border-radius: 0;
                animation: breathe 2700ms ease-in-out infinite alternate;
            }

媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在<heed 标签里加入这个meta标签.

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

参数解释
width = devicewidth 宽度等于当前设备的宽度
inial-scale 初始的缩放比例 (默认设置为1.0)
maximum-scale允许用户缩放到的最大比例(默认设置为1.0)
user-scalable 用户是否可以手动缩放(默认设置为no)

.box(
	width:3@epx;
	height: 300px;
	}
@media screen and(max-width: 768px){
	.box{
		background-color:aqua;
		}
	}
@media screen and(min-width: 768px) and(max-width:996px){
	.box{
		background-color:chartreuse;
	}
@media screen and (min-width:996px) {
	.box{
		background-color:red;
		}
	}

雪碧图

Css Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
优点
减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

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

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

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

字体图标

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

常用字体图标库: 阿里字体图标库（iconfont.cn 登录即可下载字体图标）

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

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

strugglegirl

关注

23
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录