36

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

我们要讲什么

  1. CSS选择器(基本、层级、属性、伪类、伪状态)
  2. CSS常用样式属性
  3. CSS3 过渡、变换、动画
  4. CSS3 3D场景搭建与应用

CSS选择器(基本、层级、属性、伪类、伪状态)

基本选择器

选择器 例子 例子描述 CSS规范级别
ID 选择器 #login 选择 id="login" 的元素 1
类别选择器 .btn 选择 class="btn" 的所有元素 1
元素选择器 div 选择所有 div 标签 1
通配选择器 * 选择所有标签 2
属性选择器 [type] 选择有 type 属性的所有元素 2
属性选择器 [type=file] 选择 type="file"全匹配 的所有元素 2
属性选择器 [class~=file] 选择有 class="file" 且 多值匹配 属性的所有元素 2
属性选择器 [type|=file] 选择有 type 属性值为 file 或 file- 为前缀的所有元素 2
属性选择器 [type^=file] 选择有 type 属性file 开头 的所有元素 3
属性选择器 [type$=file] 选择有 type 属性file 结尾 的所有元素 3
属性选择器 [type*=file] 选择有 type 属性包含 file 的所有元素 3
  1. CSS规范级别代表 CSS 1CSS 2.1CSS Selectors Level 3Selectors Level 4
  2. [type|=file] 实际为 [type|=file] ,在表格中无法输入所以改成全角。(有会输入的可以告诉我~)

组合选择器

选择器 例子 例子描述 CSS规范级别
分组 html,body 选择 <html><body > 1
后代 空格 ul li 选择祖先元素为 <ul> 元素的所有 <li> 元素。 1
下级 ul>li 选择父元素为 <ul> 元素的所有 <li> 元素。 2
相邻兄弟 div+div 选择紧接在 <div> 元素之后的 <div> 元素。 2
兄弟 h2~div 选择在 <h2> 元素之后的所有 <div> 元素 3
  1. 后代选择器要注意嵌套问题如 ul{font-size: 1.5em;}
  2. 下级选择器一般用在只希望子元素有,不希望更深层级有。

伪类选择器

选择器 例子 例子描述 CSS规范级别
:link a:link 未被访问的链接 1
:visited a:visited 已被访问的链接 1
:hover a:hover (鼠标悬浮在上面)鼠标正在上面的链接 1
:active a:active 鼠标正在按下的链接 1
:focus input:focus 有焦点的input 2
:first-child div :first-child 代表父元素的第一个子元素 2
:last-child div :last-child 代表父元素的最后一个子元素 3
:nth-child(n) div :nth-child(2n) 代表父元素的中偶数位子元素 3
:empty div:empty 空的 div 3
:target :target 匹配锚点元素 3
:disabled input:disabled 不可用的input 3
:checked :checked 选中的 checkbox、radio、select 3
:not(selector) div:not(:empty) 所有不为空的 div 3
:focus-within form:focus-within 高亮获得焦点的表单 4
  1. a 标签使用伪类时要注意爱恨原则(LoVe/HAte)
  2. :active 也常用来做 tab 选择
  3. :focus 单击、触摸、tab 都可以触发

伪元素选择器

选择器 例子 例子描述 CSS规范级别
::after .icon:after 在标签里面的最后增加一个行内元素 2
::before .icon:before 在标签里面的最前面增加一个行内元素 2
::placeholder input::placeholder 修改文本框的 placeholder 样式 4
  1. 你可能注意到第一列是双冒号第二列是单冒号,放心不是我写错了,规范定义的是单冒号是伪类双冒号是伪元素。但是浏览器厂商大哥不买账,嗯,目前来说单冒号会兼容性更好。
  2. afterbefore 需要 content: '内容',不然会不显示。
  3. placeholder 属于 shadow DOM

上面是一些我们常用,或者说用途比较大的选择器。一些兼容不好,新规范,鸡肋一些的我没写出来。有兴趣可以去 MDN 中看。

差点忘记的权重计算(优先级)

下面列表中,选择器类型的优先级是递增的:

  1. 类型选择器(type selectors)(例如, h1)和 伪元素(pseudo-elements)(例如, ::before)
  2. 类选择器(class selectors) (例如,.example),属性选择器(attributes selectors)(例如,[type="radio"]),伪类(pseudo-classes)(例如, :hover)
  3. ID选择器(例如, #example)

通配选择符(universal selector)(*), 关系选择符(combinators) (+, >, ~, ' ') 和否定伪类(negation pseudo-class)(:not()) 对优先级没有影响。(但是,在 :not()内部声明的选择器是会影响优先级)。

给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式,因此可看作是具有最高的优先级。.

当在一个样式声明中使用一个!important 规则时,此声明将覆盖任何其他声明。虽然技术上!important与优先级无关,但它与它直接相关。

2. CSS常用样式属性

这个就有点多了啊,

数值单位

  1. px 绝对单位,像素,最常用的
  2. em 相对单位,相对于当前对象内文本的font-size的倍数
  3. rem CSS3 相对单位,相对于根元素(即html元素)的font-size的倍数
  4. vw vh CSS3 相对单位,屏幕视口,均分一百份
  5. vmax vmin CSS3 相对单位,屏幕视口,均分一百份,宽高最大、最小值
  6. 0%/0px/0vw 可以省略单位写为 0
  7. 忘了,还有 % ,这个单位留作课后作业吧。

CSS 属性

类型 属性
定位 position / 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 / 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-style / border-right-color / border-bottom / border-bottom-width / border-bottom-style / border-bottom-color / border-left / border-left-width / border-left-style / border-left-color / border-radius / border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius / box-shadow / border-image / border-image-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-size
颜色 color / opacity / <color> / Color Name / HEX / RGB / RGBA / HSL / HSLA / transparent / currentColor
变换 transform-origin / transform-style / perspective / perspective-origin / backface-visibility
过渡 transition / 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

如上就是一些属性,还有一些放出来,感兴趣的可以去查一下。好了,下面我们简单介绍几个常用的

display 属性

  1. none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
  2. inline:指定对象为内联元素。
  3. block:指定对象为块元素。
  4. inline-block:指定对象为内联块元素。(CSS2)
  5. table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)
  6. box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
  7. inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
  8. flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
  9. inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
  10. flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
  11. inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

position 属性

  1. static:常规流。此时4个定位偏移属性不会被应用。
  2. relative:常规流,位置不变,定位偏移属性移动的只是显示效果。
  3. absolute:脱离常规流,偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
  4. fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。(IE、iOS 有兼容问题)
  5. sticky:对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)
  6. center:与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
  7. page:与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

3. CSS3 过渡、变换、动画

上面一节已经列出本节包含的属性了,这节我们讲一讲,具体应用。

transition 过渡

缩写形式 transition:property duration timing-function delay;,下面我们来分开说明一下

属性名 描述 默认值
transition-property 执行过渡动作的属性 all
transition-duration 动作执行时间 0
transition-timing-function 动作执行曲线 ease ease
transition-delay 延迟执行动画的时间 0
    transition: border-color .5s ease-in .1s,
            background-color .5s ease-in .1s,
            color .5s ease-in .1s;

等同于

    transition-property: border-color, background-color, color;
    transition-duration: .5s, .5s, 1s; 
    transition-timing-function: ease-in, ease-in, ease-in; 
    transition-delay: .1s, .1s, .1s;

意思是 border-color 的变化执行 0.5秒,使用 ease-in 曲线执行,等待 0.1秒后开始。
意思是 background-color 的变化执行 0.5秒,使用 ease-in 曲线执行,等待 0.1秒后开始。
意思是 color 的变化执行 1秒,使用 ease-in 曲线执行,等待 0.1秒后开始。

transition-timing-function 说明

这个属性的值比较有意思,可以做一些特别一些的动画。 图片来自MDN:timing-function

cubic-bezier() 定义了一条 立方贝塞尔曲线(cubic Béziercurve)。这些曲线是连续的,一般用于动画的平滑变换,也被称为缓动函数(easing functions)。
一条立方贝塞尔曲线需要四个点来定义,P0 、P1 、P2 和 P3。P0 和 P3是起点和终点,这两个点被作为比例固定在坐标系上,横轴为时间比例,纵轴为完成状态。P0 是 (0, 0),表示初始时间和初始状态。P3 是(1, 1) ,表示终止时间和终止状态。

clipboard.png

变换

transform 非常的灵魂,底层提供了 matrix(),matrix3d() 来操作,封装了 translate 移动、rotate 旋转 、scale 缩放、skew 斜切扭曲。刚才说的是 2D 的,加上 3D 就是 3D变换,如 translate3d()。有一个意外 perspective() 指定透视距离。

transform-origin 默认值:50% 50%。用来设置变换的基准点。

transform-style 默认值:flat ,默认是 2D 空间。设置为 preserve-3d 改成三维空间,元素将会创建局部堆叠上下文。

动画

过渡可以理解为两个关键帧的补间操作。动画就是一连串的关键帧。

  1. animation-name:动画名称,需要 @keyframes 来定义动画

    @keyframes testanimations { 
        from { opacity: 1; } 
        to { opacity: 0; } 
    }
    .testanimations{
        animation: testanimations 1s;
    }
  2. animation-duration:动画的持续时间
  3. animation-timing-function:动画执行曲线
  4. animation-delay:延迟的时间
  5. animation-iteration-count:循环次数。infinite:无限循环。<number>:指定对象动画的具体循环次数。
  6. animation-direction:在循环中是否反向运动

        normal:正常方向(默认值)
        reverse:反方向运行
        alternate:动画先正常运行再反方向运行,并持续交替运行
        alternate-reverse:动画先反运行再正方向运行,并持续交替运行
  7. animation-fill-mode:结束时候的状态

        none:默认值。不设置对象动画之外的状态
        forwards:动画结束时的状态
        backwards:动画开始时的状态
        both:动画结束或开始的状态
  8. animation-play-state:动画暂停、开始状态。running:运动。paused:暂停。

4. CSS3 3D场景搭建与应用

主要应用 perspective ,下面我们将要做一个视差滚动的例子

往期

  1. 前端培训-初级阶段(1 - 4)

后记

2019年3月15日 更新。

昨天下午,主讲人把这一课讲了。这里记录一下主讲人文章主讲人cnblogs。顺便记录一下问题吧,后面再补测试demo。

  1. css选择器权重以及覆盖规则
  2. translate 和 rotate 搭配使用(坐标轴变换问题)
  3. justify-content: space-evenly; 兼容的解决方案
  4. position float transfrom 之后的的层级。
  5. ...................................................早上醒来就忘了还有啥,后面如果有的话再补吧。

最近手里有点活,移动端的拖动排序,网页播放 amr 。后续整理整理代码也发出来。

参考资料

  1. (引用) 培训目录出处-已备份到笔记
  2. MDN
  3. CSS速查
  4. 视差滚动

linong
29.2k 声望9.5k 粉丝

Read-Search-Ask