前端实训-初级阶段（5-8）

时间：2023-04-05 20:08:24 HTML5

最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。CSS选择器（basic,hierarchical,attribute,pseudo-class,pseudo-state）我们要讲什么CSS常用样式属性CSS3过渡、变换、动画CSS3三维场景构建与应用-class,pseudo-state)state)basicselectorselectorexampleexampledescriptionCSSspecificationlevelIDselector#login选择id="login"的元素1类选择器.btn选择所有class="btn"的元素1元素选择器div选择所有div标签1全局选择器*选择所有标签2属性选择器[type]选择所有具有type属性的元素2属性选择器[type=file]选择所有type="file"的元素并全部匹配2属性选择器[class~=file]选择所有元素withclass="file"和多值匹配属性2属性选择器[type｜=file]选择所有type属性和value以file或file-为前缀的元素2属性选择器[type^=file]选择所有具有a的元素type属性并以文件3属性选择器开始[type$=file]选择所有具有类型属性并以文件3属性结束的元素3属性选择器[type*=file]选择一个类型属性和所有包含文件3CSS规范级别的元素代表CSS1，CSS2.1，CSSSelectorsLevel3，SelectorsLevel4。[type|=file]其实就是[type|=file]，在表单中不能输入，所以改为全角。（会打的告诉我吧~）组合选择器选择器示例示例说明CSS规范级别分组html，body选择和1个后代空间ulli选择所有元素>元素。1lower-levelul>li选择其父元素为

元素。2adjacentsiblingdiv+div选择紧跟在
元素之后的
元素。2兄弟h2~div选择
元素之后的所有
元素3后代选择器要注意嵌套问题比如ul{font-size:1.5em;}低级选择器一般在只有子元素时使用期望有，不想有更深的层次。伪类选择器选择器示例示例描述CSS规范级别：linka:linkunvisitedlink1:visiteda:visited已访问链接1:hovera:hover（鼠标悬停）鼠标当前在链接上1:activea:activemouseispressingthelink1:focusinput:focusinput2:first-childdiv:first-child表示父元素的第一个子元素2:last-childdiv:last-child表示父元素的最后一个子元素3:nth-child(n)div:nth-child(2n)表示父元素的中间偶数位置子元素3:emptydiv:empty空div3:target:target匹配锚元素3:disabledinput:disabledunavailableinput3:checked:checkedcheckedcheckbox,radio,select3:not(selector)div:not(:empty)allnon-emptydiv3:focus-withinform:focus-within高亮聚焦形式使用伪类时必须使用4a标签注意爱恨交织原则（LoVe/HAte):active也常用于tab选择：focusClick,touch,tab都可以触发伪元素选择器Selector实例说明CSS规范level::after.icon:after是在标签末尾添加一个内联元素2::before.icon:before在标签前面添加一个内联元素2::placeholderinput::placeholder修改文本框的占位符样式4你可能注意到第一列是双冒号，第一个第二个column是一个冒号。别担心，我没有弄错。规范定义单冒号为伪类，双冒号为伪元素。但是浏览器厂商的大哥并不买账。好吧，目前，单个冒号会更兼容。after和before要求content:'content'，否则不显示。placeholder属于shadowDOM上面是我们常用的一些选择器，或者用的比较多的选择器。有些不兼容，新规格，有些鸡肋我没写。有兴趣的可以去MDN看看。AlmostForgottenWeightCalculation(Priority)在下面的列表中，选择器类型的优先级是递增的：类型选择器（例如，h1）和伪元素（pseudo-elements）（例如，::before）类选择器（例如，.例如），属性选择器（例如，[type="radio"]），伪类（例如，:hover）ID选择器（例如，#example）成对的通用选择器（*），组合器（+，>，~）,'')和否定伪类(:not())优先级无效。（但是，在:not()内声明的选择器确实会影响优先级）。添加到元素的内联样式（例如，style="font-weight:bold"）将始终覆盖来自外部样式表的任何样式，因此被认为具有最高优先级。.在样式声明中使用!important规则时，此声明将覆盖任何其他声明。虽然从技术上讲!important与优先级无关，但它与优先级直接相关。2、CSS中有很多常用的样式属性。取值单位是px，绝对单位，像素，最常用的em是相对单位，相对于当前对象中文本的font-size的倍数。remCSS3相对单位，相对于根元素（即html元素font-size的倍数）vwvhCSS3相对单位，屏幕视口，分成100份vmaxvminCSS3相对单位，屏幕视口，分为100份，最大宽高，最小值0%/0px/0vw可以省略单位写成0。算了，还有%，这个单位留作课后作业。CSS属性类型属性定位/z-index/top/right/bottom/left/clip布局display/float/clear/visibility/overflow/overflow-x/overflow-y盒子-大小width/min-width/max-width/height/min-height/max-height盒子-外边距/margin-top/margin-right/margin-bottom/margin-left盒子-内padding/padding-top/padding-right/padding-bottom/padding-left边框border/border-width/border-style/border-color/border-top/border-top-width/border-top-style/border-top-color/border-right/border-right-width/border-right-样式/右边框颜色/下边框/下边框宽度/下边框样式/下边框颜色/左边框/左边框宽度/左边框样式/左边框-color/border-radius/border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius/box-shadow/边界图像/边界图像-source/border-image-slice/border-image-width/border-image-outset/border-image-repeat背景background/background-color/background-image/background-repeat/background-attachment/background-position/background-origin/background-clip/background-sizecolorcolor/opacity//ColorName/HEX/RGB/RGBA/HSL/HSLA/transparent/currentColor变换transform-origin/transform-style/perspective/perspective-origin/backface-visibilitytransitiontransition/transition-property/transition-duration/transition-timing-function/transition-delay动画animation/animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction/animation-play-state/animation-fill-mode以上是一些属性，还有一些放出来，有兴趣的可以看看。下面我们简单介绍几个常用的显示属性none：hiddenobjects。与visibility属性的隐藏值不同，它不为隐藏对象inline预留物理空间：指定的对象是一个inline元素。block：指定对象是块元素。inline-block：指定该对象是一个内联块元素。(CSS2)table-cell：指定对象为表格单元格。类似于html标签(CSS2)框：将对象显示为一个灵活的框。（弹性框的最旧版本）(CSS3)内联框：将对象显示为内联块级弹性框。（最早版本的flexbox）（CSS3）flexbox：将对象显示为flexbox。（弹性框过渡版本）(CSS3)inline-flexbox：将对象显示为内联块级弹性框。(弹性框过渡版)(CSS3)flex:将对象显示为一个灵活的弹性框。（最新版本的弹性框）(CSS3)inline-flex：将对象显示为内联块级弹性框。(最新版伸缩箱)(CSS3)position属性static:regularflow。此时，4个定位偏移属性将不会被应用。relative：常规流，位置不变，定位偏移属性只移动显示效果。absolute：脱离常规流程，offset属性指的是最近定位的祖先元素。如果没有定位的祖先元素，它将返回到body元素。框的偏移位置不会影响正常流中的任何元素，并且它的边距不会与任何其他边距重叠。fixed：与absolute一致，但offset定位是基于window的。出现滚动条时对象不滚动。（IE和iOS存在兼容性问题）sticky：对象处于正常状态时遵循正常流程。它就像是相对和固定的结合。当它在屏幕中时，它会按照正常流程进行格式化，而当它滚出屏幕时，它会表现得像固定的一样。这个属性的表现就是你在现实中看到的吸附效果。(CSS3)center：与absolute一致，但偏移定位是基于祖先元素的中心点。该框在其包含容器内垂直和水平居中。(CSS3)页面：与绝对一致。元素位于分页媒体或区域块内，元素的包含块始终是初始包含块，否则取决于每个绝对模式。(CSS3)3.CSS3transition,transform,andanimation上一节已经列出了本节包含的属性。在本节中，我们将讨论具体应用。transitiontransitiontransition的缩写形式：属性durationtiming-functiondelay;，下面分别说明属性名称描述默认值transition-property执行过渡动作的属性alltransition-duration动作执行时间0transition-timing-function动作执行曲线easeeasetransition-delay延迟动画时间0transition:border-color.5sease-in.1s,background-color.5sease-in.1s,color.5sease-in.1s;相当于transition-property:border-color,background-color,color；过渡持续时间：0.5s、0.5s、1s；过渡计时功能：缓入，缓入，缓入；转换延迟：.1s，.1s，.1s；border-color的变化执行0.5秒，使用ease-in曲线执行，等待0.1秒后开始执行。意思是背景颜色的变化执行0.5秒，以缓入曲线执行，等待0.1秒再开始。表示变色执行1秒，以ease-in曲线执行，等待0.1秒后开始执行。transition-timing-function表示这个属性的值比较有意思，可以做一些特殊的动画。图片来自MDN:timing-function。cubic-bezier()定义三次贝塞尔曲线。这些曲线是连续的，通常用于动画中的平滑过渡，也称为缓动函数。三次贝塞尔曲线需要四个点来定义，P0、P1、P2和P3。P0和P3分别是起点和终点，这两点固定在坐标系上是一个比例，横轴是时间比例，纵轴是完成状态。P0为(0,0)，代表初始时间和初始状态。P3为(1,1)，表示终止时间和终止状态。Transformtransform很深情。底层提供了matrix()和matrix3d()进行操作，封装了translate移动、rotate旋转、scale缩放、skew倾斜畸变。刚才说的是2D，加上3D就是3D变换，比如translate3d()。有个意外perspective()指定了透视距离。transform-origin默认值：50%50%。用于设置变换的基点。transform-style默认值：flat，默认为2D空间。设置为preserve-3d以更改为三维空间，元素将创建局部堆叠上下文。动画过渡可以理解为两个关键帧之间的补间操作。动画只是一系列关键帧。animation-name：动画名称，需要@keyframes来定义动画@keyframestestanimations{from{opacity:1;}到{不透明度：0;}}.testanimations{animation:testanimations1s;}animation-duration:动画持续时间animation-timing-function:动画执行曲线animation-delay:延迟时间animation-iteration-count:循环次数。infinite：无限循环。：指定对象动画的具体循环次数。animation-direction：循环中是否反方向移动normal：正常方向（默认值）reverse：反方向运行alternate：动画先正常运行再反方向运行，交替交替继续运行-reverse：动画先反向运行再正向运行，交替继续运行animation-fill-mode：结束时的状态none：默认值。不设置动画以外对象的状态forwards：动画结束时的状态backwards：动画开始时的状态both：动画结束或开始的状态animation-play-state：动画暂停和开始的状态。跑步：运动。暂停：暂停。4.CSS33D场景构建与应用主要应用是透视。下面我们将做一个视差滚动的例子。上一篇前端培训-初级阶段（1-4）后记更新于2019-03-15，昨天下午，主讲人讲了这节课。这里记录一下演讲者的文章，演讲者cnblogs。顺便把问题记录下来，以后测试demo。CSS选择器权重和覆盖规则translate和rotate一起使用（轴变换问题）justify-content:space-evenly;兼容解决方案位置浮动变换后的级别。.....................................................。。早上起来的时候忘了还有什么剩下的，以后有的话再补上。最近手头有点工作，比如在移动端拖拽排序，在网页端播放amr。后续的整理代码也发出来了。References（参考资料）培训目录源码-备份到笔记MDNCSS视差滚动快速参考

上一篇：Mock模拟数据平台-easy-mock本地化实现分享

下一篇：css居中完全指北
前端实训-初级阶段（5-8）相关文章
最新推荐
猜你喜欢