《HTML5与CSS3权威指南》读书笔记（下册）

大而全的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篇的更多相关文章

HTTP权威指南读书笔记
HTTP权威指南笔记读书有两种境界,第一种境界是将书读薄,另一种是读厚.本篇文章就是HTTP权威指南的读书笔记,算是读书的第一重境界,将厚书读薄.文章对HTTP的一些关键概念做了比较详细的概述,通读 ...
css权威指南读书笔记
今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...
经典的性能优化最佳实践 web性能权威指南读书笔记
web性能权威指南 page 203 经典的性能优化最佳实践无论什么网络,也不管所用网络协议是什么版本,所有应用都应该致力于消除或减少不必要的网络延迟,将需要传输的数据压缩至最少.这两条标准是经典 ...
css权威指南读书笔记-第10章浮动和定位
这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素一个元素浮 ...
html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
Hadoop权威指南读书笔记
本书中提到的Hadoop项目简述 Common:一组分布式文件系统和通用I/O的组件与接口(序列化.javaRPC和持久化数据结构). Avro:一种支持高效.跨语言的RPC以及永久存储数据的序列化系 ...
JS权威指南读书笔记（七）
第十七章事件处理 1 客户端JS程序采用了异步事件驱动编程模型. 2 关于事件的重要定义 a 事件类型(event type) b 事件目标(event target) target ...
JS权威指南读书笔记（六）
第十五章脚本化文档 1 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 2 文档节点的部分层次结构 Text和CDATASection都是characterData的子 ...
JavaScript权威指南读书笔记
JavaScript 1.变量变量是一个表示值的符号,是一个名字,他的本质是值: var x; //----声明一个变量: 值通过等号“=”赋给变量,x = 16; 对象是名/值对的集合,或字符串到 ...
Java性能优化权威指南-读书笔记（五）-JVM性能调优-吞吐量
吞吐量是指,应用程序的TPS: 每秒多少次事务,QPS: 每秒多少次查询等性能指标. 吞吐量调优就是减少垃圾收集器消耗的CPU周期数,从而将更多的CPU周期用于执行应用程序. CMS吞吐调优 CMS包 ...

随机推荐

T-SQL的10个好习惯
有关T-SQL的10个好习惯 1.在生产环境中不要出现Select * 这一点我想大家已经是比较熟知了,这样的错误相信会犯的人不会太多.但我这里还是要说一下. 不使用Select *的原因主要不是坊间 ...
初始化IoC容器（Spring源码阅读）
初始化IoC容器(Spring源码阅读) 我们到底能走多远系列(31) 扯淡: 有个问题一直想问:各位你们的工资剩下来会怎么处理?已婚的,我知道工资永远都是不够的.未婚的你们,你们是怎么分配工资的? ...
hdu 1728 搜索求最少的转向次数
逃离迷宫 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
Servlet部署描述文件（web.xml）
最近看了下配置文件(Deployment Descriptor:简称DD),又称部署描述文件,下面详细介绍下该文件的组成和作用: 一.<web-app>有四个属性: 1.xmlns:申明了 ...
2013Esri全球用户大会之互操作和标准
1:Esri在开源领域做过哪些工作? Esri一直以来就是开源技术的用户和支持者.我们相信,通过提供从上到下的开放平台可使我们的用户成为开发能力强大的解决方案的积极参与者.在现有技术形势下,我们正在将 ...
Android零点一度的区别——Matrix
2013-07-07 导语:Matrix是android中对图像绘制的处理(旋转.放缩.平移等等),貌似书本翻页就是用这种方式处理的正文: 1.基于坐标(px,py)旋转degrees度, post ...
android JNI--- 搭建环境(1)
搭建好我们的ndk开发环境,这部分网上资料一大堆,拿来主义~~~~ 工欲善其事必先利其器 , 下面介绍下 Eclipse SDK NDK Cygwin CDT 集成开发环境的搭建. 1.Android ...
C++11多线程std::thread的简单使用
在cocos2dx 2.0时代,我们使用的是pthread库,是一套用户级线程库,被广泛地使用在跨平台应用上.但在cocos2dx 3.0中并未发现有pthread的支持文件,原来c++11中已经拥有 ...
python数据类型以及模块的含义
print(sys.path) #打印环境变量 print(sys.argv) #打印相对路径 print(sys.argv[1]) #打印对应的参数 1.在python最上有时候会导入os模块,表示 ...
MVC源码分析 - Controller创建和创建扩展
上一篇, 出现了一个至关重要的类:MvcHandler, 接下来就来看一下MvcHandler吧. 先不看具体方法, 先看一下类里面的情况. //这里实现了两个重要的接口, 异步处理和同步处理的接口p ...

《HTML5与CSS3权威指南》读书笔记（下册）—CSS3篇

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

随机推荐

热门专题