前言：

我买了一本《图解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. 配置rpm包安装的jdk环境变量

    最近在搭建james邮件服务的时候,由于这个服务是用Java开发的,之前这台服务器跑过tomcat服务,故有Java环境,就没在意有无配置环境变量,但在启动james的时候报没有配置环境变量: 那么问 ...

  2. [Reinforcement Learning] Cross-entropy Method

    Cross-entropy Method(简称CEM)虽然是一种基于交叉熵的算法,但并不是我们熟知的监督学习中的交叉熵方法,与其说它是一种基于交叉熵的算法,倒不如说是一种基于蒙特卡洛和进化策略的算法. ...

  3. Python——安居客租房信息爬取（以南昌为例）

    前言: 提前安装好所需要的库. 本代码的输入仅需要某个城市的租房地址首页即可,其他自会生成. 使用前请创建所需的目录,或者为代码添加os.makedir() 支持断点重爬,重行运行即可. header ...

  4. Linux学习之用户身份与文件权限

    Linux学习之用户身份与文件权限 1 用户身份及能力 Linux系统的管理员之所以是root,并不是因为其名叫root,而是该用户身份号码数值(UID)为0. 管理员UID为0:系统的管理员用户 系 ...

  5. ccf 201503-5 最小花费 这题交上去只有10分嗨！求大佬的题解啊

    问题描述 C国共有n个城市.有n-1条双向道路,每条道路连接两个城市,任意两个城市之间能互相到达.小R来到C国旅行,他共规划了m条旅行的路线,第i条旅行路线的起点是si,终点是ti.在旅行过程中,小R ...

  6. table-tree 表格树、树形数据处理、数据转树形数据

    前言 公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用. 用出来只用表格没有树,研究半天没研究个所以然,只能从新找个 npm里找到一个:vue-table-with-tree-g ...

  7. 记一次解决netty半包问题的经历

    最近学习了netty,想写一个简单的rpc,结果发现发送消息时遇到难题了,网上搜了一下,这种情况是半包问题和粘包问题,主要是出现在并发高一些的时候. talk is cheap 客户端编码: prot ...

  8. CMDB项目开发

    CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧 ...

  9. [系统集成] RT（Request Tracker）执行自定义脚本及发送微信、短信的实现方法

    RT(Request Tracker)是一个基于 Perl 语言的开源状态跟踪和工作流系统,支持审批.权限管理等功能,中文化支持的也不错,可以作为企业的流程审批系统使用.可惜的是,该系统在国内使用的不 ...

  10. 019_UT、IT、ST、UAT

    软件开发中的完成测试环境所包括的环节包括:UT.IT.ST.UAT UT = Unit Test 单元测试 IT = System Integration Test 集成测试 ST = System ...