前言：

我买了一本《图解CSS3核心技术与案例实战》大漠写的，为了提高自己的自觉性呢，抓紧看书，把读书笔记放在这上面，跟大家一起分享，也为督促自己完成读书计划。

文末有微信公众号，感谢你的扫一扫关注···

第1章  揭开CSS3的面纱

渐进增强：开发方式、Web设计理念

网站是否需要在每个浏览器看起来一样？

首先保持最核心的功能能实现，让低端浏览器看到站点内容，然后考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持，带来用户体验。

优雅降级：先考虑低端设备用户能否看到所有内容，然后在此基础之上为高端用户进行设计，不仅为高端设备用户提供一个完美的应用，也要求为不同性能级别设备的用户设计不用级别的不那么完美的应用。

1、  强大的CSS3选择器

2、  抛弃图片的视觉效果

3、  背景的变革

4、  盒模型变化

5、  阴影效果

6、  多列布局和弹性盒模型布局

7、  Web字体和Web Font图标

8、  颜色和透明度

9、  圆角和边框的新法

1、盒模型的变形

2、CSS3过渡和动画交互效果

3、媒体特性和Responsive布局

背景渐变、圆角、文本框发光、阴影

第2章  CSS3选择器

选择器分类

1、  基本选择器

2、  层次选择器

3、  伪类选择器

1、  动态伪类选择器

2、  目标伪类选择器

3、  语言伪类选择器

4、  UI元素状态伪类选择器

5、  结构伪类选择器

6、  否定伪类选择器

4、  伪元素

5、  属性选择器

清除浮动经典方法

<style>

.clearfix:after , . clearfix:before{  display:table;content:””  }

.clearfix:after{  clear:both;overflow:hidden  }

</style>

<ul class=’clearfix demo’>

         <li></li>

<li></li>

</ul>

class=’clearfix demo’

多类选择器，通过>=2的类选择器组合，来定义

层次选择器

E F 后代选择器 匹配F被包含在E元素内

E>F 子选择器 匹配的F是E元素的子元素

E+F 相邻兄弟选择器 匹配的F紧邻E元素后

E~F 通用选择器 匹配的所有F位于E元素后

伪类选择器

1、  动态伪类选择器

:link :visited :hover :active :focus

2、  目标伪类选择器

E :target F 选取链接的目标元素，提供样式

手风琴效果、高亮显示脚注、tabs效果、幻灯片效果、灯箱效果、相册效果

(有一些使用js效果更佳)

3、  语言伪类选择器

多语言版本网站，不同字体风格

1、  HTML5

<!DOCTYPE HTML>

<html lang=’en-US’>

2、< html lang=’fr’>

英文版本

:lang(en)｛quotes:’ ” ’  ‘ ” ’;｝

:lang(en)  q ｛background:red;｝

法文版本

:lang(fr)｛quotes:’ << ’  ‘ >> ’;｝

:lang(fr)  q ｛background:green;｝

4、  UI元素状态伪类选择器

a)         E:checked 选中状态

b)        E:enabled 启用状态

c)         E:disabled 不可用状态

5、  结构伪类选择器

a)         E:first-child 等同 E:nth-child(1)  父元素的第一个子元素

b)        E:last-child 等同 E:nth-last-child(1)  父元素的最后一个子元素

c)         E:root 匹配元素E所在文档的根元素html

d)        E F:nth-child(n) 选择父元素E的第n个子元素F

n=1、2、3  even odd 或者公式（2n+1、-n+5）

e)         E F:nth-last-child(n) 选择父元素E的倒数的第n个子元素F

f)          E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素

g)         E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素

h)        E:first-of-type 选择父元素内具有指定类型的第一个E元素 等同E:nth-of-type(1)

i)           E:last-of-type 选择父元素内具有指定类型的倒数一个E 等同E:nth-last-of-type(1)

j)          E: only-child 选择父元素只包含一个子元素，且子元素匹配E

k)         E: only-of-type 选择父元素只包含一个同类型子元素，且子元素匹配E

l)           E: empty 选择没有子元素的元素，且元素不含文本节点

6、否定伪类选择器

E:not(F) 匹配所有除元素F以外的E元素

.gallery:hover li:not(:hover)｛｝

伪元素

::first-letter{} 下沉字母或者首字母

::first-line{} 匹配第一行文字

::before{} ::after{}

不是指存在于标记内的内容

而是可以插入额外内容的位置，不会成为DOM部分

设置页面上所有外部链接之后的括号中附加他们指向的URL

a[href^=http]::after{

content=” (“ attr(href) ”) ”;

}

用于链接添加icon效果

@font-face

::selection 匹配突出选中文本 background && color

属性选择器

E[attr] 选择匹配具有属性attr的E元素，E也可以省略，表示定义了attr属性的任意类型

E[attr=val]

E[attr|=val]  匹配val、val开头

E[attr~=val]  字符串、单词匹配

E[attr*=val]  val在实际val的截取之内

E[attr^=val]  匹配val开头

E[attr$=val]  匹配val结尾

^匹配起始符 $匹配终止符 *匹配任意字符

分享一下我的微信公众号，分享摄影与编程，谢谢大家的关注

图解CSS3核心技术与案例实战（1）的更多相关文章

  1. [已读]图解CSS3核心技术与案例实战

    买的时候犹豫了好久,也征询了下几个前端朋友.我一直蛮怕买华章的书,好在这本内容很不错,买得值了. 大漠的css功底很深厚,这本书也很厚= =,读完之后对css圆角以及background-origin ...

  2. 《图解 CSS3 核心技术与案例实战》

    第一章 解开 CSS3 的面纱 使用 CSS3 的好处 减少开发和维护成本:如传统实现圆角边框需要绘图.切图才能完成,而使用 css 可以直接完成 提高页面性能 渐进增强(Progressive En ...

  3. 《图解CSS3：核心技术与案例实战》

    <图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...

  4. 《图解Spark：核心技术与案例实战》作者经验谈

    1,看您有维护博客,还利用业余时间著书,在技术输出.自我提升以及本职工作的时间利用上您有没有什么心得和大家分享?(也可以包含一些您写书的小故事.)回答:在工作之余能够写博客.著书主要对技术的坚持和热爱 ...

  5. 《图解Spark：核心技术与案例实战》介绍及书附资源

    本书中所使用到的测试数据.代码和安装包放在百度盘提供 下载 ,地址为https://pan.baidu.com/s/1o8ydtKA 密码:imaa 另外在百度盘提供本书附录  下载 ,地址为http ...

  6. webpack4入门到进阶案例实战课程

    愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...

  7. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  8. 写多个物件css3循环动画案例原理

    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...

  9. 极客技术专题【008期】：CSS3核心技术：选择器

    日期:2013-8-19  来源:GBin1.com 技术专题介绍 技术专题:CSS3核心技术:选择器 专题演讲稿:CSS3选择器 分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 ...

随机推荐

  1. Ireport5.0.1 从java后台接收list集合

    作为ireport新手,开始使用时总有很多问题,说一下今天解决的一个问题,就是怎样从java后台接收list集合并显示出列表. 1.首先要在主dataset中的Paramerters 中创建参数lis ...

  2. ibatis .net $与#的区别

    $与#的区别 SELECT * FROM TABLE WHERE Id = #id# 其中如果字段id为字符串类型,那么#id#表示的就是'id',也就是说会自动加引号.如果id为整型,那么#id#就 ...

  3. 二、初始化superset

    上一步成功安装了superset, 1.初始化数据 创建命令 #创建管理员账号fabmanager create-admin --app superset#cd到superset 根目录参考路径 C: ...

  4. 论文学习笔记--无缺陷样本产品表面缺陷检测 A Surface Defect Detection Method Based on Positive Samples

    文章下载地址:A Surface Defect Detection Method Based on Positive Samples 第一部分  论文中文翻译 摘要:基于机器视觉的表面缺陷检测和分类可 ...

  5. Linux input系统数据上报流程【转】

    转自:https://segmentfault.com/a/1190000017255939 作为鸡生蛋系列文章,这里主要关注Linux input系统,主要为触摸事件上报流程. 读该文章最好有对li ...

  6. mac配置go使用gopm下载第三方包

    打开zshrc文件 vim ~/.zshrc 输入变量 export GOPATH="/Users/chennan/go" #这个自定义 export GOBIN=$GOPATH/ ...

  7. 【easy】198. House Robber 123总结……

    题目一: 一个极其简单的动态规划. class Solution { public: int rob(vector<int>& nums) { ; // 表示没有选择当前house ...

  8. springboo+nginx测试负载均衡

    1:之前只是用nginx调用了boot_8044这一个服务,这次新建一个boot_8055服务,并在linux上启动: 两个boot我都是放在 /myprojects 目录下的(自定义,能启动就行) ...

  9. SVG初尝试(二)

    基本图形 rect(矩形).circle.ellipse(椭圆).line(直线).polyline(折线).polygon(多边形).path(可以绘制任意图形) rect x,y定义矩形坐标,矩形 ...

  10. servlet九大内置对象和监听器

    对象名称 类型 描述 作用域 request javax.servlet.ServletRequest 表示一次用户请求 Request response javax.servlet.SrvletRe ...