01-移动端开发教程-CSS3新特性

简介: 1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红。对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。 这边课程内容包括: CSS3新特性 新选择器 边框、背景升级、圆角、阴影 新的盒模型 渐变、动画...

1. 移动端开发课程概述

移动互联网的兴起,让移动端的开发迅速蹿红。对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。

这边课程内容包括:

  • CSS3新特性
    • 新选择器
    • 边框、背景升级、圆角、阴影
    • 新的盒模型
    • 渐变、动画、2D3D转换
    • 伸缩布局、多列布局
    • 新单位
    • 在线字体图标
    • 前缀应用、浏览器兼容、渐进增强
    • 媒体查询
  • 移动端适配开发方案
  • 响应式布局开发方案
  • 移动端js、触屏事件
  • zepto.js\bootstrap\iScroll.js\fastclick.js等移动端库
  • 移动端开发调试
  • 移动端完整项目

2. 关于CSS3的学习

2.1 CSS3学习手册

学习CSS3最好的工具就是文档。有文档在手,按照文档多练习一些案例,就能掌握。CSS算是比较容易学习的前端技术了。

在线文档地址:http://www.phpstudy.net/css3/

离线文档下载地址:地址戳

2.2 CSS文档的阅读规则

规则语法 说明
[] 表示全部可选项
|| 表示或者
| 表示多选一
* 代表出现0次或以上。
+ 代表出现1次或以上。
? 代表是可选的,即出现0次或1次。
{A} 代表出现A次。
{A,B} 代表出现 A 次以上 B 次以下,其中B可以省略为 {A,},代表至少出现A次,无上限。
# 代表出现1次以上,以逗号隔开,可以选择后面跟大括号的形式,精确表示重复多少次,如<length>#{1,4}。
! 代表出现产生一个值,即使组内的值都可以省略,但至少有一个值不能呗省略,如[ A? B? C? ]!。

2.3 关于浏览器兼容的前缀

由于历史原因,浏览器在实现最新的CSS3的标准的时候都存在过渡和实验阶段。当然标准也不文档,浏览器厂商在不稳定或者性能不高的实验阶段,各大浏览器都把新增的标准属性的实现添加各自的前缀。比如:-webkit-、-moz- -ms-

学习阶段不需要去做这些重复工作,只需要用第三方的工具自动化处理就行。后面都会学习:

比如:开发工具前缀插件、gulp自动化处理、webpack自动化处理。CSS预处理和后处理的语言都可以实现编译时处理。

3. CSS3新增的选择器

3.1 属性选择器

其特点是通过属性来选择元素,具体有以下5种形式:

语法规则 说明
E[attr] 表示存在attr属性即可
E[attr=val] 表示属性值完全等于val;
E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置;
E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;
E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;

3.2 伪类选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

3.2.1 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类

重点理解通过E来确定元素的父元素。

语法规则 说明
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素;
E:nth-last-child(n) E:nth-child(n) 相似,只是倒着计算;n遵循线性变化,其取值1、2、3、4、... 但是当n<=0时,选取无效。
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)

n可是多种形式:nth-child(2n+0)nth-child(2n+1)nth-child(-1n+3)等;需要满足y=ax+b 注:指E元素的父元素,并对应位置的子元素必须是E

3.2.2 目标伪类

E:target 结合锚点进行使用,处于当前锚点的元素会被选中;

3.2.3 伪元素选择器

语法规则 说明
E::first-letter 文本的第一个单词或字(如中文、日文、韩文等);
E::first-line 文本第一行;
E::selection 可改变选中文本的样式;
E::beforeE::after 是一个行内元素,需要转换成块元素。E:after、E:before在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:afterE:before会被自动识别为E::afterE::before,这样做的目的是用来做兼容处理。E:afterE:before后面的练习中会反复用到,目前只需要有个大致了解

注意:":" 与 "::" 区别在于区分伪类和伪元素。参考文档:before和::before的区别

4. CSS3中新增加的颜色表示方法

颜色表示方法有:颜色名、十六进制表示法、rgb表示法、transparent。

color: red;
background-color: #e0f;
color: rgb(33,88,0); border-top-color: transparent; 

4.1 新增了RGBA模式

RedGreenBlueAlpha即RGBA。

R、G、B 取值范围0~255

其中的A 表示透明度通道,即可以设置颜色值的透明度。0完全透明,1完全不透明。

color: rgba(23,23,23,.7);

4.2 新增了HSLA模式

HueSaturationLightnessAlpha即HSLA

表示 说明
H Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S Saturation(饱和度)。取值为:0.0% - 100.0%
L Lightness(亮度)。取值为:0.0% - 100.0%
A Alpha透明度。取值0~1之间。
color: hlsa(28, 30%, 20%, .4);

关于H的取值可以参考:

 
色调图谱

 

 
色调图

4.3 关于透明度

  • opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
.box {
  opacity: 0.5; /*设置容器的透明度为50%*/
}
  • transparent 不可调节透明度,始终完全透明。RGBA、HSLA可应用于所有使用颜色的地方。

5. 文本增强

5.1 text-shadow文本阴影

  • 语法:

text-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?

  • 说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。
可以设定多组效果,每组参数值以逗号分隔。

  • 取值:

    • none:无阴影
    • <length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
    • <length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
    • <length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
    • <color>:设置对象的阴影的颜色。请参阅颜色值
  • 默认值:none

text-shadow: 0 0 20px red;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00ded; 

各种效果参考:戳这里

5.2 text-overflow

  • 语法:text-overflow:clip | ellipsis

  • 说明:

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

  • 取值:
    • clip:当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
    • ellipsis: 当对象内文本溢出时显示省略标记(...)。
  • 默认值:clip
.box {
  text-overflow: ellipsis;
  /*必须配合overflow:hidden才能有省略号的效果*/
  overflow: hidden;
  width: 50px; height: 50px; border: 1px solid rgba(88,90,20,.3); /* 控制文本不换行 */ white-space: nowrap; } 

6. 增强边框

6.1 边框圆角border-radius

  • 语法:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

  • 取值:

    • <length>:用长度值设置对象的圆角半径长度。不允许负值
    • <percentage>:用百分比设置对象的圆角半径长度。不允许负值
  • 默认值:0

  • 说明:

    • 设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。
    • 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
    • 如果只提供一个,将用于全部的于四个角。
    • 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
    • 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
    • 垂直半径也遵循以上4点。
    • 对应的脚本特性为borderRadius。
 

ulx: up left x radius 上面左侧的水平(x)方向的半径。
uly:up left y radius 上面左侧的垂直(y)方向的半径
lrx: low right x radius
llx: low left x radius
... 依次类崔

以上4个角的边框都可以分别用border-top-left-radiusborder-top-right-radiusborder-bottom-right-radius ,border-bottom-left-radius替代。

案例:

.box {
  border-radius: 100px 25px 50px 50px / 50px 25px; /* 等价于 */ border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px; /* 等价于 */ border-top-left-radius:100px 50px; /*ulx uly*/ border-top-right-radius:25px 25px; /*urx ury*/ border-bottom-right-radius: 50px 50px; /*lrx lry*/ border-bottom-left-radius: 50px 25px; /*llx lly*/ } 

结果:

 

 

6.2 边框阴影 box-shadow

  • 语法:

box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]

  • 取值:

    • none:无阴影
    • <length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
    • <length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
    • <length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
    • <length>④:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
    • <color> :设置对象的阴影的颜色。请参阅颜色值
    • inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
  • 默认值:none

  • 说明:

设置或检索对象阴影。可以设定多组效果,每组参数值以逗号分隔。设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。
可以设置多重边框阴影,实现更好的效果,增强立体感。

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black; box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: inset 5em 1em gold; box-shadow: 0 0 1em gold; box-shadow: inset 0 0 1em gold; 

6.3 边框图片border-image

边框的背景图非常类似盒子的背景图的应用。border-image是边框背景图多个属性的合写,可以一个属性里面设置多个值。

6.3.1 边框背景图border-image-source

设置边框的背景图片,默认为none,可以是url(..)

border-image-source: url(image.jpg);
border-image-source: none; /* 线性渐变当做图片,后面讲线性渐变 */ border-image-source: linear-gradient(to top, red, yellow); 

6.3.2 边框背景图平铺方式border-image-repeat

border-image-repeat是设置边框背景图片平铺的方式。或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。

语法:[ stretch | repeat | round | space ]{1,2}

属性名 说明
stretch 拉伸图片以填充边框,也是默认值。
repeat 平铺图片以填充边框。
round 平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。
space 平铺图像 。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)

实例:

border-image-repeat: repeat;
/* 设置水平:spac  垂直为:round */
border-image-repeat: space round; 

6.3.3 设置背景图裁切border-image-slice

border-image-slice属性会将border-image-source的图片明确的分割为9个区域:四个角,四边以及中心区域。这个将会通过指定的四个内向距离来实现(分别为下图中的top、right、bottom、left)。

语法格式:

border-image-slice: 27;  /*top=right=bottom=left=27px  不带单位*/
border-image-slice: 27 14; /*t=b=27px  l=r=14px*/
border-image-slice: 27 14 20;/*t=27px r=l=14px b=20*/ border-image-slice: 27 14 20 22;/*t=27px r=14 b=20 l=22*/ 
 

图片将会被“切割”成九宫格形式,然后进行设置。如下图

 

 

图片将会被“切割”成九宫格形式,然后进行设置。如下图

 

代码:

<style>
  .box {
    width: 380px;
    height: 380px;
    /* 必须设置border的属性,不然边框背景图的设置就没有效果 */
    border: 30px solid #cf0;
    /*border-image: url(./img/border.png) 27 space;*/
    border-image-source: url(./img/border.png);
    border-image-repeat: round;
    border-image-slice: 27;/*四个方向都是27像素的切割*/
  }
</style>
<div class="box">
  12344
</div>
 
最终结果

6.3.4 边框图片样式合写border-image

语法:border-image: source slice outset repeat;

例如:

border-image: url("/images/border.png") 30 30 repeat; border-image: url("/images/border.png") 30 20 19 repeat round; border-image: url("/images/border.png") 30 10 20 18 space stretch; border-image: url("/images/border.png") 30 repeat; 

6.4 border-image-outset属性定义边框图像可超出边框盒的大小。

border-image-outset属性定义边框图像可超出边框盒的大小。不能为负数,可以分别设置1个值:四个边。两个值:对应上下,左右。三个值:上 、左右、下。四个值:上、右、下、左边框。

/* border-image-outset: sides */
border-image-outset: 30%;

/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;

/* border-image-outset: 顶 水平 底 */ border-image-outset: 30px 30% 45px; /* border-image-outset:顶 右 底 左 */ border-image-outset: 7px 12px 14px 5px; border-image-repeat: inherit; 

7. 新的盒模型

CSS3中可以通过box-sizing来指定盒模型,即可指定为content-boxborder-box,这样我们计算盒子大小的方式就发生了改变。

  • content-box

    默认值,标准盒子模型。 width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

    尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。

  • border-box

    width 和 height 属性包括内容,内边距和边框,但不包括外边距。
    这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。

可以分成两种情况:
1、box-sizing: border-box;=> width = contentWidth + border + padding
2、box-sizing: content-box; => width = contentWidth
兼容性比较好


请关注下一节:

  • 渐变
  • 过渡
  • 2D3D转换
  • CSS3动画
  • 伸缩布局
  • 多列布局
  • web字体

对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

 
微信:Flydragon_malun 

 

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan

目录
相关文章
|
22小时前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
22小时前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
22小时前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
22小时前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
22小时前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
22小时前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
23小时前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。
|
23小时前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
|
前端开发
CSS3新特性回顾
CSS3 介绍 开始实例 新特征简介 强大的CSS选择器 抛弃图片的视觉效果 盒模型变化(多列布局和弹性盒模型) 阴影效果 Web字体和web Font 图标 CSS33过渡与动画交互效果 媒体查询 查看浏览器份额 点我查看 伪类(Pesudo Classes) (1)动态伪类选择器 实例 ...
1356 0
|
22小时前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。