CSS3学习笔记

CSS代码：.menuSection{display:none;}#brand:target{/*这里：target是指id="brand"的div对象，如果有多个target，使用#brand:target*/display:block;}11.listlist装饰list-style:none;text-decoration:none;12.nth-last-child(n)从一个父元素的最后一个子元素开始计数以选择特定元素。13.:only-child,:only-of-type父元素中只有一个子元素，子元素也只有一个。14、状态选择器":checked"配合其他标签实现自定义样式input[type="checkbox"]+span{opacity:0;}input[type="checkbox"]:checked+span{opacity:1;}15.::selection"伪元素用于匹配高亮文本（鼠标选中文本时的文本）。::选择{背景：橙色；color:white;}16.:read-only”伪类选择器，用于指定只读状态下元素的样式。简单理解就是在元素中设置“readonly='readonly'”，“:read-write”选择器与“:read-only”选择器正好相反，主要用于指定元素处于非只读状态时的样式。17、变换--rotaterotate()transform:rotate(45deg);18:Deformation--distortionskew()将物体以中心绕X轴和Y轴倾斜一定角度transform:skew(45deg);19:Deformation--scalescale()scale(X,Y)同时水平和垂直缩放元素transform:scale(1.5);20:Transformation--displacementtranslate()使用translate()函数将元素从原来的位置移动而不用影响X和Y轴任何web组件on.transform:translate(-50%,-50%);21.Transformation-origintransform-origin:lefttop;22.Transition属性transition被鼠标点击，获得焦点，并被点击或触发元素的任何变化，平滑地改变带有动画效果的CSS属性值。在CSS中创建一个简单的过渡效果可以通过以下步骤实现：首先，在默认样式中声明元素的初始状态样式；二、声明过渡元素的最终状态样式，比如浮动状态；第三，通过为默认样式添加过渡功能来添加一些不同的样式。CSS3的transition属性是一个复合属性，主要包括以下子属性：指定过渡函数transition-delay:指定延迟时间开始div{width:200px;高度：200px；背景颜色：红色；边距：20px自动；-webkit-transition:background-color.5sease.1s;过渡：背景色。5sease.1s;}div:hover{background-color:orange;}23.转换函数transition-timing-function24。动画定义关键帧@keyframeschangecolor{0%{background:red;}20%{背景：蓝色；}40%{背景：橙色；}60%{背景：绿色；}80%{背景：黄色；}100%{背景：红色；}}div:hover{animation:changecolor5sease-out.2s;}25.animation-iteration-count属性主要用来定义动画播放次数。26、animation-direction属性主要用于设置动画播放方向。语法规则如下：animation-direction:normal|交替[,正常|alternate]*main有两个值：normal，alternate1，normal是默认值。如果设置为normal，则动画的每个循环都会向前播放；2.另一个值为alternate，其作用是播放动画的偶数次正向播放，奇数次反向播放。27、设置动画的播放状态。animation-play-state属性主要用来控制元素动画的播放状态。它有两个主要值：运行和暂停。28.animation-fill-mode属性定义了动画开始和结束前后发生的事情。它主要有四个属性值：none、forwards、backwords和both。它的四个属性值对应的效果如下：none默认值，表示动画会按预期进行和结束，当动画完成最后一帧时，动画会倒退到初始帧forwards表示动画会在结束后继续应用最后一个关键帧的位置向后将在将动画样式应用到元素时快速应用动画的初始帧。两种元素动画都有向前和向后的效果。29.多列布局——Columncolumns:||layoutcolumns属性参数主要包括两个属性参数：列宽和列数。主要用于定义多列中每列的宽度。主要用于定义多列中的列数。要显示2列，每列的宽度为200px。代码为：columns:200px2;30.column-gap主要用于设置列间距，其语法规则如下：column-gap:normal||31.Listframecolumn-rulecolumn-rule主要用于定义列和列之间的边框宽度、边框样式和边框颜色。同bordercolumn-rule:2pxdottedgreen;32.跨栏设置column-spancolumn-span主要用于定义一个栏元素中有多少个子元素可以跨栏，即跨所有栏33.响应式设计对应的CSS代码：@media(min-device-width:600px){img[data-src-600px]{内容：attr(data-src-600px,url);}}@media(min-device-width:800px){img[data-src-800px]{content:attr(data-src-800px,url);}}34。自由缩放属性调整大小：无|两者|横向|垂直|［轮廓颜色］||[大纲样式]||[轮廓宽度]||[轮廓偏移量]||继承{轮廓：红色实心2px；轮廓偏移：2px；}36.CSS生成内容我是一个元素可以通过":after"和"content:attr(title)”到元素的“Thetitle”值插入在元素内容“我是一个元素”之后：a:after{content:attr(title);color:#f00;}37.CSS长度单位em:相对于父元素的字体大小ch:数字“0”,1ch表示0在这个字体中的宽度ex:相对长度单位。相对于字符“x”的高度。通常是字体高度的一半。rem：相对长度单位。相对于根元素（即html元素）font-size计算值的倍数vmax：相对于视口的宽度或高度，取大者。其中最大的被分成100个单位的vmaxvmin：以相对于视口的宽度或高度较小的那个为准。其中最小的被分成100个单位的vmin38.hsla颜色H：Hue（色相）。0（或360）表示红色，120表示绿色，240表示蓝色，也可以用其他值来指定颜色。取值为：0-360S：Saturation（饱和度）。值：0.0%-100.0%L：亮度（亮度）。值：0.0%-100.0%A：Alpha透明度。该值介于0和1之间。39.border-shadow/偏移-x|偏移-y|模糊半径|传播半径|color/可以用逗号分隔，多个投影40.background-position指定背景图片相对于任意角的偏移量，background-position:right20pxbottom10px;background-origin有两个取值，一个是content-box，是基于内容的，另一个是paddingboxbackground-origin:content-box;42.渐变色处理背景：linear-gradient(#fb320%,#58a80%);/*容器顶部20%填充#fb3纯色，而底部20%填充#58a纯色*/1）20%代表色阶，表示从上到下20%渐变从#58a开始，到80%渐变停止。2）如果我们将第二个色标的位置值设为0，那么它的位置会一直被浏览调整前一个色标的位置值3）背景：linear-gradient(toright,/or90deg/#fb350%,#58a0);第一个值可以设置为方向，从下到上为0°，顺时针4)整页无缝对接：background:linear-gradient(45deg,#fb325%,#58a0,#58a50%,#fb30,#fb375%,#58a0);background-size:30px30px;/*三个地方颜色过多*/5)Repeatinggradient:background:repeating-linear-gradient(60deg,#fb3,#fb315px,#58a0,#58a30px);/*表示从#fb3开始，#fb3的15px开始逐渐变化，每次相差为(15px-0)43.background-size:forbackground-image设置每个背景的大小。背景图像中可以有多个图形。第一个优先级最高，然后依次递减，就像字体一样。背景图像：线性渐变（90deg，红色10px，透明0），线性渐变（90deg，蓝色20px，透明0），线性渐变（90deg，粉红色20px，透明0）；背景大小：80px100%,60px100%,40px100%;盒子阴影：offset-x|偏移-y|模糊半径|传播半径|color分别表示X轴方向的偏移量和Y轴方向的偏移量，用高斯模糊算法（或类似算法）用4px模糊一下，本质上就是上面表示颜色过渡的长度阴影颜色和阴影边缘的纯透明颜色之间的距离大约是模糊半径的两倍。使用4px的模糊半径意味着阴影的大小会比元素本身的大小大8px左右，所以阴影最外面的圆圈会从元素的所有四个边都暴露出来，扩展半径，a-5px展开半径会将阴影的宽度和高度减少10px（即每边5px）有几种方法可以为图片添加滤镜。过滤器可以动画，但混合模式不是1)添加过滤器：img{transition:.5sfilter;filter:sepia(1)saturate(4)hue-rotate(295deg);}img:hover,img:focus{filter:none;}sepia(),会给图片添加去饱和的橙黄色染色效果，使用saturate()滤镜增加每个像素的饱和度，hue-rotate()滤镜，将每个像素的色相偏移指定的度数2)基于blendmodescheme，控制上层颜色的方式图层元素与下层颜色混合：(1)mix-blend-modea{background:hsl(335,100%,50%);}img{mix-blend-mode:luminosity;}亮度混合模式保留其上方元素的HSL亮度信息，并吸收来自其底层元素的色调和饱和度信息。如果我们要的主色在下层准备好，待处理的图片放在上层并设置为这种混合模式(2)background-blend-mode