阅读本书主要目的:

自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解。

第1章 CSS和文档

1.1 WEB的衰落(为了表现增加很多标记元素如font等,这些阻碍了页面的结构化)

1.2 CSS作救星(95年W3C发布正在进行的CSS计划)

  CSS特点:丰富的样式;易于使用和维护;可以在多个页面重复使用;方便层叠;缩减文件大小;为将来做准备(为解决HTML结构化而生,实现结构和表现分离)

1.3 元素(文档结构的基础,至少在CSS2.1中,每个元素生成一个框,也成为盒)

  替换元素:用来替换元素内容的部分并未由文档内容直接表示,如img、input等

  非替换元素:大多数都属于非替换元素,内容由用户在元素本身生成的框中显示,如段落、标题、单元格等

  元素显示角色(块级元素:生成一个元素框,它会填充其父元素的内容区;行内元素:在一个文本行内生成元素框,而不会打断这行文本)

  在HTML和XHTML中块级元素不能嵌套在行内元素中,但在CSS中对嵌套没有任何限制

1.4 结合CSS和XHTML(外部、内联、导入、行内)

<link rel="stylesheet" type="text/css" href="sheet.css" media="all" />
<!--link标记(外部样式表),link必须放在head内,rel“关系”(relation),media样式应用的媒体类型(大部分类型不被支持)-->
<style type="text/css">
...
</style><!--style元素(内联样式表)-->
@import url(sheet2.css);
/*@import指令(导入样式表),此指令写在样式文件中或style元素内*/
<p style="...">test</p><!--行内样式表,不推荐,因为不利于内容和表现的分离-->

第2章 选择器

2.1 基本规则

  CSS的核心特性是向文档中的一组元素类型应用某些规则;每个规则由选择器声明块组成

  

2.2 分组

h2,p{ color:green}/*选择器分组:为多个元素应用同一样式*/
/*声明分组:为一个元素应用多个声明*/
h3{color:orange;}
h3{ font-size:18px;}

2.3 类选择器和ID选择器

  多类选择器:通过将多个类选择器连接在一起,仅可选择同时包含这些类的元素(类名顺序不限)

.warning.urgent{background:red;}/*注意中间不含空格:同时包含不限顺序,可以是class="urgent warning"*/

  ID选择器与类选择器类似,但它仅适用一次

2.4 属性选择器

img[alt]{border:solid 1px red;}  /*简单属性选择,选择有此属性的元素,不论属性是何值*/
a[title="w3c"]{color:red;} /*根据具体属性值选择,选择属性值为指定值的元素*/
p[class~="warning"]{color:red;} /*根据部分属性值选择,选择属性值含有指定值的元素*/
*[foo^="bar"]{color:red;}/*选择foo属性以“bar”开头的所有元素*/
*[foo$="bar"]{color:red;}/*选择foo属性以“bar”结尾的所有元素*/
*[foo*="bar"]{color:red;}/*选择foo属性包含“bar”的所有元素*/
*[lang|="en"]{color:red;}/*选择lang属性等于“en”或以“en-”开头的所有元素*/

2.5 使用文档结构

h1 em{color:red;} /*后代选择器*/
h2>strong{color:red;} /*选择子元素,即只选择h2的子元素(而不是后代元素)strong元素*/
h3+p{color:red;} /*选择相邻元素,即选择h3紧接的p元素,且两者有相同父元素*/

2.6 伪类和伪元素

a:link{color:blue;}   /*选择超链接(含有href属性)*/
a:visited{color:purple;} /*已访问状态的超链接*/
a:hover{color:red;} /*鼠标悬停状态的超链接*/
a:active{color:orange;} /*鼠标激活(按下)状态的超链接*/
input:focus{color:green;} /*获取焦点状态的输入框*/
p:first-child{color:red;} /*选择第一个元素,即第一个p元素*/
*:lang( ) /*等价于|=属性选择器*/
a:link:hover{color:red;}/*结合伪类,即合并书写,注意不要把互斥的伪类结合使用*/
p:first-letter{color:red;} /*首字母,只用于标记或段落*/
p:first-line{color:red;} /*首行,只用于标记或段落*/
h2:before{content:" ";}/*之前元素,伪元素特有属性content*/
h2:after{content:" ";} /*之后元素,设置content才能使其置于文档结构中*/

第3章 结构和层叠

3.1 特殊性

/*特殊性值表示为:0,0,0,0(即:行内,ID,类或属性或伪类,元素或伪元素)*/
p+em{color:red;} /*0,0,0,2*/
.warning em{color:red;} /*0,0,1,1*/
ul#menu li.active{color:red;} /*0,1,1,2*/
*{color:black;}/*0,0,0,0,通配符特殊行为0*/
div[id="nav"]{} /*0,0,1,1,ID属性选择区别于ID选择器*/
p.drak{color:#333 !important;} /*重要声明,此规则总会优先*/

3.2 继承(继承没有特殊性,连0都没有,所以通配符的0特殊性>继承的无特殊性)

3.3 层叠(按权重和来源排序,按特殊性排序,按顺序排序(链接伪类顺序LVHA))

第4章 值和单位

4.1 数字

4.2 百分数

4.3 颜色(命名,RGB,十六进制)

/*CSS中定义的17个颜色名*/
aqua(浅绿) fuchsia(紫红) lime(绿黄) olive(橄榄) red    white
black    gray      maroon(褐红) orange    silver yellow
blue    green      navy(深蓝) purple(紫色) teal(青色)

4.4 长度单位

  绝对长度(web几乎不用):英寸(in)、厘米(cm)、毫米(mm)、点(pt)、派卡(pc)

  相对长度:em和ex,像素长度(px),相对根元素rem

4.5 URL

4.6 CSS2单位

  角度值:度(deg)、梯度(grad)和弧度(rad),直角可以声明为90deg=100grad=1.57rad

  时间值:毫秒(ms、秒(s),时间不能为负值

  频率值:赫兹(Hz)、兆赫(MHz)

4.7 其他值

  关键字:none(空值)、inherit(继承)

第5章 字体

5.1 字体系列(font-family)

5.2 字体加粗(font-weight)

5.3 字体大小(font-size)

5.4 风格和变形(font-style和font-variant)

5.5 拉伸和调整字体(font-stretch和font-size-adjust)

5.6 font属性

5.7 字体匹配

  CSS2可以通过@font-face对字体匹配更多控制,可以在文档中下载一个远程字体来使用

@font-face {font-family: DeliciousRoman;src: url('Delicious-Roman.otf');}
/*先引入,再使用*/
p {font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}

第6章 文本属性

6.1 缩进和水平对齐(text-indent和text-align)

6.2 垂直对齐(line-height)

  垂直对齐文本(vertical-align)只应用于行内元素和替换元素,如图像和表单;上标和下标super和sub;

6.3 字间隔和字母间隔(word-spacing和letter-spacing)

6.4 文本转换(text-transform:大小写转换)

6.5 文本装饰(text-decoration)

6.6 文本阴影(text-shadow)

第7章 基本视觉格式化

7.1 基本框

7.2 块级元素(block)

7.3 行内元素(inline)

7.4 改变元素显示(display设置)

  行内块元素(inline-block)

第8章 内边距、边框和外边距

8.1 基本元素框

8.2 外边距(margin)

8.3 边框(border)

8.4 内边距(padding)

第9章 颜色和背景

9.1 颜色

9.2 前景色(color)

9.3 背景(background或background-color、background-images)

第10章 浮动和定位

10.1 浮动(float:left|right|none|inherit)

  清除浮动(clear:left|right|both|none|inherit)

10.2 定位(position:static|relative|absolute|fixed|inherit)

  偏移属性(top|right|bottom|left)

  内容溢出(overflow:visible|hidden|scroll|auto|inherit)

  内容剪裁(clip:ract(top,right,bottom,left)|auto|inherit)

  元素可见性(visibility:visible|hidden|collapse|inherit)

  Z轴上的放置(z-index)

第11章 表布局

11.1 表格式化

  表显示值display:inline-table、table-row(tr)、table-row-group(tbody)、table-header-group(thead)、table-footer-group(tfoot)、table-column(col)、table-column-group(colgroup)、table-cell(th或td)、table-caption

11.2 表单元格边框

  表格边框模型(border-collapse:collapse(合并)|separate(分隔)|inherit)

  边框间隔(border-spacing:<length><length>?|inherit)

11.3 表大小

  宽度:固定布局和自动布局

  高度和对齐

第12章 列表与生成内容

12.1 列表

  列表类型(list-style-type)、列表项图像(list-style-image)、列表项位置(list-style-position)

12.2 生成内容

   使用before和after伪类生成,设置content值;计数器的应用

第13章 用户和界面样式

13.1 系统字体和颜色

13.2 光标(cursor)

13.3 轮廓(outline)

第14章 非屏幕媒体

14.1 设计特定于媒体的样式表

14.2 分页媒体

14.3 声音样式

读书笔记《CSS权威指南》的更多相关文章

  1. csapp读书笔记-并发编程

    这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...

  2. CSAPP 读书笔记 - 2.31练习题

    根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1)  属于第一种情况 sum = x ...

  3. CSAPP读书笔记--第八章 异常控制流

    第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...

  4. CSAPP 并发编程读书笔记

    CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...

  5. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  6. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  7. 《C#本质论》读书笔记(18)多线程处理

    .NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...

  8. C#温故知新:《C#图解教程》读书笔记系列

    一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...

  9. C#刨根究底:《你必须知道的.NET》读书笔记系列

    一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...

  10. Web高级征程:《大型网站技术架构》读书笔记系列

    一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...

随机推荐

  1. Idea在导入有maven项目时,不能自动识别pom.xml

    当在idea中导入maven项目时,不能自动识别pom文件,显示为普通橙色xml文件. 解决方法:点击最右侧侧边栏,点击添加(蓝的的小加号),选择你导入项目的pom.xml文件

  2. 【maven教程】(1)---maven环境配置

    maven环境配置 刚开始学习maven,现在项目需要用到maven,而且他确实很好用,也比较容易上手,我也是主要通过视频学习,在写博客的时候也会总结其它人所写 博客,从简到难,如果你也是初学者那接下 ...

  3. 《极客与团队》【PDF】下载

    <极客与团队>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196337 内容简介 软件开发是一项团队运动,人的因素对结果的影响完全 ...

  4. 添加用户useradd,给用户设置修改密码passwd,修改用户信息usermod,修改用户密码状态chage,删除用户userdel,查询用户及组id,切换用户su,查看当前环境变量env

    useradd 用户名 passwd 用户名,给指定用户设密码 passwd给当前用户设密码 添加一个用户系统会自动在以下文件或目录创建对应用户信息: [root@localhost ~]# grep ...

  5. H5之前端操作文件

    js是否能够操作文件? js在HTML5以前浏览器端是无法操作文件的,但HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载( ...

  6. PHP-无限级分类(迭代法创建)

    $area = array( array('id'=>1,'name'=>'安徽','parent'=>0), array('id'=>2,'name'=>'海淀','p ...

  7. Spring Boot实战之数据库操作

    上篇文章中已经通过一个简单的HelloWorld程序讲解了Spring boot的基本原理和使用.本文主要讲解如何通过spring boot来访问数据库,本文会演示三种方式来访问数据库,第一种是Jdb ...

  8. Android短视频SDK转码实践

    一. 前言 一些涉及的基本概念: 转码:一般指多媒体文件格式的转换,比如分辨率.码率.封装格式等: 解复用(demux):从某种封装中分离出视频track和音频track,然后交给后续模块进行处理: ...

  9. MySQL index 增删改

    一.前提信息 1.数据库版本 mysql> select version(),user(); +------------+----------------+ | version() | user ...

  10. Git 进阶 —— 远程仓库

    一.远程仓库怎么玩 1. 自己搭建一个运行Git的服务器 Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上,但肯定有一台机器有着最原始的版本库,然后别的机器来克隆这个原始版本库,这 ...