CSS学习笔记

CSS学习笔记

1、CSS2,2.1,3

CSS2.0 div+CSS，html与css分离的思想

css2.1 浮动，定位

css3.0 圆角，阴影，动画。。。

2、css的优势

• 内容与表现分离
• 网页结构表现统一，可以实现复用
• 样式十分的丰富
• 建议使用独立于html的css文件
• 利于SEO，容易被搜索引擎收录

3、三种导入方式

• 行内（标签内属性）
• 内部样式（style标签）
• 外部样式（文件）

行内>内部>外部样式(就近原则)

外部样式的两种写法：

1、链接

<link rel="stylesheet" href=""></link>

2、导入(在style中)

<style>
@import url（""）
</style>

4、选择器

选择页面上的某个元素

4.1、标签选择器

会选择所有指定标签，只能放基本的通用样式

4.2、类选择器

选中同类名的，一组标签。

<style>
    .classname{
        
    }
</style>

4.3、ID选择器

id要唯一

#idname{

}

d选择器>类选择器>标签选择器

4.4、层次选择器

• 后代选择器

在某个元素的后面。eg.body后面有p

body p{
    
}

• 子选择器(第一代儿子)

body>p{
    
}

• 相邻兄弟选择器

只有一个，下面的那一个元素。

div1 + div2{

}

• 通用选择器

当前选中元素的所有向下兄弟元素

div1 ~ div2{

}

border-radius: 24px;//圆角

4.5、结构伪类选择器

//第一个和最后一个
ul li:first-child{
    
}
ul li:last-child{
    
}

:hover



// 选中当前p元素的父级元素，进而选中父级元素的第一个，并且选中的元素是当前元素（p）
p:nth-child(1){
    
}
//选中父元素下的p元素的第二个，类型
p:nth-of-type(1){
    
}

4.6、属性选择器（常用）

id和class结合

//a标签中带有id属性的
a[id]{
    
}
//a标签中id=nm的
a[id=nm]{
    
}

//语法：属性名 = 属性值（正则）
//=绝对等于
//*=包含
//^=以什么开头
//$= 以什么结尾

a[class *= "links"]{
}
//同时含有多个属性
a[href][title] {color:red;}

5、美化网页元素

标签：突出字体，括起来要美化的元素，再对span添加css。

5.1、字体样式

font-family: xxx，xxx;//字体族
font-size: 50px;//字体大小
font-weight: bold;//字体的粗细
color： #12a;//字体颜色

//第一是风格，第二是粗细，第三是大小，第四是字体
font: oblique bolder 12px "楷体";

5.2、文本样式

//颜色 ：单词/RGB/RGBA(A是透明度0-1)
color: rgba(0,255,255,0.5)

//排版
text-align: center;
//首行缩进 2em是两个字符
text-indent: 2em

background: #000012;

//行高和块的高度一样的话就上下居中
height: 300px;
line-height: 300px;


//下划线
text-decoration: underline;

//上划线
text-decoration: underline;

//中划线
text-decoration: line-through;


//多元素水平对齐
img,span{
    vertical-align: middle;
}
<div>
    <img>
    <span>
 
    
    

5.3、伪类

//鼠标悬浮(重点)
a:hover{
    
}
//鼠标点完之后
a:visited{
    
}

//鼠标按住未释放的状态
a:active{
    
}

5.4、列表

<ul>
	<li>
    <li>
    ....
    
//选中ul下的所有li
ul li{
    height: 30px;//高度
    list-style: none;//去掉列表前的黑点,circle为空心⚪，decimal为数字
    
    
    
}    

5.5、背景

背景颜色

背景图片

//div中方背景图片
div{
    backgroud-image: url("");
    backgroud-repeat: no-repeat;//(repeat-x,,repeat-y,,水平平铺和竖直平铺)
}
//默认是全部平铺，不断重复图片，铺满位置

//参数：颜色，图片，图片位置，平铺方式
backgroud: red url("") 270px 10px no-repeat;

5.6、渐变

//渐变色，角度，起始颜色，结束颜色
background-image: linear-gradient(10deg,#21D4FD 0%,#B721FF 100%);

6、盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xXaVkkN-1615626227331)(C:\Users\刘国林\AppData\Roaming\Typora\typora-user-images\image-20210312164732644.png)]

宽高，外边距，边框，内边距，内容。

先初始化，所有的标签都有默认的内外边距。

外边距

margin: 0 auto;//居中元素，写两个参数就是上下，左右

控制好：外边距+边框+内边距+内容=规定的大小

//圆角边框：四个参数，左上，右上，右下，左下。。
//两个参数：左上+右下，右上+左下
//一个参数：上下左右
//参数是圆角的半径！！

border-radius:

7、浮动

标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IQkmxYJO-1615626227342)(C:\Users\刘国林\AppData\Roaming\Typora\typora-user-images\image-20210312202406547.png)]

块级元素：独占一行，block

h1-h6\p\div\列表

行内元素：不独占一行，inline

span \a\img\strong...

行内元素可以包含在块级元素中，反之不能。

div和span最常用

display: block;//块级元素；；inline是行内元素

inline-block是块元素，但是可以在一行。一行中的一块。

块级元素/行内元三年也是一种实现行内元素排列的方式

浮动

float： left；//right

左右浮动，超脱出标准文档流，引起父级边框塌陷的问题。

父级边框塌陷问题

//right//右侧不允许浮动
/*
left

none
*/
clear: both;两侧不允许有浮动元素

1、增加父级元素的高度

2、在后面添加一个空的div，清除浮动

3、在父级元素添加overflow

4、在父类添加一个伪类(类似空div)（推荐使用）

#father:after{
	content: '';
	display: block;
    clear: both;

}

overflow: sroll;//超出大小，生成滚动条。

8、定位

8.1、相对定位

相对于自己原来的位置，进行偏移。

position: relative;//上下左右
top: 20px;//距离上边20px，即元素向下偏移20px
left: 20px;
bottom: 20px;
right: 20px;

8.2、绝对定位

positon: absolte;//上下左右
//没有父级元素定位的情况下，相对浏览器定位。
//相对父级元素，父级要有position属性，可以是relative；

8.3、fixed固定定位

position: fixed;
//固定在一个位置，拉滚动条也不变

8.4、z-index

同级盒子对比
七层模型
background < 负z-index < block <float < inline-block < z-index: auto/0 <正z-index
层级，

一层一层的在上面。

z-index: 99;//

opacity: 0.6;//设置透明度

9、CSS预处理器

SASS

LESS：基于NodeJS。（必学）

css动画

css3动画

1、基本属性

1.1 定义动画

@keyframes animateName {  }

//@-webkit-keyframes

1.2 绑定动画到div元素

至少包含动画名称和动画时长。

//简写
animation: animateName 5s;

//单独写
animation-name:
animation-duration:

绑定多个动画，则用逗号隔开。

duration的时间一一对应name上的动画。若未写，则按第一个duration的时间。

多个动画，出现相同属性，则，谁先出现就按谁的。

1.3 动画属性

//动画播放次数
animation-iteration-count: infinite;    //infinite是循环

//暂停与继续
animation-play-state: paused;   //running

//完成播放时的样式
animation-fill-mode: forward;

//延迟开始时间
animation-delay: 

//可定义动画运动是速度
animation-timing-function： cubic-bezier(n,n,n,n) | linear | ease-in-out
默认是ease，加速运动。

animate和transform冲突

animate中无法定义不同的transform。可以在外面再套一个div来实现。

1.4 中间值

帧动画之间，变化的属性若存在中间值，则慢慢的过渡变化。

就是过渡transition

CSS属性	改变的对象
background-color	色彩
background-image	只是渐变
background-position	百分比，长度
border-bottom-color	色彩
border-bottom-width	长度
border-color	色彩
border-left-color	色彩
border-left-width	长度
border-right-color	色彩
border-right-width	长度
border-spacing	长度
border-top-color	色彩
border-top-width	长度
border-width	长度
bottom	百分比，长度
color	色彩
crop	百分比
font-size	百分比，长度
font-weight	数字
grid-*	数量
height	百分比，长度
left	百分比，长度
letter-spacing	长度
line-height	百分比，长度，数字
margin-bottom	长度
margin-left	长度
margin-right	长度
margin-top	长度
max-height	百分比，长度
max-width	百分比，长度
min-height	百分比，长度
min-width	百分比，长度
opacity	数字
outline-color	色彩
outline-offset	整数
outline-width	长度
padding-bottom	长度
padding-left	长度
padding-right	长度
padding-top	长度
right	百分比，长度
text-indent	百分比，长度
text-shadow	阴影
top	百分比，长度
vertical-align	百分比，长度，关键词
visibility	可见性
width	百分比，长度
word-spacing	百分比，长度
z-index	正整数
zoom	数字

transform的转换也存在过渡。

2、2D转换

2.1 属性

transform: 转换函数;
transform-origin: ;//转换的原点，可为负数

2.2 转换函数

2.2.1 translate(x,y)

x，y轴方向移动x，y距离

向右，向下。

2.2.2 rotate(xdeg)

顺时针旋转x度。沿transform-origin

2.2.3 scale(x,y)

宽度缩放x倍，高度缩放y倍

2.2.4 skew(xdeg,ydeg)

水平和垂直方向倾斜。第二个参数为空则默认0.

3 、3D转换

rotateX（xdeg）

rotateY(ydeg)

rotateZ()

沿x轴或y轴旋转。

y轴向上，x轴横向，z轴指向屏幕

改变transform-origin的位置，可以设置各种运动轨迹。

3.1正方体实现思路

设置一个大盒子，表示正方体

里面设置六个面。

六个面分别通过3D转换到合适位置。

4、css3过渡

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

animate也可以达到这样的效果。

transition。

//多个过渡 
transition: width 2s, height 2s, transform 2s;

//观察3d转换元素的视角，从什么视角去看该元素
perspective : xxxpx;

//指定嵌套元素是怎样在三维空间中呈现。
transform-style: flat|preserve-3d;

若div1，为flat，则div2的3D转换不生效。否则div2可自行3D转换。div1的3D转换作用在整个盒子，也影响div2
<div1>
  <div2>

5、transform-origin详解

transform-origin： x y z；

三个属性值。

x是横向，y是向上，z是指向屏幕垂直。

可以是百分比值，或者px值等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uKdOwBRU-1632968752113)(C:\Users\刘国林\AppData\Roaming\Typora\typora-user-images\image-20210531162901499.png)]

100%就是最右边，50%就是向上一半。

2d圆周环绕：

通过设置延迟，可实现多小球跟随。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ML2cCUEQ-1632968752142)(C:\Users\刘国林\AppData\Roaming\Typora\typora-user-images\image-20210531195357840.png)]

在3D转换中，transform-origin（x，y，z）三个参数，代表在该坐标系中的位置，沿某轴旋转运动。

6、椭圆运动实现思路

1、运动合成法

圆周运动+上下运动合成。

一个animate只能一个transform，所以需要再套一层div。

2、圆心移动法

3、3D旋转法

绕y轴旋转。

但由于自身是平面圆，不是球，所以会变成切片。

使用场景

1、通过class动态绑定，js函数点击切换data的boolean值，来改变class，从而使用动画、过渡

2、vue中的transition标签，

3、：hover来使用动画。过渡。

4、直接永久绑定animation。