大而全的CSS3 API类型书,并带有一些实用案例讲解,层次分明分类明确,新增技术都做了详情介绍。个人觉得如果在细节和文字表达上再下些功夫会更出色,其中部分内容如:rem、Media Queries网上资料更全。读本书之前,事先在些渠道学过CSS3,故花了2天左右,近300页的篇幅。剩下的就是写案例(完全理解和消化变成自己的)和Blog总结了~

1)比较实用的属性、伪类选择器,其它没有记录的可在使用时直接查API
[attr] 只使用属性名,没有属性值
[attr=“value”] 属性名加值
[title~=flower] 选择 title 属性包含单词 "flower" 的所有元素   注:字符
a[src^="https”] 选择其 src 属性值以 "https" 开头的每个 <a> 元素  注:字符
a[src$=".pdf”] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素 注:字符
a[src*="abc”] 选择其 src 属性中包含 "abc" 子串的所有 <a> 元素 注:字符
[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素 注:必须是单词或者后面跟着连字符en-
:before 元素之前插入一些内容
:after 元素之后
:root 将样式绑定到页面根元素中
:not 排除结构下的子元素
:empty :target
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child 匹配父元素的第N个子元素,会将父元素一起计算 nth-child(4n+1) 4n循环中包括几种样式,1指定样式在循环中的位置
:nth-last-child 从最后一个元素开始匹配
:nth-of-type 匹配父元素的第N个子元素
:nth-last-of-type 从最后一个元素开始
:only-child 父元素的唯一一下子元素
17种UI元素状态伪类选择器:hover,:active,:focus,:enabled(可用状态),:disabled(不可用状态),:read-only(只读,配合readonly属性一起使用),read-write(可编辑):checked,:default,:indeterminate,::selection(元素被选中时的样式),:invalid(不能通过一些属性的检查时),:valid,:required,:optional,:in-range(输入的值在有效范围内),:out-of-range

2)使用选择器在页面中插入指定内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>content</title>
<style type="text/css">
h1:before{
content:'1'
}
h2:after{
content:url(http://images.cnblogs.com/cnblogs_com/chenlily/853011/o_thumb_IMG_1654_1024.jpg);
}
img:after{
content:attr(alt);
display: block;
}
h3:before{
content:counter(counter,upper-alpha)'.';
}
h3{
counter-increment: counter;
}
h4:before{
content:'第'counter(mycounter)'天';
}
h4{
counter-increment: mycounter;
counter-reset: subcounter;
}
h5:before{
content:'第'counter(subcounter)'天';
}
h5{
counter-increment: subcounter;
margin-left: 40px;
}
p:before{
content: open-quote;
}
p:after{
content: close-quote;
}
p{
quotes: "(" ")";
}
</style>
</head>
<body>
<!-- 选择器的content属性可插入文字 -->
<h1>冬季的大五台</h1>
<!-- 图片 -->
<h2>风雪兼程</h2>
<!-- 属性名content:attr(alt),只有Opera10浏览器支持 -->
<!-- <img src="http://images.cnblogs.com/cnblogs_com/chenlily/853011/o_thumb_IMG_1986_1024.jpg" alt="大五台" /> -->
<!-- 项目编号,指定编号种类和样式-->
<h3>行程:</h3>
<!-- 编号中追加文字 -->
<h4>东台到北台</h4>
<!-- 编号嵌套和追回文字一样 -->
<h5>大风</h5>
<!-- counter-reset: subcounter将二级编号进行重置 -->
<h4>北台-中台-西台</h4>
<h5>一群女汉子</h5>
<!-- 字符两边嵌套文字符号,如果是双引号需加转义字符\ -->
<p>致谢</p>
</body>
</html>

3)文字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>给文字添加阴影</title>
<style type="text/css">
p{
text-shadow:5px 5px 5px gray; /*阴影*/
text-shadow:-5px 5px 5px gray; /*位移*/
text-shadow:5px 5px 25px gray; /*模糊*/
text-shadow:5px 5px gray; /*实体*/
text-shadow:5px 5px 5px; /*默认颜色黑色*/
text-shadow:5px 5px 5px gray,
40px 30px 5px red,
70px 65px 5px blue; /*多个阴影*/
}
</style>
</head>
<body>
<p>Hello,我是梨子</p>
</body>
</html>

文字换行word-break:normal(浏览器默认,遇到标点符号时会与它前面的一个字一起换行) keep-all(只能在半角空格或连字符处换行) breadk-all(允许单词内换行);word-wrap:break-word让长单词与URL地址自动换行
使用服务器端字体@font-face{font-family:;src:;}
text-overflow:ellipsis;white-space:nowrap;overflow:hidden;多出的文字省略,文字不换行

4)盒阴影box-shadow:0 0 gray;inset设置为内阴影box-shadow:inset 0 0 5px 5px gray;

5)背影和边框background-clip背景的显示范围,background-origin背景图像的起点,背景尺寸及背景平铺space、round选项,多个背影图用逗号隔开,渐变背景色background:linear-gradient(),放射性渐变background-img:radial-gradient(),border-image指定边框背景repeat平铺、stretch拉伸,outline-offset轮廓线向外距离

6)CSS3变形处理transform
旋转、缩放、倾斜、移动

7)CSS3中的动画功能transition、animation

8)布局相关样式

9)CSS3Filter(滤镜)属性
提供了模糊和改变元素颜色等功能,常用于调整图像的渲染、背景或边框显示效果。DOME

最后希望自己能学以致用吧

《HTML5与CSS3权威指南》读书笔记(下册)—CSS3篇的更多相关文章

  1. HTTP权威指南读书笔记

    HTTP权威指南笔记 读书有两种境界,第一种境界是将书读薄,另一种是读厚.本篇文章就是HTTP权威指南的读书笔记,算是读书的第一重境界,将厚书读薄.文章对HTTP的一些关键概念做了比较详细的概述,通读 ...

  2. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

  3. 经典的性能优化最佳实践 web性能权威指南 读书笔记

    web性能权威指南 page 203 经典的性能优化最佳实践 无论什么网络,也不管所用网络协议是什么版本,所有应用都应该致力于消除或减 少不必要的网络延迟,将需要传输的数据压缩至最少.这两条标准是经典 ...

  4. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  5. html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  6. Hadoop权威指南读书笔记

    本书中提到的Hadoop项目简述 Common:一组分布式文件系统和通用I/O的组件与接口(序列化.javaRPC和持久化数据结构). Avro:一种支持高效.跨语言的RPC以及永久存储数据的序列化系 ...

  7. JS权威指南读书笔记(七)

    第十七章 事件处理 1 客户端JS程序采用了异步事件驱动编程模型. 2 关于事件的重要定义     a 事件类型(event type)     b 事件目标(event target) target ...

  8. JS权威指南读书笔记(六)

    第十五章 脚本化文档   1 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 2 文档节点的部分层次结构 Text和CDATASection都是characterData的子 ...

  9. JavaScript权威指南读书笔记

    JavaScript 1.变量 变量是一个表示值的符号,是一个名字,他的本质是值: var x; //----声明一个变量: 值通过等号“=”赋给变量,x = 16; 对象是名/值对的集合,或字符串到 ...

  10. Java性能优化权威指南-读书笔记(五)-JVM性能调优-吞吐量

    吞吐量是指,应用程序的TPS: 每秒多少次事务,QPS: 每秒多少次查询等性能指标. 吞吐量调优就是减少垃圾收集器消耗的CPU周期数,从而将更多的CPU周期用于执行应用程序. CMS吞吐调优 CMS包 ...

随机推荐

  1. 【DOS】这个命令太牛逼了

    删除一个程序了后 竟然上不了网了 运行下列命令重启后就可以了 实在是救了我系统一命 命令如下: netsh winsock reset

  2. 简单实现android和wp聊天

    使用Beetle.NetPackage简单实现android和wp聊天 Beetle.NetPackage是一个多台平开源Client TCP通讯组件,它针对不同平台提供统一的消息描述规则和使用规范可 ...

  3. myeclipse maven编译出错

    从.net 到java  快一年了.这一年学了很多东西.从开发角度来说俩个语言查不到.部署上差异较大.不过java处理问题上确实不太统一.好多问题在网上没有正确的回答.刚换台式机发现 mvn inst ...

  4. 编程实战——电影管理器之界面UI及动画切换

    编程实战——电影管理器之界面UI及动画切换 在前文“编程实战——电影管理器之利用MediaInfo获取高清视频文件的相关信息”中提到电影管理器的目的是方便播放影片,在想看影片时不需要在茫茫的文件夹下找 ...

  5. Klockwork告警常见错误

    下面列举的是Klockwork告警中常见的告警形式,这些情况在编译阶段都不会报出来语法上的错误,并且在运行阶段执行到的概率很小.但是在某些场景下一旦执行到了这些语句, 很可能引起进程的跑飞和挂起.   ...

  6. hive 不同用户 权限设置 出错处理

    今天安装了hive 在a账号安装的,一切正常 但是到其他账户下,报错 >show tables; Error in metadata: java.lang.RuntimeException: U ...

  7. linux 网络编程:客户端与服务器通过TCP协议相互通信 + UDP

    1.TCP编程的客户端一般步骤: 1.创建一个socket,用函数socket(): 2.设置socket属性,用函数setsockopt():* 可选: 3.绑定IP地址.端口等信息到socket上 ...

  8. 【Servlet3.0新特性】第03节_文件上传

    这是一个Web Project 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web- ...

  9. 理解git分支-远程分支

    远程分支 远程引用是对远程仓库的引用(指针),包括分支.标签等等. 你可以通过 git ls-remote (remote)来显式地获得远程引用的完整列表,或者通过 git remote show ( ...

  10. CSS控制文本在一行内显示,若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;