前端菜鸟笔记 Day-5 CSS 高级

2019-02-14 admin

文章大纲来源:【Day 5】CSS 高级

  • CSS 选择器
  • CSS 拓展
  • CSS 单位
  • CSS 参考手册

CSS 选择器

内容引用:CSS 选择器

元素选择器

html { ... }

选择器分组

h2, p { ... }

类选择器

.important { ... }
p.warning  { ... }
.important.warning { ... }
/* 选择同时拥有这两个类名的元素 */

ID选择器

#intro { ... }

属性选择器

a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的属性内容 */
p[class~="important"] { ... }
/* 部分匹配的属性内容 */

后代选择器

h1 em { ... }

子元素选择器

h1 > strong { ... }

相邻兄弟选择器

h1 + p { ... }

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

语法是selector : pseudo-class {property: value}

a:link { color: #FF0000 }        /* 未访问的链接 */
a:visited { color: #00FF00 }    /* 已访问的链接 */
a:hover { color: #FF00FF }    /* 鼠标移动到链接上 */
a:active { color: #0000FF }    /* 选定的链接 */
p:first-child { font-weight: bold; }

CSS 拓展

内容引用:CSS 高级

水平对齐

margin-left:auto;
margin-right:auto;
position:absolute;
right:0px;
float:right;

尺寸

  • height:元素高度
  • width:元素宽度
  • line-height:行高
  • max-height:最大高度
  • max-width:最大宽度
  • min-height:最小高度
  • min-width:最小宽度

CSS 单位

内容引用:CSS 单位

相对长度

指定了一个长度相对于另一个长度的属性,对于不同的设备相对长度更适用。

  • em:相对于应用在当前元素的字体尺寸,一般浏览器字体大小默认为16px,则2em == 32px
  • ex:依赖于英文子母小 x 的高度
  • ch:数字 0 的宽度
  • rem:根元素(html)的 font-size
  • vw:viewpoint width,视窗宽度,1vw=视窗宽度的1%
  • vh:viewpoint height,视窗高度,1vh=视窗高度的1%

绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。

绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

  • cm:厘米
  • mm:毫米
  • in:英寸(1in = 96px = 2.54cm)
  • px:像素 (1px = 1/96th of 1in)
  • pt:point,大约1/72英寸; (1pt = 1/72in)
  • pc:pica,大约6pt,1/6英寸; (1pc = 12 pt)

CSS 参考手册

使用时如果有疑问可以随时查看【CSS 参考手册】


个人静态博客:

原文链接:https://segmentfault.com/a/1190000018144941

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53701.html

文章标题:前端菜鸟笔记 Day-5 CSS 高级

相关文章
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
回到顶部