新手不知道的,前端关于html5入门学习顺序

现在html5移动端非常的火,很多小伙伴想学习又不知道从哪开端学起,今天就分享一下前html5该怎么入门。

首先还是给大家推荐一个学习氛围很好的裙,我自己的,想要一起学习web前端的可以加裙六一四三一五六五七,有各种资料和开发工具包满足大家,每天更新最新行情

1、css3新增挑选器

结构挑选器:

:nth-child(n) 父元素下的第n个子元素

:nth-child(odd)奇数子元素(同nth-child(2n-1))

:nth-child(even)偶数子元素(同nth-child(2n))

:nth-child(an+b)公式

:nth-last-child(n) 倒数第n个子元素

:nth-of-type(n) 父元素下的第n个指定类型的子元素

:nth-last-of-type 父元素下的数第n个指定类型的子元素

:first-child 挑选父元素下的第一个子元素

:last-child 挑选父元素下的最终一个子元素

:only-child 挑选父元素下仅有的子元素

:only-of-type挑选父元素下指定类型的仅有子元素

:root 挑选文档的根目录,回来html

特点挑选器:

:E[attr] 特点名,不确定详细特点值

:E[attr="value"] 指定特点名,并指定其对应特点值

:E[attr ~="value"] 指定特点名,其具有多个特点值空格离隔,并包含value值

:E[attr ^= "value"] 指定特点名,特点值以value最初

:E[attr $="value"] 指定特点名,特点值以value结束

:E[attr *="value"] 指定了特点名,特点值中包含了value

:E[attr |= "value"] 指定特点名,特点值以value-最初

UI伪类挑选器:

:enabled 挑选启用状态元素

:disabled 挑选禁用状态元素

:checked 挑选被选中的input元素(单选按钮或复选框)

:default 挑选默认元素

:valid、invalid 根据输入验证挑选有用或无效的input元素

:in-range、out-of-range 挑选指定范围之内或者之外受限的元素

:required、optional 根据是否允许

:required特点挑选input元素

动态伪类挑选器:

:link 挑选链接元素

:visited 挑选用户以访问的元素

:hover 鼠标悬停其上的元素

:active 鼠标点击时触发的事件

:focus 当前获取焦点的元素

其他伪类挑选器:

:not() 对括号内挑选器的挑选取反

:lang() 基于lang全局特点的元素

:target url片段标识符指向的元素

:empty挑选内容为空的元素

:selection 鼠标光标挑选元素内容

2、布景

background-size:布景尺度

background:url() 0 0,url() 0 100%;多布景

background-origin 布景区域定位

background-clip 布景绘制区域颜色突变

background-image:linear-gradient()线性突变

background-image:radial-gradient()径向性突变

3、文本特点

color:rgba();

text-overflow:是否运用一个省略标记(...)标明对象内文本的溢出(单行文本溢出、多行文本溢出)

text-align:文本的对齐办法

text-transform:文字的巨细写

text-decoration:文本的装饰线,复合特点

text-shadow:文本暗影

text-fill-color:文字填充颜色

text-stroke:复合特点。设置文字的描边

tab-size:制表符的长度

word-wrap:当前行超过指定容器的鸿沟时是否断开转行

word-break:规定自动换行的处理办法

4、弹性盒模型

box布局设置给父元素特点:

display:box/display:inline-box;

box-orient 界说盒模型的布局方向

box-direction 元素摆放顺序

box-pack 对盒子殷实的空间进行管理

box-align 在笔直方向上对元素的方位进行管理

设置给子元素

box-ordinal-group 设置元素的详细方位

box-flex 界说盒子的弹性空间

flex布局设置给父元素特点:

flex-direction特点决议显现的方向(即项目的摆放方向)

flex-wrapflex-wrap特点界说,如果一行排不下,怎么换行。

flex-flow特点是flex-direction特点和flex-wrap特点的简写形式,默认值为row nowrap。

justify-content特点界说了项目在水平方向的对齐办法。

align-items特点界说项目在竖直方向上怎么对齐。

align-content特点界说了多行的对齐办法。如果项目只在一行,该特点不起作用。

设置给子元素:

order 特点界说项目的摆放顺序。数值越小,摆放越靠前,默以为0。可为负值

flex-grow 特点界说项目的扩大份额,默以为0,即如果存在剩下空间,也不扩大。

flex-shrink 特点界说了项目的缩小份额,默以为1,即如果空间不足,该项目将缩小。

flex-basis 特点界说了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个特点,计算主轴是否有多余空间。它的默认值为auto,即项目的本来巨细。

flex 特点是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个特点可选。

align-self 特点允许单个项目有与其他项目不一样的对齐办法,可掩盖align-items特点。默认值为auto,表明继承父元素的align-items特点,如果没有父元素,则等同于stretch。

5、怪异盒模型(box-sizing)

box-sizing 盒模型解析形式

content-box 规范盒模型(和css2一样的计算) width/height=border+padding+content

border-box 怪异盒模型 width/height与设置的值一样 ,content减小3、2D改换、3D改换

6、盒子暗影、影子

box-shadow 暗影 box-reflect 影子

本文来自企鹅号 - web前端那些事媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【CSS进阶】CSS 颜色体系详解

1825
来自专栏IMWeb前端团队

css3的学习笔记

适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和...

1755
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

3576
来自专栏walterlv - 吕毅的博客

WPF 绘制对齐像素的清晰显示的线条

发布于 2017-12-12 13:49 更新于 2018-08...

811
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

3019
来自专栏生信宝典

AI科研绘图(二):模式图的基本画法

经过上次对基本元素和工具的学习(AI科研绘图(一):零基础入门和基本图形绘制),我们基本上掌握了最常用和基础的工具的用法。

1603
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

Painter采用单例模式 优化原型模式,各Shape采用深拷贝来解决构造较长、繁琐的情况 比较new 对象和拷贝的效率问题,拷贝一点。具体见文:来谈谈Ja...

903
来自专栏Coco的专栏

【CSS进阶】试试酷炫的 3D 视角

902
来自专栏练小习的专栏

制作高大上的Canvas粒子动画

制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): ...

42410
来自专栏HT

HTML5版的String Avoider小游戏

HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心,...

1968

扫码关注云+社区