手记

[前端学习]CSS3部分学习笔记,第一天

css3

  • 简介:与H5一样,css3就是css的一个新版本,新增了很多功能让开发更便捷有趣

  • 现状:

    • 浏览器支持程度较差,需要加前缀

    • 移动端支持优于PC端

    • 不断改进中,部分原JS实现的效果,css3也能做到

    • 应用广泛

属性选择器

  • css3中新增了许多灵活查找元素的方法,让获取元素更加的精确,并且css3选择器与jQuery中所提供的绝大部分选择器兼容

    • E[attr] 获取有attr属性的E元素,例如:div[class]

    • E[attr=val] 获取属性值完全等于val的E元素,=号是严格匹配,例如:div[class=red]

    • E[attr*=val]获取属性值里包含val字符并且在“任意”位置的E元素,只要有val就行,例如:div[class*=dvaler]

    • E[attr^=val] 获取属性值里包含val字符并且在“开始”位置的E元素,例如:div[class^=value]

    • E[attr$=val] 获取属性值里包含val字符并且在“结束”位置的E元素,例如:div[class$=itval]

  • 可以发现其实是用到了正则的匹配符号

伪类选择器

  • 相对于兄弟元素的结构伪类

    • +获取相邻满足条件的兄弟元素,例如:.index + li获取样式名为index元素相邻的li元素,必须是相邻且为li的兄弟元素才能被获取到

    • ~获取满足条件的兄弟元素,例如:.index ~ li获取样式名为index元素的所有兄弟li元素,只要是它的兄弟li元素都能获取到

  • 相对于父元素的结构伪类(比较抽象,着重理解)

    • 比如:E:first-of-type获取E元素父元素中所有E元素的第一个;E:nth-of-type(2)获取到E元素父元素中所有E元素,索引为2的那个;E:nth-of-type(odd)获取到E元素父元素中所有E元素,索引为奇数的项;E:nth-last-of-type(-n+5)获取到E元素父元素中所有E元素的最后五项

    • 总结就是,使用of-type限制后,过滤其他子元素,只找E元素,一般建议用of-type的写法

    • 索引是数字,注意这里面索引是从1开始。如果写索引就是获取到E元素父元素内,索引为几的子元素。如果索引对应的元素不是E,那么获取不到

    • 关键字有evenodd。如果写关键字就是获取E元素父元素内,偶数或者奇数索引的所有子元素,如果偶数或者奇数项中有不是E的元素,那么获取不到

    • 表达式涉及到了一个默认参数n,它会自动计算E元素父元素内部的所有子元素个数,以线性递增的方式,0,1,2,3,4,5....依次类推,n的用法特别多,具体看教案笔记。要知道是,如果用n来参与运算,那么整个表达式的结果才是真正的n

    • E:first-child获取到E元素的父元素内部的第一个子元素且必须是E元素,如果其父元素内部的第一个子元素不是E元素,那么获取不到

    • E:last-child获取到E元素的父元素内部的最后一个子元素且必须是E元素,如果其父元素内部的最后一个子元素不是E元素,那么获取不到

    • E:nth-child(索引||关键字||表达式)

    • 重点:记住上面的伪类都有一个缺陷,就是没有限制类型,如果是E元素就能获取,不是E元素就无效。这时将child改为of-type,限制只获取E元素,其他子元素都会被过滤掉,解决问题

    • E:empty获取E元素父元素内部,没有任何内容的E元素(有空格都不行)

  • 锚点结构伪类

    • E:target获取当前触发锚点的目标元素,简单来说:当你点击锚点的时候,锚点对应的那个目标元素就会被获取到

伪元素选择器

  • 什么是伪元素

    • 伪元素就是指在页面中显示,但是DOM树结构中却找不到它。每一个DOM元素都有伪元素

    • 伪元素默认是行内元素,必须设置content属性,哪怕不写内容

    • 它的优点是不在DOM里面生成,所以会减少资源的消耗。但缺点同样是因为不在DOM中,所以JS也不能获取操作它

  • 常用的伪元素:

    • ::before在元素内容前面添加

    • ::after在元素内容后面添加

    • ::first-letter获取元素文本内容的第一个字符,注意它的优先级高于下面两个,如果设置了那么下面两个伪元素设置的大部分样式都不会其效果,但不是全部

    • ::first-line获取元素文本的第一行

    • ::selection获取并设置元素内容被选中的文字,只能修改显示样式不能修改文字大小

  • 兼容老浏览器写法是只写单冒号,新浏览器单冒号也识别

新增颜色设置方法

  • rgba(红,绿,蓝,透明度)这个之前记过

  • hsla(色调,饱和度,明亮度,透明度)下面对几个参数做介绍:

    • 红色(0,360),橙色30,黄色60,绿色120,青色180,蓝色240,紫色300。其实就是0-360的取值,度数变化颜色也会变化

    • 饱和度取值0%-100%,就是颜色的本色强度,越低颜色越淡,一般建议是100%

    • 明亮度取值0%-100%,越高越白,越低越黑。一般建议50%,注意css3中50%就等同于ps中的100%

    • 透明度取值0-1,不再说明

    • 色调就规定显示什么颜色,与rgb有点区别的是,css3将颜色做了一个环的处理,七彩色围绕成一个环:

  • 这两个方法设置的透明度优于opactiy的地方是:都只对当前元素生效,对内部元素不影响。大部分情况下设置颜色用拾色器就能获取到值

文本阴影设置

  • text-shadow:距离(左边偏移值,上边偏移值),模糊值,颜色某些效果需要设置多层阴影来实现,多层阴影设置用逗号分隔即可

盒模型设置

  • 在之前的css中,如果给盒子添加padding和border的时候,会让宽高增加。因为默认给盒子的宽高只是限于内容区域,而border和padding是内容之外的,所以添加就会撑开

  • css3中为了解决这样而引起的网页混乱问题,添加了box-sizing属性

  • box-sizing: border-box||content-box,属性介绍:

    • content-box就是原有css设置方法,宽高设置给内容区域

    • border-box是让盒子设置的宽高包含了内容内边距边框,这样设置后就算你添加内边距和边框都不会撑开盒子,它会挤压内容的宽高,把空间给内边距和边框。好处是盒子的总宽高不会变,也就不会影响盒子布局了

  • 浏览器兼容性:

    • IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-

边框圆角

  • border-radius可以通过每个角点来设置边框的圆角,以下是对值书写方式的说明:

    • border-radius:*px 将创建四个大小一样的圆角

    • border-radius:*px *px第一个值表示左上角、右下角;第二个值表示右上角、左下角

    • border-radius:*px *px *px第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角

    • border-radius:*px *px *px *px 四个值分别表示左上角、右上角、右下角、左下角

  • 上面是统一设置圆角,下面介绍单个圆角设置方法:

    • border-top-left-radius:*px设置左上角圆角

    • border-top-right-radius:*px设置右上角圆角

    • border-bottom-right-radius:*px设置右下角圆角

    • border-bottom-left-radius:*px设置左下角圆角

  • 补充说明:

    • 设置每个圆角的属性值既可以设置一个,也可以设置两个。如果设置一个表示水平和垂直坐标值相同,如果设置两个就分别是水平坐标和垂直坐标(其实画圆就是以角点为基准, 走设置的距离,然后将水平和垂直位置的交叉点作为圆心画圆),例如:border-top-left-radius:10px/20px就是分别设置距离

    • 如果想要每个点每个方向的距离都不相同还可以这样写:border-radius:10px 20px 30px 40px/20px 40px 60px 80px这样每个点会以斜线分隔,每个值按照顺序一一对应拼接,再按照左上右上右下坐下的顺序来设置圆角

边框阴影

  • box-shadow: h v [blur spread color inset]边框阴影与文本阴影的设置方法相差不大,下面对属性介绍:

    • h 水平位置距离

    • v 垂直位置距离

    • blur 模糊值

    • spread 阴影扩展,可放大或缩小阴影面积

    • color 设置阴影颜色

    • inset 设置内阴影

渐变

  • css3中增加了颜色渐变的效果,要注意因为渐变不是单一色,所以不能设置给backgrond-color,要设置给background

  • 线性渐变,从一个方向往另一个方向产生渐变效果

    • 形状参数有:circleellipse。它们是以元素的正中心点来扩散渐变,但是circle适应的形状是正方形,ellipse会根据形状来自适应。一般这个参数很少写,不写默认会自动适应形状

    • 大小参数有:closest-side扩散渐变到最近的边;farthest-side扩散渐变到最远的边;closest-corner扩散渐变到最近的角;farthest-corner扩散渐变的最远的角。默认值是最远的角,通过设置扩散渐变停止的位置,可以控制它的渐变范围

    • 坐标:at x坐标 y坐标,设置坐标可以修改渐变的中心点,坐标值可以是数值也可以是方位词,只写一个方位词,那么另一个默认是center

    • 颜色:与线性渐变一样,可以写多个颜色和位置

    • to right从左往右渐变,也可以写90deg,效果一样

    • to left从右往左渐变,也可以写270deg

    • to top从下往上渐变,也可以写0deg

    • to bottom从上往下渐变,也可以写180deg

    • background: linear-gradient(方向值,颜色1 位置,颜色2 位置,颜色3 位置....)

    • 方向值有4中写法:

    • 颜色如果不写位置,那么它默认第一个是开始颜色,第二个是结束颜色。写位置用百分比就行。如果出现两个颜色位置相同,那么这两个颜色就没有渐变效果,直接跳转

    • 径向渐变,以一个中心点往四周扩散渐变

    • background:radial-gradient(形状 大小 坐标,颜色)

  • 重复渐变

    • 如果你有渐变样式是重复多次渐变颜色,那么可以用到重复渐变,只需要写一次渐变色,它会自动重复只写到结束为止(100%),语法不变

    • repeating-linear-gradient()重复线性渐变

    • repeating-radial-gradient()重复径向渐变

背景样式设置

  • background-repeat背景平铺属性介绍:

    • repeat自动平铺,repeat-x横向平铺,repeat-y纵向平铺

    • no-repeat不平铺

    • round自动缩小图片再平铺,实现正好铺满效果

    • space自动为图片添加相等的间距,实现正好铺满效果

  • background-attachment背景滚动方式属性介绍:

    • fixed背景不会跟随页面滚动

    • scroll当元素没有滚动条的时候,它作用是背景跟随页面滚动;当元素有滚动条的时候,它作用是不跟随元素内容一起滚动

    • local当元素有滚动条的时候,跟随元素内容一起滚动

  • background-size背景图片大小设置属性介绍:

    • auto不作任何操作,让图片保持原大小

    • number设置实际数值尺寸,让图片改变大小,注意如果图片比背景区域小或者与图片不是同比例,直接设置会造成图片失真变形

    • percentage设置百分比,可以是0%-100%之间任何值,但是只有块级元素的背景可以用百分比设置。同时百分比计算的依据是其所属元素的宽度值

    • cover将图片等比例缩放,自适应铺满整个容器,这样设置有可能出现图片溢出的情况。其实就图片高度自适应与盒子高度一样

    • contain与cover刚好相反,也是等比例缩放图片,但是它是让容器完全包含整张图片,所以这样设置有可能出现空白区域。其实就是自适应图片宽度与盒子宽度一样

    • background-size取值为number和percentage时可以设置两个值,也可以设置一个值,当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高度,而是会参照第一个参数值进行等比例缩放

  • background-origin:背景对齐方式属性介绍:

    • border-box背景默认对齐边框左上角,会重叠边框

    • padding-box背景默认对齐内边距左上角,会重叠内边距

    • content-box背景默认对齐内容左上角,会重叠内容

  • background-clip背景裁切属性介绍:

    • border-box背景显示边框及以内部分

    • padding-box背景显示内边距及以内部分

    • content-box背景显示内容部分

    • background-clip与box-sizing和background-origin配合使用,可以实现一个a链接图片显示小,但点击触发范围大的效果

边框图片(难点)

  • border-image-source:url(...)设置边框背景图片

  • border-image-slice:xx裁切图片,根据你设置的值来裁切背景图片为九宫格的形式,xx就是你设置的内偏移距离,也就是裁切距离

    • 只写一个值就代表四个方向都一样,如果每个方向想不同,那就按上右下左的顺序来写,它会分别根据设置的值来裁切。注意这个值是不带单位的

    • 另外分成九份后,分别是左上角、右上角、右下角、左下角、顶侧栏、右侧栏、地侧栏、左侧栏、中间。默认情况下中间是不显示的,设置fill才能显示中间部分

    • 注意裁切之后,除了中间部分,其它只会显示在边框以内,所以要么设置边框宽度,要么配合border-image-width属性,要么设置padding值才能看到

  • border-image-width:xxpx设置边框图片宽度,如果不设置这个属性,默认就是边框的宽度。但是要注意边框图片本质就是被背景图片,它不会影响内容显示,所以如果设置过宽就会与内容重叠。一般情况下建议这个属性的值与边框宽度相同

  • border-image-outset:xxpx扩展边框宽度,这个属性一般不用,因为设置它会撑开盒子,影响整体布局

  • border-image-repeat:stretch||repeat||round设置边框图片平铺的方式,注意九宫格四个角点是不会平铺的。stretch是默认值拉伸,repeat是直接平铺,round会自动缩放图片大小,再平铺达到完全铺满的效果

  • 连写方法:border-image: source slice/width/outset repeat;

过渡效果

  • 过渡效果实际上就是让样式变化时,以动画的方式来改变,它跟之前学的js动画函数其实是一个功能,是什么元素的样式要加上过渡效果,就写在该元素选择器内

  • transition-property:样式名你想让什么样式改变时以动画方式实现,就写对应的样式名

  • transition-duration:xs变化时动画执行多长时间,以秒为单位

  • transition-timing-function:linear||ease||规定动画的移动的方式

    • linear匀速移动

    • ease先慢后快结束时又变慢

    • steps(x)固定动画一步一步的执行,参数是数值几步

  • transition-delay:xs过渡执行的延迟时间,以秒为单位

  • 简写方式:

    • transition:属性名 动画时间 移动方式 延迟时间如果有多个样式要实现过渡改变,用逗号分隔写多次。

  • 最后,过渡效果只能产生某个值到另一个具体值的过渡,所以必须是带有具体数值的css样式改变才能用过渡,例如:display它的值是none和block,不是具体值所以用过渡无效。并且过渡默认是在触发事件结束后,自动还原样式值



作者:印象rcj
链接:https://www.jianshu.com/p/9177f4bee6b7


0人推荐
随时随地看视频
慕课网APP