前端基础HTML5与CSS

最新推荐文章于 2024-02-27 17:56:28 发布

倾尽.

最新推荐文章于 2024-02-27 17:56:28 发布

阅读量228

点赞数 1

文章标签：前端 html5 css

本文链接：https://blog.csdn.net/weixin_67522335/article/details/132416568

版权

Css 层叠样式表

html 和css结构样式分离，写法上html属性和属性值用=拼接 Css是：

1、css 写法一 style 内联样式表

2、css写法二内部样式

3、html和css结构样式分离，写法上HTML属性和属性值用=拼接，

Css属性和属性值是：

4、层叠：同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠

5、冲突：同一个元素设置相同的属性会造成冲突，遵循就近原则选择属性值
在这里插入图片描述

6、继承：在子父关系中，文本样式可以被继承，布局样式不可以被继承（块及元素继承父的宽，行级不同）

在这里插入图片描述

颜色 color background-color

1、英语字母
2、十六进制
3、rgb(0-255，0-255，0-255，0-1)
在这里插入图片描述

选择器

1、标签选择器

2、全局选择器

在这里插入图片描述

3、群组选择器

在这里插入图片描述

4、 id选择器

在这里插入图片描述

6、class选择器

在这里插入图片描述

7、后代选择器空格（去除无序列表的点）

请添加图片描述

8、相邻兄弟 + 通用兄弟 ~

请添加图片描述

9、伪类选择器 ui伪类 a标签使用

请添加图片描述

Css定位

Css有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。

position ： static；默认按照普通流排序

position: relative; 相对定位

1、当时没有便宜量时，原来位置不变

2、相对定位根据原来自身位置

postino：dasolue 绝对定位，脱离文本也脱离文本流

1、绝对定位是根据父级定位的，有父级定位，就根据父级定位走，没有父级会跟着窗口走

2、postitio:fixed 固定定位，脱离文档流，也脱离文本流

固定定位永远根据窗口定位

3、poition：stitcy粘性定位

当没达到偏移量时是相对定位的达到也需要有夫级也需要有偏移量

CSS动画笔记

1、渐变

1、线性渐变：background-image:LInear-gradient([改变方向]第一个颜色,第二个颜色);

{ 渐变默认的方向是从上到下}

[角度：deg]

增加颜色直接在（）里加颜色

颜色后跟百分比控制颜色区域

repeating-LInear-gradient:重复的线性渐变

2、background-radial-gradient(第一个颜色（一般是圆心）,)
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUbFlusO-1692622612376)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230808091139754.png)]$

2、动画

动画帧 @keyframes run{

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DGlUi9d-1692622612376)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230808110303423.png)]$

}

1、transform：2D变形：

transform：translate（X轴，y轴）

transition:过度时长s结尾；

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3fuxEwmD-1692622612376)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230808093255391.png)]$

1.位移动画
transform：translate（x轴，y轴）
单独设置一个轴：translateX x轴 translateY y轴
transition :时间（过度）
2.缩放动画
transform：scale（缩放程度 0.5）
transition :时间
3.旋转动画
transform：rotate（写角度 xxdeg）默认从中心点开始
transform-origin：right bottom（改变旋转基准点）
4.倾斜
transform：skew（角度： x轴，y轴）
动画帧：@Keyframes 名字{
from可以是x%{从哪里来
}to可以是x%{到哪里去transform：translateX（1000px）
}

CSS盒模型和浮动

css盒模型

1、一个参数代表上下左右的数据：margin ：“像素” 多个参数的时候第一个代表上，第二个代表右，第三个代表下第四个代表左，不同位置不同方式

2、margin：0px auto text-align:center

padding:aute;
3、标准盒模型，div 宽。怪异和模型 div宽 + 内容的宽+boder+padding

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

父盒子高度=div1 + div2 + div3 + div4

浮动

（死记硬背格式）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dkqfuEY-1692622683914)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230804111157943.png)]$

不推荐使用的一向浮动 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QtUttXFg-1692622683914)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230804111440140.png)]$

float：+ left + right

1、文档流：代表元素的布局宽高背景颜色等等

2、文本流“包含文字内容

3、左浮，不脱离文本脱离文档流

4、右浮，全脱离文本文档

父盒子高度=坍塌

浮动带来的问题，对自身有影响都脱离文档流，对兄弟改变了布局，对父级+造成了坍塌

清浮动

5、给父类设置高（不推荐）

6、给使用浮动元素后面添加空的块级元素，clear：both

7、 after伪类请浮动在浮动元素的父级上清楚浮动

8、在父容器上添加溢出隐藏属性 overflow hidden；

CSS样式

注意：写css格式之前使用全局，格式化原本的东西

1、文字样式

font—size：调节文字大小

font—weight—bold：调节文字粗细

font—style—italic：倾斜文字

font—family：“字体”

font—variant：small—caps 小写字母转大写字母

text-shadow: 设置文本背景阴影 1，水平方向位移 2，竖直方向上位移 3，模糊度 4，颜色；

id 权重是200 class 权重是10 标签的权重是1 内敛样式最高级

text-decoration：修改文本样式，去掉删除线

text-transform: capitalize : 首字母大写

text-indent ：2em 只适用于p标签里的首行缩进2格

line -height：100px p标签高度

word-wrap-break-word 换行

2、CSS方法定义

ul li：nth-child（第几个）a{

}

3、背景样式

opacity:0-1 设置盒子内字体透明度

cursor:pointer 鼠标放上：显示手

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28GHrPkL-1692622828816)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230804102943196.png)]$

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

overflow: 溢出部分隐藏 scroll变成滚动条 visible默认情况 hidden 溢出隐藏

border：线条边框

background-color:背景 taansparent 完全透明色

background-image:（路径）图片背景

background-repeat：no-repeat 不重复显示 repeat-y 横向重复 x竖向重复

background-position：center 图片定位

background-size：cover 背景覆盖（铺满盒子） contain 照片宽或高一边完全覆盖，照片展

background-attachment: fixed 背景固定

banckground-origin：content-box 从盒子上开始定位

background-clip：content-box;背景裁剪在盒模型某个位置上进行裁剪

display:none; 隐藏 dsiplay：block; 显示

4、边框样式

border：线宽线样式颜色；

border—radius:50% 边框成为原型

弹性布局

1、表格布局 display:table-cell

2、浮动

对自身影响，脱离文档，使元素独立起来并且可以设置宽高

对兄弟元素影响，改变兄弟元素布局

对父容器是坍塌

3、定位

固定布局，使用标准px单位

流式布局，使用百分比 %

多列布局

弹性布局：

flex是一种非常流行的web页面布局最快解决方案

display:flex;

弹性盒模型

默认主轴方向是X轴，起始线是Y

flex-direction；

改变主轴方向的

row X轴为主轴

colum Y轴为主轴

row-reverse 主轴方向是X轴起始线从右边开始

column-reversey Y轴为主轴，起始线从下开始的

flex-wrap;

flex-wrap:wrap;

子元素在父元素中换行，默认是不换行，默认no wrap；

flex-flow;

justify-contert;

spce-between设置子元素在夫容器里两端对齐，有空余会分配给每个子元素中间

space-around将剩余空间分成元素的2倍。分别在元素子分配左右

exenlu 平均分配知
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00pqx7Wo-1692622869244)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230809103504933.png)]$