CSS学习记录

目录

一.书籍

二.学习精髓

1. 重用 和 继承inherit的使用 

2.检验网站脚本程序

3.清js、css在服务器上的缓存

4. 笔记

5.注意兼容 

三.问题

---

一.书籍

《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 更好？