霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

都是细节 CSS中单位px、em的区别

摘要

px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因为有一部法律来约束他们—例如美国的Section508,强制网站达到一定的易用性。

在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因为有一部法律来约束他们—例如美国的Section508,强制网站达到一定的易用性。

...

H5如何布局?这个才是入门篇

H5布局如何下手?

所谓H5布局,说简单点,就是用H5特有的新标签(语义化)来替代传统布局方式。几点注意如下:

1)css写法不变,比如你定义标签,那css里就要这样写header{}。另外,H5标签也是可以加class或id的,css写法没啥区别,比如,.样式名{} #样式名{};

2)移动端网站H5标签(包括css3)是支持的,放心大胆去弄,不要去考虑狗屁的兼容。如果是单纯PC网站,建议传统div方式布局比较合适;

...

CSS ::first-line 伪元素,匹配一个段落的第一行的样式

::first-line -- CSS ::first-line伪元素,匹配一个段落第一行的样式

语法:E::first-line

CSS版本:CSS1

说明:

匹配一个段落的第一行的样式

first-line,中文"第一行"的意思

可以应用在::first-line中的属性包括:font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height

...

霍者给大家的十个CSS“不要” 请牢记!

根据我多年作为网页设计师使用CSS的经验,下面是我的十个“不要”。

1.不要滥用类

在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问DOM元素的方法。

2.不要把一切都扔进一个CSS文件中

分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件;当然项目小的可以不用在意

...

CSS那么多属性,而且每个属性都有多个值该怎么记?

历史

混沌未分天地乱,CSS的诞生就是为了终结当时由推动Web世界繁荣的首功之臣HTML引发的混乱局面。在1990~1993年Web世界还处于一片荒芜的时候,HTML这个勤劳而艰难生存的族群带着描述段落、标题、超链接等结构性内容(后来这些成员荣升HTML国的贵族,经过几次战乱并一直生活到现在)的技能给Web世界带来了生机。而后 Mosaic(早期的一款浏览器)的出现让文字和图片可以一起显示出来,也一夜之间让Web威名远扬,这里充满魔力与神奇。无数的站点冒了出来,无数的站点吸引无数的人,无数的人带来无数的新功能,我要字体能变色,我要字体能加粗,各种样式要求不断增加。HTML为了满足人们不断膨胀的欲望和要求努力扩充技能树,最后弄得自己苦不堪言,一大堆描述样式的标签(现在还有的<i><em>等)搞得开发乱七八糟。

...

H5是什么?

打个比方,如果有个人跟你说:“我要做个网站,H5的”。

那TA是想让你用header、footer、nav、section等标签?

让你用Geolocation、localStorage、Web Worker等API?

都不是,TA们想要的功能你用HTML4就都能做出来了。

更别说还得兼容老IE浏览器呢。

所以年轻人,你们要用心理解客户的需求,不要沉迷于技术。

人家一定不是让你去用一种不被所有浏览器兼容的技术。

所以,H5指的不是HTML5,而是某种在微信等移动端看上去酷炫能够提升公司格调顺便亮瞎访问者氪金狗眼顿升膜拜之心就算没有内容也能被广泛转发分享的一种东西。

...

霍者戏说HTML5

如果有非技术人员问你,HTML5是什么,你会怎么回答?

你可以回答:新的HTML规范...

给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能...)

  1. 给浏览器暴露了许多新的接口...

  2. 加了很多新的效果...

问的人其实并不明白他想问的真正问题,回答的人貌似明白,但又好像少了点什么。牛逼的能力新的接口炫酷的效果,首先回答的人自己就是晕晕乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript,大部分的网页设计师每天都在用这些,但很少会有人去思考一下他们之间的关系。

...