新手不知道的,前端关于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 条评论
登录 后参与评论

相关文章

来自专栏iKcamp

翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 第 7 章: 闭包 vs 对象

原文地址:Functional-Light-JS 原文作者:Kyle Simpson-《You-Dont-Know-JS》作者 第 7 章: 闭包 vs 对象 ...

1767
来自专栏desperate633

LintCode 快乐数题目代码

一个数是不是快乐是这么定义的:对于一个正整数,每一次将该数替换为他每个位置上的数字的平方和,然后重复这个过程直到这个数变为1,或是无限循环但始终变不到1。如果可...

542
来自专栏数据小魔方

左手用R右手Python系列17——CSS表达式与网页解析

上一篇着重讲解了网页解析中的XPath表达式,今天这一篇主要讲解另一套网页解析语法——CSS路径表达式。 R语言与Python中都有支持CSS表达式的解析库,R...

3215
来自专栏九彩拼盘的叨叨叨

用CSS来找出两张图的差异

其中,灰色的部分为相同的部分,并且灰色的部分的颜色值为rgb(127.5, 127.5, 127.5)。

681
来自专栏胖胖的专栏

使用 trie 树实现简单的中文分词

导语:工作中偶尔遇到需要对中文进行分词的情况,不要求非常高的精确度和语境符合度,仅是为了统计某些词出现的热度。本文提供了一种简单易行的中文分词方法。 工作中,偶...

4975
来自专栏计算机视觉与深度学习基础

本次新生赛部分题解

A poj1129 这题的愿意是考察四色原理(不是太难,主要是了解),但是模拟+暴力枚举也是可以过的,有几个WA点,注意看注释 #include<cstdio>...

1855
来自专栏美团技术团队

函数式编程在Redux/React中的应用

本文简述了软件复杂度问题及应对策略:抽象和组合;展示了抽象和组合在函数式编程中的应用;并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实...

3359
来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

20210
来自专栏数据库

用SQL高性能解决字符串的连续匹配

高性能解决有序集合的连续匹配问题 场景: A集合有8个元素:ali、boy、c、dog、e、f、g、h, B集合有5个元素:boy、c、dog、e、h 问B中...

1849
来自专栏HTML5学堂

原生JS | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):在上周当中,我们用jQuery实现了 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项 - 的特效,今天我们来讲讲原生JS的实现方...

3598

扫描关注云+社区