CSS快速入门个人学习心得（三）

最新推荐文章于 2024-07-21 20:52:32 发布
最新推荐文章于 2024-07-21 20:52:32 发布
阅读量140 收藏 1
点赞数 1
分类专栏： 新手 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcylxzyh/article/details/113359038
版权
本文是作者学习CSS的心得体会，涵盖了CSS用户界面样式、vertical-align的使用限制、溢出文字处理的条件、CSS精灵技术的应用、字体图标、滑动门效果、伪元素、CSS3过渡效果、transform和3D变形，以及CSS3动画animation的介绍，适合初学者快速入门。
摘要由CSDN通过智能技术生成

CSS学习第三天

CSS快速入门个人学习心得（二）

1、CSS用户界面样式

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

2、vertical-align

在这里插入图片描述
对块级元素无效！！！
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、溢出文字处理

在这里插入图片描述
在这里插入图片描述
只有先添加强制一行显示才可以使用这个！！！
在这里插入图片描述

4、CSS精灵技术（sprite）

在这里插入图片描述
使用
在这里插入图片描述
注意往上走是负的
一般使用方法：给宽高，然后指定精灵图，然后输入坐标。（精灵图是背景而不是插入图片）
在这里插入图片描述

制作精灵图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5、字体图标

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注：可以直接在上面网址下载需要的字体图标。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6、滑动门

在这里插入图片描述
在这里插入图片描述
不给宽度用padding撑开，一个左对齐一个右对齐。
在这里插入图片描述
在这里插入图片描述

7、伪元素详解

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

8、过渡效果（CSS3）

一般和hover搭配使用。谁做动画给谁加过渡。
在这里插入图片描述
在这里插入图片描述
前两个属性必须写。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
如果放到hover里鼠标拿走之后没有过渡动画。放上去的动画效果相同。

如果所有属性都变化：可以用all。（变化的属性是hover里面的（或者是别的改变后的元素不局限于hover））在这里插入图片描述

9、transform

在这里插入图片描述

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

10、3D变形 transform

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

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

11、CSS3动画 animation

动画名称是自定义的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
infinite:无限循环。
在这里插入图片描述
在这里插入图片描述
结束~

肉乎乎的鸭
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS快速入门个人学习心得（二）
zcylxzyh的博客
01-28 317
CSS快速入门个人学习心得（一） CSS学习第二天1、标签显示模式（display）2、复合选择器 1、标签显示模式（display） 特点： 1、总是从新行开始 2、高度、行高、外边距以及内边距都可以控制 3、宽度默认是容器的100% 4、可以容纳内联元素和其他块元素 特点： 1、和相邻行内元素在一行上 2、高宽无效，但水平方向的padding和margin可以设置，垂直方向的无效 3、默认宽度就是它本身内容宽度 4、行内元素只能容乃文本或其他行内元素（a特殊） 2、复合选择器 复合选择器是由两
CSS快速入门学习笔记
Goallegoal的博客
05-12 205
CSS快速入门学习笔记 概述 CSS 即层叠样式表（Cascading Style Sheets），用于定义 HTML 内容在浏览器内的显示样式，如文字大 小、颜色、布局等。 CSS 分为内联式、嵌入式和外联式三类（三类的优先级为距离被修饰内容越近越优先），具有继承和层叠的特点。 语法 CSS 的代码语法由选择器和声明组成。 p { font-size:10px; } p为选择器，{font-size:10px}为声明，声明由属性和值组成，其中font-size为属性，10px为值。 举例： <!
CSS新手学习心得
Mr_Odds的博客
03-20 623
在刚学CSS的时候，总会遇到这样或那样的问题，所以我尽可能把它们都总结下来，也算是给自己一个提醒，当然有人能读到我的博客能够有所收获自然是更妙。总结如下：1.在写网页版心的时候，一定要注意:div{ width:1000px     margin: auto; }多使用百分比的方法来写，这样网页的适应程度高，可以自适应很多电子设备2.在用CSS布局时要用大盒子把小盒子套进去，不写大盒子的高...
css初学心得
weixin_46537133的博客
04-16 225
css学习笔记css的学习内容学习过程中遇到的问题学习代码 css的学习内容 经过将近半个月的时间对css的基本语法的学习，我认为css还是一个比较容易理解的语法，一是要选中一个开发者要进行编辑美化的内容，对颜色、形状、字体等进行的一系列定义与包装；二是要对网页结构进行布局，涉及边框、边距、人机交互效果等。 初学css，我基本掌握了以下两方面内容： 选择器 选择器是css中十分重要的一部分，包括：...
CSS基础知识
最新发布
weixin_67804833的博客
07-21 930
(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，
css 初学自我总结
shuang__zi的专栏
12-20 185
学习的地址 ： http://www.w3school.com.cn/css/css_syntax.asp 一 、基础概念 1.根据 CSS，子元素从父元素继承属性。（但是并非所有的浏览器都会兼容此） 2.id 选择器 （每个html只能出现一次）   id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。   id 选择器以 "#" 来定义。 3.类选择器以一个点号显示...
CSS学习
weixin_43887322的博客
02-19 263
1.CSS初识 如何学习？ 1.CSS是什么？ 2.CSS如何用？（快速入门） 3.CSS选择器（重难点） 4.美化网页（文字，阴影，超链接，列表，渐变等） 5.盒子模型 6.浮动 7.定位 8.网页动画（特效） 1.1 什么是CSS CSS:表现（美化网页）字体、颜色、边距、高度、宽度、网页浮动等 1.2 CSS发展史 略 1.3 CSS快速入门 <head> <meta charset="UTF-8"> <title>Title</title&g
css学习心得一
weixin_43989275的博客
04-14 938
一、transition: transform .3s ease-in-out , top .3s ease-in-out .3s; transition中的逗号：transition设置多个属性时需要用逗号隔开 二、input:checked ~ label ：相邻同胞选择器，选择被选中的input标签后 所有的label标签［input 和 label标签有共同的父元素］； inpu...
html和css学习心得.doc
12-21
HTML和CSS学习心得 HTML和CSS基础知识 在学习Web前端开发时，HTML和CSS是两个基础知识点。HTML（HyperText Markup Language）是一种标准通用标记语言，用来创建网页；CSS（Cascading Style Sheets）是一种样式表...
CSS3弹性盒模型flex box快速入门心得(必看篇)
09-24
以下是对CSS3弹性盒模型的快速入门心得： 1. Flexbox模型的主要特点包括： - 父容器可以定义成为flex容器，其直接子元素会成为flex项目。 - Flex容器的轴线由主轴（main axis）和交叉轴（cross axis）组成，主轴...
微信小程序快速入门个人学习心得（四）
zcylxzyh的博客
01-21 327
TODOS案例 这个案例是要做一个任务清单。 首先 思考一共分为几块内容： 1、输入框 2、任务列表 3、工具栏 因此一共三块，在对应wxml文件中，父容器中添加三个子容器。 <view class="container"> <view class="searchHandle"></view> <view class="worksHandle"></view> <view class="utilsHandle"></view&gt
HTML&&CSS学习心得
m0_52378360的博客
07-10 274
何为HTML超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML是一种标记语言（markup language），是网页制作所必备的工具。何为超链接超级链接简单来讲，就是指按内容链接，在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个
我们应该如何高效的学习CSS
weixin_41603196的博客
05-01 399
本片文章是对看过的视频进行总结 1.样式调整 2.布局调整 3.形状、特效的拆解与合并 4.页面组件设计原则 5.CSS模块化学习 主要内容是：划分模块，对css进行归结，有利于我们学习CSS如鱼得水 对CSS宏观的认知 想要学好css就需要对所有css具有宏观的认知，能很好的把相应的css进行归结。我们可以通过下列几个项对css进行归结 >1.样式调整 >2.布局调整 &g...
保姆级教程 CSS 知识点梳理大全，超详细！！！
热门推荐
道阻且长，行则将至。
10-08 1万+
CSS入门，看这一篇就够了，超详细！！！ 一、前端三层 二、CSS的书写位置 (一)、内嵌式 内嵌式，顾名思义，内嵌在.html文件中 在<head></head>标签中，书写 <style></style>标签对，里面书写CSS语句。 (二)、外链式 可以将CSS单独存为.css文件，然后用link标签引入它 外链式的优点：多个HTML文件，可以共用一个CSS样式表文件 (三)、 导入式 导入式是最不常见的样式表导入方法,使用导
CSS学习笔记
qq_46485137的博客
02-28 4835
css的基本知识 一、初识CSS 1.1 CSS是什么 1.2 CSS发展史 1.3CSS的三种导入方式 1.3.1 内部样式： 1.3.2 外部样式（推荐使用）： 1.3.3 行内样式 二、CSS选择器⭐ 三、美化网页（文字，阴影，超链接，列表） 四、盒子模型 五、浮动 六、定位 七、网页动画（特效） 一、初识CSS 1.1 CSS是什么 CSS：Cascading Style Sheet 层叠级联样式表 ...
h5+css
shutingB的博客
06-29 677
CSS样式 课程目标 1.css引入方式（重点） 2.css选择器（重点） 3.css盒子模型（重点） 4.css3常见效果（重点） 1. 级联样式表 1.1 css介绍 引用百度百科 1.2 css概述 层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式） 2. css引入方式 2.1 行内样式 行内样式（将样式直接写在标签上），需要使用style属性 <p style="colo
CSS样式的学习
huxixi的博客
07-12 1638
今天学习了CSS的基础知识，CSS和html的功能不太一样，html主要描述了要呈现的内容，而CSS则是定义了这些内容的呈现形式，可以设置字体、颜色、大小等。使用CSS能够将页面内容和呈现的方式有效分离，有利于分工合作，提高效率。 1、基本样式 CSS是指层叠样式表，其中有三种方式： （1）内联样式：是将样式定义在style属性中，但这样会导致内容和形式会高度耦合，不利于分工合作，而且只能应
CSS学习记录
weixin_46699031的博客
03-25 83
文章目录一、CSS如何生效1.外部样式表2.内部样式表3.内联样式二、盒子模型三.定位 一、CSS如何生效 1.外部样式表 引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。 首先是创建所需的html文件和css文件,这里我分别创建了文件夹和对应的文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"
web开发进阶，学习CSS行内样式
m0_60125067的博客
07-21 115
基本知识 1. 区分Real DOM和Virtual DOM Real DOM Virtual DOM 更新缓慢。 更新更快。 可以直接更新 HTML。 无法直接更新 HTML。 如果元素更新，则创建新DOM。 如果元素更新，则更新 JSX 。 DOM操作代价很高。 DOM 操作非常简单。 消耗的内存较多。 很少的内存消耗。 2. 什么是React？ React 是 Facebook 在 2011 年开发的前端 JavaScript 库。 它遵循基于组件的方法，有助于构
2020寒假前端小白HTML&CSS学习实战与心得
在这个长达寒假的特殊时期，博主以一个前端新手的身份，分享了自己2020年寒假学习HTML和CSS的心得体会，以及六大项目实战经验。文章起始于对疫情下人类团结互助的感慨，引出作者对web前端技术的热情投入。 博主强调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值