zoukankan      html  css  js  c++  java
  • 《CSS3使用指南》读书笔记

    一、CSS3的来龙去脉

    1.CSS3的新特性:

      1)不依赖图片的视觉效果

      2)盒容器变形

      3)独一无二的字体

      4)强大的选择器

      5)过渡与动画

      6)媒体信息查询

      7)多列布局

    2.CSS标准发布分5个阶段,所有特性的目前所处阶段可以在这里查看:www.w3.org/Style/CSS/current-work,一般处于第3阶段时,我们就可以使用它了

    3.CSS3对你的网站到底意义几何,是由你的项目和用户所决定的,而不是根据浏览器的份额来。应该支持IE6,但不应该花很多精力在上面

    4.渐进增强:在你编写Web页面时,首先让它们在基础的浏览器和设备上正常工作,且展现得当,然后再辅以更高级但非必要的CSS和JS等增强功能,来为当前和未来的浏览器提供更好的支持(当用户浏览器升级的时候可以自动发挥功用)

    5.本书推荐通过给html标签加class名的方式,来兼容老版本的浏览器(P85)

    6.试试浏览器设计(http://www.jianshu.com/p/2b43083f2e2f)

    PS.摘录一句话:一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满

    二、气泡对话框

    1.利用边框做出三角形和气泡小尾巴

    2.利用RGBA或HSLA做出半透明效果

    三、纸质笔记

    1.用background-size来调节背景图大小(测试地址:http://w3school.com.cn/tiy/c.asp?f=css_background-size&p=7)

    2.单一容器上可以使用复合背景图片

    3.使用边框图片(http://border-image.com/)

    4.嵌入字体

    四、属性选择器

    1.属性选择区列表(P227)

    2.可以根据a标签的href属性的后缀来分别设置属性选择器,来给链接前面添加不同的图标。还可以根据href的内容来筛选。

    3.也可以直接使用类似jquery这种JS库来实现属性选择(避免兼容性问题)

    4.拍立得照片效果(P301)

    五、使用伪类来提高效率

    1.结构伪类(基于DOM),用一个冒号表示(P310)

    2.伪元素(非DOM),用两个冒号表示

    3.动态高亮显示页面的区域:锚点(target)、更改聚焦区块的背景色

    4.last-child选择指定元素

    5.用CSS实现计数器、数字图标

    6.css动画实现渐变效果(需要浏览器支持)

    六、不同的屏幕尺寸,不同的设计 

    1.媒体查询,可以用来适配各种尺寸的设备

    2.页面过宽的时候,横向导航栏,可以变成纵向的

    3.文章过长的时候(不便于阅读),可以使用多列文本展示

    4.设备宽度与显示宽度的区别:打个比方,iphone 5s的显示宽度是980PX,当它旋转时,显示宽度始终不变;而它的设备宽度是320X568,当它横屏时,device-width就是568。

    5.可以通过<meta name="viewport" content="width=device-width,user-scalable=1" />这句,将显示宽度设成设备宽度,这样移动显示起来会更清楚

    6.meta标签的viewport属性是apple公司发明且还未成为标准,但是非iphone之外的很多手机浏览器也支持它

    七、布局秀

    1.弹性布局模型:需要一个额外的包裹容器(div)

    2.新元素—盒子模型:display: box;

    3.控制子元素自动缩放:box-flex: 1;

    4.控制排序:box-direction: reverse、box-ordinal-group:1

    5.控制盒子的布局位置:box-align:stretch[center]

    6.控制盒子的布局位置2(水平布局的元素水平居中):box-pack:center

    7.弹性布局由于目前还未成熟,不适合整个页面使用,但是一些特性,可以根据“渐进增强”的理念,在局部应用。比如导航条居中(参见第6条)、底部区域粘附效果,之类的比较好用。(但是如果是为特定环境创建应用的话,还是可以玩出很多简单又强大的效果的)

    8.还有其它很多未实现的布局和属性(有些和bootstrap的框架理念相同?比如网络布局),请关注它们,向着更有效率的方向发展。

  • 相关阅读:
    【bzoj题解】2186 莎拉公主的困惑
    【算法学习】整体二分
    【算法学习】【洛谷】cdq分治 & P3810 三维偏序
    【比赛游记】NOIP2017游记
    【0】如何在电脑中使用多个python版本【python虚拟环境配置】
    Mysql 安装服务无法启动解决方案与使用的一般使用指令
    4-urllib库添加代理,添加请求头格式 模板
    3-urllib的post请求方式
    02-urllib库的get请求方式
    01-urllib库添加headers的一般方法
  • 原文地址:https://www.cnblogs.com/xujanus/p/5018871.html
Copyright © 2011-2022 走看看