html5与css3 及 精通css细读



## HTML5中新增27个元素,废弃16个元素-----------------------------------------------------------
1.HTML并不是用来写页面样式的,而是用来表示一个网页的基本架构的,样式用CSS来实现。
  HTML5除了提出很多的新效果的标签,但是更重要的是加强了语义化结构标签,其中这个time就是其中之一。
  【结构性元素】、【块级性元素】、【行内语义性元素】、【交互性元素】


  * figure元素:一段独立的流内容 ---------------还有很多其他的新标签
    <figure>
    <figcaption>标题</figcaption>
    <p>内容。。</p>
    </figure>


  * video元素和audio元素:
    <video src="#"></video>   <audio src="#"></audio>


  * mark元素:高亮显示文字


  * embed元素:<embed src="#" type="video/audio">


  * time元素:<time>2017.3.6</time>


  * canvas元素:仅仅提供一块画布,使用js操作绘图API


  * wbr元素:表示软换行


2.【全局属性】:对大多数常用元素都可以使用的属性
  * 【contentEditable属性】:允许用户在线编辑元素中的内容。


  * designMode属性:用来指定这个页面是否可编辑。


  * hidden属性:告诉浏览器不渲染此元素


  * 【spellcheck属性】:针对input和textarea两个文本输入框提供一个文本内容的拼写和语法检查。


  * 【tabindex属性】:tab键获取焦点的顺序。


  其他扩展功能
  * 【Selectors API】:querySelector()和querySelectorAll(),使用和css选择规则一样来获取对象,但是不会随文档动态变化。


  * 【window.JSON对象】:json数据相关对象


  * js 日志和调试


3.canvas画布:开发跨平台动画和游戏的标准解决方案。(交互性元素)
4.html5的多媒体应用:主要是video和audio。(交互性元素)
5.客户端的存储方式:cookie、web Storage(sessionStorage、localStorage)、web Database 三种方式。(在客户端存储方面的扩展)
6.离线应用:利用ApplicationCache接口解决了缓存问题,离线存储应用文件。(在无网络状态下的扩展)
7.Workers对象的多线程处理:运行大型、复杂的js脚本时候容易出现假死现象。(在大型复杂脚本方面的扩展)
8.Geolocation地理位置:新增的地理位置应用程序接口。(在移动端方面的扩展)


## css3中的一些新特性 ------------------------------------------------------
 1.可伸缩盒子模型
  * display:flex; 代表容器是一个可伸缩容器,还可以inline-flex。块布局和行内块布局的升级版。
  * flex-direction(弹性布局的主轴方向)
  * justify-content:主轴方向内容对齐方式。
    align-items:侧轴方向上的整体内容对齐方式。


  * flex-wrap(流动布局的侧轴方向),即换不换行或列
  * align-content:多个主轴沿侧轴方向的内容堆栈对齐方式。
  * order:内部元素的排序
  * align-self:给各个可伸缩项设置自己的在侧轴上的对齐方式。




## 精通css书细读 --------------------------------------------------------------
1.为元素的id和类命名:避免【多类症】
  * 应该根据它们是什么来命名,而不是根据它们的外观如何命名。
  * css的统一命名约定:完全小写加上连字符分隔。如:andy-budd 
  * 【组件化】的命名类,组件内的部分通过层叠来识别。


2.div和span,div实际代表部分(division):避免【多div症】
  * 根据条目的意义或功能来使用div进行分组
  * span可以用来进行行内元素进行分组或标识


3.【浏览器的模式】:标准模式(根据规范呈现页面)和混杂模式(向后兼容的模式)


4.层叠和特殊性
  * 为了让用户有更多的控制能力,可以通过将任何规则指定为!important来提高它的重要度,让它优于任何规则,甚至优于作者加上!important标志的规则。
  * 然后再根据选择器的【特殊性】决定规则的次序,划分4个等级。比如同一个标签的id可以覆盖类。如果两个规则的特殊性相同,那么后定义的规则优先。例如:a标签的几个伪类的顺序。
  * 【继承】的样式是最没有特殊性的


5.组织和维护样式表
  * 尽量使用单一css文件,也可多个。样式表内导入另一样式表:@import url(/css/color.css)
  * 设计代码的结构:1.一般性样式:主体样式、reset样式、链接、标题、其他元素
            2.辅助样式:表单、通知和错误、一致的条目
            3.页面结构:标题、页脚和导航、布局、其他页面结构元素
            4.页面组件
            5.覆盖
  * 自我提示:大型项目中很容易忘记一些常用参数,临时注释可以起到提示作用
        比如:@colordef、@todo、@buggix、@workaround等等
  * 样式指南:多个团队维护网站样式时还需要制作样式指南。更实用的是将用到的样式组合在一起,实现【模式组合】


6.【盒模型】
  * 【外边距叠加】:只有普通文档流中块框的垂直外边距才会产生外边距叠加。
  * 【块级元素和行级元素】:块级元素产生【块框】、行级元素产生【行框】和【行内框】,改变行内框只能通过改变行高或者水平边框、水平内边距或水平外边距。
  * 三种定位机制:普通流、浮动和绝对定位
          1.相对定位被看做是普通流的一部分,绝对定位与普通流无关。普通流恒定在0层
          2.绝对定位相对于最近的已定位的祖先进行定位。
          3.z-index属性目前只有在position:relative、position:absolute和position:fixed参与的情况下才有作用,表示层级。一般规定使用0.8(默认尽管不允许这个值),1,2,3,这样已经够用了。
          4.浮动:不属于普通文本流,也不占据空间。
          5.但是浮动会让旁边的行框被缩短,从而给浮动元素留出空间,因此行框围绕浮动框。
           【清理】想要包含浮动元素,可以增加一个空元素div使用clear:<left,right,both,none>


## 技巧点
技巧1:背景图像效果:可以产生许多有趣的效果
  * 可以使用多个图片作为背景
  * 【圆角框】:border-redius属性
     图片边框:border-image属性
  * 【投影】:box-shadow属性,文字投影:text-shadow
  * 还有透明度、视差效果


技巧2:链接的应用样式
  * a:link、a:visited 和 a:hover,a:focus,a:active的样式不一样对网站访问最好
  * 最简单的方式:1.下划线的无和有,字体加粗显示为链接  2.虚线和实线,但是字体不加粗  3.底部添加细长图片,造成动画特效
  * 为链接目标添加样式::target伪类
  * 突显不同类型的链接:1.使用[att^=val]属性选择器来寻找http:开头的所有链接:[attr^='http:'],[attr^='mailto']
                        2.使用上面的属性选择器来寻找.pdf,.doc结尾的所有链接:[attr$='.doc ']
    所有的技术都有助于改进用户在站点上的浏览体验。通过提醒用户注意离站链接或可下载的文档,让他们明确地了解在单击链接时会发生的情况,避免不必要的回溯操作和烦恼。

  * css Sprites:【css精灵】,可以将多个小图片放在一张大图上,用来减少请求次数,优化访问体验。不高于200KB的单张图片的所需载入时间基本是差不多的



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值