目录
一.书籍
《Head first HTML&CSS》
《CSS权威指南(第三版)》
《精通CSS》
《图解CSS3:核心技术与案例实践》
《CSS那些事儿》
《Head First HTML and CSS 2nd Edition》
《Head First HTML5》
《Eric Meyer谈CSS》(上下册)
《CSS禅意花园》
《精通CSS:高级Web标准解决方案》
二.学习精髓
1. 重用 和 继承inherit的使用
一个css样式可以重复使用。
在CSS对应的XHTML中,每一级的标签总是首先使用其本身标签的的样式设计,接着使用父级标签的样式,
这样部分代码就可以分别放在各级别中,他们互相发挥作用。统一代码则放在最上一级标签里。
通过继承,减小代码量。
遇到ie和谷歌显示高度不同,先把行高 高都调一致了,从最外框开始,调到对其。再向内调。
.exinclude-secton{
position:absolute;
top:91px;
width:400px;
height:25px;
display: inline;
/*vertical-align: middle;*/
}
.exinclude-secton div{
height:inherit;
}
.exinclude-secton span{
height:inherit;
}
.exinclude-secton input{
display:block!important;
height:25px;
}
.page-mysample .exinclude1,.page-mysample .exinclude2{
margin-left:10px;
/*width:91px;*/
width: 150px;
}
.exinclude1,.exinclude2{
padding: auto;
vertical-align: middle;
}
.exinclude1 div span span{
position:relative;
top:-7px;
/*left:-5px;*/
}
.exinclude2 div span span{
position:relative;
top:-7px;
/*left:-5px;*/
}
height:100%和height:inherit
http://www.zhangxinxu.com/wordpress/2015/02/different-height-100-height-inherit/
需要学习:css响应式宽度
当父元素ul下的li不一样长的时候,把父元素的font-size:0;去掉所有的文本空白产生的间隙,在子元素上设置字体大小。
2.检验网站脚本程序
https://w3c.github.io/developers/tools/#validators
3.清js、css在服务器上的缓存
用户打开界面,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量。
问题:设置的css、js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css、js,
在这些css、js缓存未过期之前,浏览器只会从缓存中读取css和js,
如果你在服务器上修改了css和js,那么这些更改在回头客的浏览器中是不会有变化的,
除非回头客按了Ctrl + F5刷新了网站页面或者手动清空了浏览器的缓存。
一个网站的访客成千上万,回头客也会有不少,不可能在更新css后让每个访客都刷新一下缓存,
那么这个问题你会怎么处理呢
答:更改css文件名,给这css、js文件末尾加上版本号,即css链接中?后面的内容。
其实css文件后面的问号起不到实际作用,仅能当作后缀,
如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。
<link rel="stylesheet" href=“http://www.example.com/style.css?v=2011”/>
可通过后台传递,版本号是当前时间。
后台:request.setAttribute("version", System.currentTimeMillis());
<link rel="stylesheet" href=“http://www.example.com/style.css?v=${version}”/>
4. 笔记
(1). 如果一个div中有3段,想改变第二段的文字颜色。
禅意花园 P39 css2的子元素选择器和兄弟相邻选择器 或 css3中的伪类 这些早期IE都不支持
简写
相邻元素不错,层级菜单中h1下相邻的P的样式。
(2).需要切换展示图片的地方,用css改变background-image可以。或替换img的src
h1中放span 1秒切换一次图片,是不是很炫。
(3).确保没有颜色的情况下,文字和图像都易于理解。
5.注意兼容
比如考虑浏览器 苹果用的Safari 谷歌 360 火狐
三.问题
1.CSS Hack
2.媒体查询
3.面向对象OOP
4.多级标签 内容,是否把p换成h1 h2 h3 更好?