前言：

我买了一本《图解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. git体验

    (1)git初始化配置#配置用户名git config --global user.name "azcode"#配置邮箱git config --global user.email ...

  2. AIC与BIC

    首先看几个问题 1.实现参数的稀疏有什么好处? 一个好处是可以简化模型.避免过拟合.因为一个模型中真正重要的参数可能并不多,如果考虑所有的参数作用,会引发过拟合.并且参数少了模型的解释能力会变强. 2 ...

  3. Web项目容器集成ActiveMQ & SpringBoot整合ActiveMQ

    集成tomcat就是随项目启动而启动tomcat,最简单的方法就是监听器监听容器创建之后以Broker的方式启动ActiveMQ. 1.web项目中Broker启动的方式进行集成 在这里采用Liste ...

  4. xPath Helper插件

    xPath Helper插件 xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的xPath,程序员就再也不需要通过搜索html源代 ...

  5. 二， 字符串和编码之 python 格式化

    1),在Python中,采用的格式化方式和C语言是一致的,用%实现,看下例: >>> 'Hello, %s' % 'world' 'Hello, world' >>> ...

  6. springboot 中页面跳转问题：window.location.href

    我的一个HTML页面 点击注册 本该到注册页面,但是却一直跳到同目录的一个Error.html文件夹下 该页面: 删掉Error.html还不行:会报错,而且改变window.location.hre ...

  7. Nodejs安装（npm、cnpm、webpack）

    1.nodejs官网对应下载(我的电脑对应的是64位的).https://nodejs.org/en/download/ 2.下载之后开始安装: 点击next按钮 点击next 点击next,进入下边 ...

  8. java异常，异常处理，异常类 关键字：throws 和 throw 自定义的异常类

    package cn.kecheng; import java.util.Scanner; /**异常:异常是指在程序的运行过程中所发生的不正常的情况,它会中断正在运行的程序 异常处理机制:java中 ...

  9. Lesson 2-4（字典）

    2.7 字典 &.字典是许多值的集合,索引可以使用许多不同的数据类型,不只是整数,可以是数.字符串或元组. &.字典的索引被称为“键”,键及其关联的值称为“键-值”对,这种键-值对也称 ...

  10. kali linux 网络配置

    /etc/init.d/networking restart service newworking restart ifdown eth0 ifup eth0 ifconfig down eth0 i ...