H5，CSS3笔记_h5标签-CSDN博客

本文链接：https://blog.csdn.net/FaiLou/article/details/131154153

H5常用标签（语义化标签，常用7类标签）

1，语义化标签：头部，导航，区段，文章，页面内容外的东西例如侧边栏，对话框，底部。

2，列表，布局，表格，表单，文章，字体，多媒体标签。

列表：有序列表，无序列表，列表项。

布局：div，span。

表格：表格，表主体，表头，行，列。

表单：表单，输入框（属性：提示文字，最大长度，必填？display），按钮（button，submit，reset）。

文章：标题，段落，换行，分割线。

字体：斜体，粗体，小号，大号，强调。

多媒体：图，音频，视频。

CSS3（选择器，样式）

1，选择器

类名.，id#，属性[ ]

","群组选择器，后代，层级>

a:link，a:visited，a:hover，a:active

伪类（第一个，最后一个，第几个，奇数2n，偶数2n-1/2n+1）

2，圆角边框，元素阴影

图片边框：boder-image，图像边框。

圆角边框：boder-radius，50%画圆形。

元素阴影：text-shadow，box-shadow。

四个值：水平位移，垂直位移，模糊程度，颜色。多个阴影逗号隔开。

h-shadow v-shadow blur spread（尺寸） color insect（内阴影）

3，transtion过渡

transition: css属性名时间；

例：transition: width 2s, height 2s, transform 2s;

4，anmation关键帧

@keyframes 动画名 {
  0%{
    //可以设置，opacity透明度，transform
  }
  50%{
  }
  100%{
  }
}

div{
    //简写
    animtion：*动画名 *周期时间毫秒 速度曲线 开始时间 次数 下一周期是否逆向 结束后状态 
}

animation属性：（名称，周期时间必要。可以设置7个属性）

animation-name：动画名称

-duration：一周期所用时间,单位毫秒

-timing-function：linear匀速，ease快-慢，steps步长

-delay：开始时间

-iteration-count：播放次数

-direction：（下一周期是否逆向，播放次数要大于2）

nomor正常，reverse终点=>起点

alternate起点=>终点=>起点，alternate-reverse终点=>起点=>终点

-fill-mode：结束时保持 forwards，回到起始 backwards

5，transfrom

2D转换平移，旋转，缩放，倾斜。

transform: translate(120px, 50%)，平移。x轴，y轴

transform: rotate(30deg)，旋转

transform: scale(2, 0.5)，缩放

transform: skew(30deg, 20deg)：倾斜

3D转换，右为x轴正方向，上为y轴正方向，z轴从屏幕出来为正方向。

6，渐变

线性渐变（向下/向上/向左/向右/对角线/deg角度）
（to bottom、to top、to right、to left、to bottom right）
角度：角度是指水平线和渐变线之间的角度。0deg是向上，180deg是向下，90deg是向右。

background：linear-gradient(方向，初始颜色，结束颜色)

径向渐变（由其中心定义）

background：radial-gradient(center[中心点]，形状，size，颜色);

7，flex布局

display：flex，子元素默认横向排列

主轴，主轴对齐方式，垂直轴，垂直轴对齐方式，项目对齐方式。

order调整顺序，flex占比。

1，flex-direction属性决定主轴的方向（即项目的排列方向）。

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

2，flex-wrap属性，换行设置

flex-wrap: nowrap | wrap | wrap-reverse;

3，justify-content属性定义了项目在主轴上的对齐方式

左对齐，右对齐，居中对齐，两端对齐中间间隔相等，项目间隔相等

justify-content: flex-start | flex-end | center | space-between | space-around;

4，align-items属性定义项目在交叉轴上如何对齐

baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

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

5，align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性：

6，order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

7，flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间，都为数字按比例。

8，flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

9，align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

8，媒体查询，响应式布局，自适应

//文档宽度小于1366px时修改背景色
@media screen and (max-width: 1366px) { 
    body 
        { background-color:lightblue; } 
}

//如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

设备

@media all{ }

print(打印)，screen（屏幕），speech

not（排除某种设备） only（限定）

朝向，竖放（portrait），横放（landscape）。

//纵向
@media (orientation: landscape) {
    body {
        color: sky blue;
    }
}

与或非

and，逗号，，not

css预处理工具sass，less

变量，嵌套，伪类嵌套，mixin混入，引入，计算加减乘除，if，for

sass：

1，定义变量$

$dark: #000;
.box {
	color: $dark;
}

2，嵌套，大括号包裹大括号

{ { } }

3，伪类嵌套，&调用父选择器

	a {
		&:hover {
			color: red;
		}
	}

4，mixin混入

@mixin name ($param1，$param2， ...) {
	css样式
}

使用: @include name(样式1，样式2，…)；

5，导入 import

@import “css1”

6，加减乘除，if，for循环，while循环

less

1，定义变量，选择器，属性，地址

@dark: #000;
.box {
	color: @dark;
}

//选择器和属性名可以均作为变量

@Mycontain:width;

.@{Mycontain}{//选择器
    height:300rpx;
    @{Mycontain}:200rpx;//属性名
}

2，延迟加载（#）

变量是延迟加载的，在使用前不一定要预先声明。

语法：@变量1：@变量2；

@变量2:9%；

3，mixins混入

1，普通混入

//1.普通混合
.bor{
    background-color: aqua;
    width: 32rpx;
}
.poop{
    color:white;
    //混入.bor
    .bor;
}
 
.boom{
    height:200rpx;
    .bor;
}

2，定义混入的内容在css中不显示，类的名字后面加上括号，不会到css样式中显示！

// 2.不带输出的混合
.mymix{
    color:black;
}

//css样式中不显示
.mymix-echa(){
    background-color: white;
}
.dad{
    width: 30rpx;
    height:30rpx;
}

编译后

.mymix {
  color: black;
}
.dad {
  width: 30rpx;
  height: 30rpx;
}

:extend继承

p1{
    width: 100px;
    height: 200px;
}

// extend对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

---------------------------------------------------------------
.p3{
    // 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin混合
    .p1();
}


// 使用类选择器时可以在选择器后添加一个括号，这时实际上我们就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
}
.p5{
    .p4();
}


.p5{
    .p4;
}
————————————————
版权声明：本文为CSDN博主「二九君」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44019523/article/details/109593535

4，嵌套

花括号包裹花括号

伪类嵌套，需要在：前加&号，&表示外层父元素

div{
    font-size: 14px;
    &:hover{
        font-size: 20px;
    }
}

5，运算

在less中可以直接用运算符来计算，加(+)、减(-)、乘(*)、除(/)
注意：使用除法计算时，需要使用括号将表达式括起来；例如（25 / 2）

6，@import导入

@import url(abc.less);
@import 'abc.less'

7，混合函数

// 混合函数 混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
   width: @w;
   height:@h;
   border: 1px solid red;
   background-color: @bg-color;
}
div{
   // 调用混合函数按顺序传递
   // .test(200px,300px,#bfa);
   // .test(@bg-color:red, @h:100px, @w:200px)
   .test(300px);
}