《css设计指南》 读书笔记 一
2016-01-18 20:27
495 查看
《css设计指南》这本书是一个大神同学介绍给我的,据说覆盖了几乎所有前端面试的有关css的知识点,所以赶紧买来看看。( ps:这本书貌似绝版了,可以上淘宝买复印本,也可直接看电子书。 )
闭合标签,自闭合标签。 html5中,将忽略所有自闭合标签最后的 / 。可是建议在最后仍然加上 空格加/ 以规范格式。
所有img标签都需要加上alt属性。 ps:视障用户使用的屏幕阅读器会读出图片的alt属性。
行内、块级标签。 块级: h1~h6, p, ol/ul, li, blockquote 。 行内: a, img, em, strong, abbr。
在html的编辑器中一个tab等于4个空格,虽然tab方便,但是用4个空格比较好。
css选择器: 大致分3种。 上下文选择器、id和类选择器、属性选择器。
上下文选择器又分为: 普通上下文选择器(p a{....})和特殊上下文选择器( > , + , ~ , * )
什么时候用id什么时候用class。 当一个元素是页面里独一无二的元素的时候,用id( 因为id只能用一个 ),当然这个独一无二的id的元素一定要有较大的作用。 class是用来标识一组具有相同特征的元素,毕竟叫 类 。
书上有一段话我感觉必须得强调一下,它是这么讲的: 要避免Web开发专家Jeffrey Zeldman说的“类泛滥——标记中的麻疹”出现。什么意思呢?就是说你不要像使用ID一样,每个类都指定一个不同的类名,然后再为每个类编写规则。如果你确实有这种随意使用类的习惯,那说明你可能像大多数对CSS充满激情的初学者一样,还不了解继承和上下文选择符的作用。于是,你可能会给每个标签都重复写同样的样式(比如为页面中很多标签分别指定相同的字体)。实际上,继承和上下文选择符能让不同的标签共享样式,从而降低你需要编写和维护的CSS量。
伪类: :link :hover :visited :active :focus :target :first-child/:last-child :nth-child(n是数字,也可以是odd/even奇偶)
伪元素: ::first-letter(首字符) ::first-line(首行) ::before/::after
一个冒号(
!important 用于增加css样式的权重。 缺点:很有可能会让用户的个人设定不起作用,即后续的任何该css的不同值加在上面的都不起作用。
这里也就选择了书中的前两章的重点,并没有非常详尽,如果要看详细一些可以看pdf版。网上很好找,如果没有也可以问我要,邮箱neuscx@163.com
闭合标签,自闭合标签。 html5中,将忽略所有自闭合标签最后的 / 。可是建议在最后仍然加上 空格加/ 以规范格式。
所有img标签都需要加上alt属性。 ps:视障用户使用的屏幕阅读器会读出图片的alt属性。
行内、块级标签。 块级: h1~h6, p, ol/ul, li, blockquote 。 行内: a, img, em, strong, abbr。
<!-- 这里是html5网页模板 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <!-- 这里是网页 --> </body> </html>
在html的编辑器中一个tab等于4个空格,虽然tab方便,但是用4个空格比较好。
css选择器: 大致分3种。 上下文选择器、id和类选择器、属性选择器。
上下文选择器又分为: 普通上下文选择器(p a{....})和特殊上下文选择器( > , + , ~ , * )
什么时候用id什么时候用class。 当一个元素是页面里独一无二的元素的时候,用id( 因为id只能用一个 ),当然这个独一无二的id的元素一定要有较大的作用。 class是用来标识一组具有相同特征的元素,毕竟叫 类 。
书上有一段话我感觉必须得强调一下,它是这么讲的: 要避免Web开发专家Jeffrey Zeldman说的“类泛滥——标记中的麻疹”出现。什么意思呢?就是说你不要像使用ID一样,每个类都指定一个不同的类名,然后再为每个类编写规则。如果你确实有这种随意使用类的习惯,那说明你可能像大多数对CSS充满激情的初学者一样,还不了解继承和上下文选择符的作用。于是,你可能会给每个标签都重复写同样的样式(比如为页面中很多标签分别指定相同的字体)。实际上,继承和上下文选择符能让不同的标签共享样式,从而降低你需要编写和维护的CSS量。
伪类: :link :hover :visited :active :focus :target :first-child/:last-child :nth-child(n是数字,也可以是odd/even奇偶)
伪元素: ::first-letter(首字符) ::first-line(首行) ::before/::after
一个冒号(
:)表示伪类,两个冒号(
::)表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号,但希望你能习惯于用双冒号代替单冒号,因为这些伪元素最终可能都会被淘汰掉。更多相关信息,可以参见这里:http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-elements。
浏览器最基本的层叠css样式顺序 1. 浏览器默认样式 2. 用户样式表 3. 作者链接样式表 4. 作者嵌入样式 5. 作者行内样式
!important 用于增加css样式的权重。 缺点:很有可能会让用户的个人设定不起作用,即后续的任何该css的不同值加在上面的都不起作用。
这里也就选择了书中的前两章的重点,并没有非常详尽,如果要看详细一些可以看pdf版。网上很好找,如果没有也可以问我要,邮箱neuscx@163.com
相关文章推荐
- css-ie6下实现最小,最大宽度
- css-div下内容垂直居中
- CSS3 最小内容尺寸(min-content size)和最大内容尺寸(max-content size)简介
- CSS练习02
- W3School-CSS 分类 (Classification) 实例
- css 常用样式命名规则
- css选择器
- CSS3动画基本的转换和过渡
- css三种样式引入方法,html链接,html中<table>的使用方法
- 纯CSS控制背景图片100%自适应填充布局
- CSS3.0盒模型display:-webkit-box;的使用
- css3 中transition监听事件
- css3 动画中display none
- input输入框的各种样式 文本框为下划线 text输入框样式
- css渐变按钮等
- 全动态Portlet点击后选中样式
- 全动态Portlet点击后选中样式
- css命名规范总结
- 用CSS3来添加项目编号
- [转]css讲解 font-weight:bold和bolder区别