css1.2笔记

已于 2023-08-07 17:14:18 修改
阅读量588 收藏
点赞数 1
文章标签： 笔记 css 前端 html
于 2023-08-03 16:06:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_70856517/article/details/132076359
版权

css1.2

html5

  1. header：头部标签

  2. nav：导航标签

  3. article：内容标签

  4. section：定义文档某个区域

  5. aside：侧边栏标签

  6. footer：尾部标签在这里插入图片描述

  7. audio音频标签在这里插入图片描述

  8. video视频标签在这里插入图片描述

  9. input类型在这里插入图片描述
    10.表单属性 在这里插入图片描述

css3

属性选择器

在这里插入图片描述

伪类选择器

在这里插入图片描述

在这里插入图片描述

伪元素选择器

在这里插入图片描述

css3 盒子模型

通过box-sizing来指定盒子模型，content-box（width+padding+border 默认）、border-box（width）
用border-box，padding和border就不会撑大盒子了 （前提是padding和border不会超过width宽度）

css3 滤镜 filter

filter css 属性将模糊或颜色偏移等图形效果应用与元素。
filter：函数（）； 例如：filter：blur（5px）；blur模糊处理，数值越大越模糊。

css3 calc函数

width：calc（100%-80px）；

css3 过渡

transition：谁做过渡给谁加在这里插入图片描述如果想要写多个属性 用，隔开；如果所有属性都要过渡写一个all就可以。

css3 2D转换（transform）

translate移动

transform：translate（x，y）；

在这里插入图片描述

2D旋转 （rotate）

transform: rotate(50deg);

2D转换中心点 （transform-orign）

transform-origin：x,y;
在这里插入图片描述

2D转化之缩放scale

transform：scale（x，y）；
x，y写的是倍数；
不影响其他盒子
在这里插入图片描述

2D转换综合写法

在这里插入图片描述
在这里插入图片描述

css3 动画（ainmation）

1.先定义动画 @keyframes

在这里插入图片描述
在这里插入图片描述

  1. 可以做多个keyframe关键帧
  2. 里面百分比是整数
  3. 里面百分比就是总的时间的划分

2.调用动画 animation-name

animation-duration：2s；持续时间
在这里插入图片描述

动画常用属性

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

css 3D 转换

在这里插入图片描述

3D移动 translate3d

3D 透视perspective

近大远小 透视写在被观察物体父元素上
在这里插入图片描述

3D旋转 rotate3d

在这里插入图片描述
左手法则
在这里插入图片描述

transform-style

在这里插入图片描述

浏览器私有前缀

在这里插入图片描述

额外

opacity 透明度

以上都是学习黑马pink老师课程的笔记

晨风流云837
关注
CSS知识笔记
2301_78671299的博客
07-04 1003
1、可以解决盒子与盒子之间的层叠问题定位之后的元素层级最高，可以层叠在其他盒子上面2、可以让盒子始终固定在屏幕的某个位置。
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
CSS笔记1.2
m0_61785904的博客
02-08 421
选择器优先级 行间样式优先级高于id优先级高于class优先级高于标签选择器优先级高于通配符选择器 class选择器和属性选择器优先级同级 !important优先级最高 CSS权重 ！important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0
CSS学习笔记
m0_58761900的博客
09-18 3110
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS笔记
m0_73844340的博客
07-22 1048
标签选择器
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1737
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
CSS——前端笔记
qq_48721706的博客
04-21 1853
css前端笔记
css笔记一
qq_73986726的博客
09-28 975
5.1内部样式。
前端css基础学习笔记
a_big_panda的博客
01-22 1007
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
使用html和css实现康奈尔笔记(5R笔记)模板
09-24
在本文中，我们将探讨如何利用HTML和CSS技术创建一个康奈尔笔记（5R笔记）模板。康奈尔笔记法是一种高效的学习和整理知识的方法，它通过将笔记分为问题、笔记和总结三个区域，帮助记忆和复习。通过自定义HTML和CSS...
（笔记）第三期书生·浦语大模型实战营（十一卷王场）–书生基础岛第5关---XTuner 微调个人小助手认知
最新发布
haidizym的博客
10-06 358
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1tz421B72y/课程文档：关卡作业：https://github.com/InternLM/Tutorial/blob/camp3/docs/L1/XTuner/task.md开发机平台：https://studio.intern-ai.org.cn/
C++学习笔记----8、掌握类与对象（四）---- 不同类型的数据成员（1）
weixin_71738303的博客
10-05 876
c++对于数据成员给了你许多选项。除了在类中声明简单的数据成员，可以生成静态数据成员供所有类的对象共享，const成员，引用成员，reference-to-const成员，等等。本节我们解释一下这些不同类型的数据成员的细节。
（笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第2关Python 基础知识
haidizym的博客
10-02 505
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1mS421X7h4/课程文档：https://github.com/InternLM/Tutorial/tree/camp3/docs/L0/Python。
强化学习笔记之【DDPG算法】
rvdgdsva的博客
10-06 780
强化学习第2篇.强化学习方向的学习者可以参考或者复刻
【韩顺平Java笔记】第6章：数组、排序和查找
随手写写
10-02 794
排序是将多个数据，依指定的顺序进行排列的过程。
【数学分析笔记】第4章第4节 复合函数求导法则及其应用（2）
随手写写
10-05 752
【例4.4.3】ye1cosx​，求y′【解】y′e1cosx​⋅21cosx​1​⋅−sinx−21cosx​sinx​e1cosx​yfxuxvx两边取对数得lnylnfxvxlnux等式两边同时对x求导得y1​y′uxvx1​y′v′xlnuxuxvx​u′xy′xuxvxv′xln。
Spring（学习笔记）
m0_74728220的博客
10-02 1070
context:annotation-config/>是 Spring 配置文件中的一个标签，用于开启注解配置功能。这个标签可以让 Spring 容器识别并处理使用注解定义的 bean。例如，可以使用 @Autowired 注解自动装配 bean，或者使用 @Component 注解将类标记为 bean 等。为什么加载上下文的时候，被包含的Bean它的构造函数的代码会执行呀？好像是很多代码都执行了！！！没有无参构造，有有参构造会报错！也就是说必须要有无参构造！这是为什么呀！
"王道基础：CSS学习笔记与简写技巧分享
在写颜色的时候，如果每两位的值相同，可以缩写一半，比如#ffffff可以缩写为#fff。这样可以帮助减少CSS文件的大小，也更加容易阅读。 1.2：边框当定义边框的...希望通过这些学习笔记，自己能够在CSS编码方面有所进步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值