《CSS网站布局实录》读书笔记
从Web标准、HTML标记、CSS语法基础介绍到实用技巧，事无巨细。实体书已不印刷，只能下载电子版
书的背景：
国内第一本web标准的CSS布局书，2006年9月第一版，作者李超。
环境背景：
当时主流浏览器IE6与Firefox，兼容浏览器IE5/4/Opera/Mozilla，web2.0标准是XHTML1.0，为XML过渡而生，页面编码格式gb2312，使用工具Dreamweaver可视化开发。
基础篇之XHTML:
HTML结构包括头部（head）主体（body）两大部分。头部描述浏览器所需信息如<title>无标题文档</title>，主体包含所要展现的具体内容，如<h1>1级标题</h1><p>文字段落</p>。
以前头部需要申明DTD，告诉浏览器页面解析规则，这里不做赘述啦，现在的页面框架，如下
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hi</h1>
</body>
</html>
HTML基本结构
基础篇之CSS：
- CSS语法组成
- 仅由选择符（Selector）、属性（Property）、值（Value）三部分组成。
- CSS选择符（器）
- 类型选择符 网页标签名作为名称的选择符。如常见的div{属性：值},p{olor:red;},span{..}，现称元素/标签选择器
- 群组选择符 对一组XHTML对象进行相对样式的指派。如h1,h2,p,span{}，现称选择器分组
- 包含选择符 对某个对象的子对象进行指派。如h1 span{}，现称后代选择器
- id及class选择符 对标签进行自定义名称。如<h1 id="title"></h1>，<div class="title"></div>
- 标签指定式选择符 想对标签指定id或class。如h1#content{}h1.title{}
- 组合选择符 无论什么样的选择符均可进行组合使用。如h1 .title{} h1 .title,#content h2{}
- 伪类及伪对象选择符 是一种特殊的类和对象，CSS会自动支持，名称不能被自定义。如a:hover{}
- 通配选择符 代替不确定的内容，使用“*”指所有文件。如*{}，以前用来替换浏览器对一些标签设定的默认样式，现解决方法css reset
现在看这些名称定义挺有趣。
以下是对选择器的补充
- 属性选择器 a[href] {}，对只有某个属性的元素应用样式
- 子元素选择器 h1>strong{}，与后代相比，它只选择某个元素的第一个子元素
- 相邻兄弟选择器 h1+p{}，仅接着另一个元素后的一个元素，邻居
- CSS单位
CSS指定的数值均有两种形式。一种是指定的范围，比如float属性，只能应用left,right,none,inherit四种值；另一种为数值，比如宽width：0~9999px。除了px像素单位外还有其它许多类型单位。
- em（相对字体尺寸）em会继承父级元素的字体大小
- ex（相对字符高度尺寸）
<!DOCTYPE html>
<html>
<head>
<title>11</title>
<meta charset="utf-8" />
<style type="text/css">
html{font-size: 12px;}
.a{font-size: 2em;}
.b{font-size: 2em;}
</style>
</head>
<body>
<div class="a">
字体24px
<div class="b">字体48px</div>
</div>
</body>
</html>
em demo
- pt（点/镑point）
- pc（派卡Pica）
- in（英寸Inch）
- mm
- cm
- rgb（颜色单位红绿蓝）
- #ccc（十六进制颜色单位）
- Color Name（浏览器所支持的颜色名称，red/green/black...）
其中一些没听过~~依旧补充
- rem 主要用于移动端
- % 百分比
- rgba 在rgb的基础上增加Alpha透明通道
- deg 度（css3旋转）
- s 秒（动画执行的时间）
- vw 相对于视口宽度
- vh 相对于视口高度
- 页面关联样式方法
- 行间样式表 <h1 style="font-size:12px;color:red;"></h1>，不推荐使用，最好结构样式相分离
- 内部样式表 头部中加入<style type="text/css"></style>
- 外部样式表 分为两种，link和@import，其中推荐使用link<link rel="stylesheet" href="style.css" />，import在此不做讲解，两者的区别有兴趣请点击
- 样式优先权
CSS中难免存在重复定义以及优先使用规则，样式优先权不可忽视的
顺序：!important > style > id > class > tag
详情请移步我以前收集的资料:《CSS权重》
CSS网页布局与定位：
- 认识div
div是个容器，主要是用来布局和嵌套
- 一列宽度自适应
将固定值改为百分比的形式就行，div默认将占据整行空间即100%的自适应
#layout{
background:#ccc;
width:80%;
height:200px;
}
- 二列宽度自适应
<!DOCTYPE html>
<html>
<head>
<title>css两列右列宽度自适应布局</title>
<style type="text/css">
.left{
width: 300px;
background: yellow;
float: left;
}
.right{
background: gray;
}
</style>
</head>
<body>
<div class="left">
111
</div>
<div class="right">
222
</div>
</body>
</html>
两列自适应
- 三列浮动中间自知应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三列宽度自适应</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html,body{
height: 100%;
}
.left{
width: 300px;
background: yellow;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.right{
background: gray;
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
}
.center{
background: green;
margin: 0 200px 0 300px;
height: 100%;
}
</style>
</head>
<body>
<div class="left">
左列
</div>
<div class="center">
中间
</div>
<div class="right">
右列
</div>
</body>
</html>
三列中间自适应
- 高度自适应
一个高度是否能百分比显示关键在于对象的父级对象
html,body{
height:100%;
}
.content{
width:100px;
height:100%;
background:gray;
}
- 盒模型
W3C对它的定义指CSS布局中的每一个元素，在浏览器的解释中，都被当做盒状物。浏览器对元素的一种理解方式。
注：CSS盒模型的设计当中，它的宽高由width/height/padding（内边距）/margin（外边距）/border（边框）来提供。
CSS内容排版：
- 有意思的文字样式，贴上练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字</title>
<style type="text/css">
html,body{
padding:0;
margin:0;
}
header:first-letter{
float: left;
font-size: 2em;
}
header p:first-line{
font-size: 2em;
}
p.a{
word-spacing:30px;
}
p.b{
word-spacing:-10px;
}
</style>
</head>
<body>
<header>
我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我
<p>YES我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的</p>
</header>
<p class="a">This is some text. This is some text我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的</p>
<p class="b">This is some text. This is some text我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的</p>
</body>
</html>
显示效果
- 不规则的文字环绕（实现方法神奇吧）
可选了解的内容：
书中提到的浏览器兼容与解析问题，可以进行了解或直接查阅最新资料
书中提到常见网站元素设计CSS的解决方案，比如圆角，横向/纵向导航，弹出式菜单等
快速预览及跳过的内容：
CSS可视化开发与调试，主要讲的是DW工具的使用。
小结：
想了解web2.0时代革新内容及它的历史，想全面认识CSS，比如什么是div,span,id,class，文档流的概念，浮动布局，相对与绝对定位布局，有序与无序列表运用，更多的文字样式，水平/垂直居中，css sprite（精灵），网站换肤等及以上种种，可以看看这本书~
《CSS网站布局实录》读书笔记的更多相关文章
- csapp读书笔记-并发编程
这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...
- CSAPP 读书笔记 - 2.31练习题
根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1) 属于第一种情况 sum = x ...
- CSAPP读书笔记--第八章 异常控制流
第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...
- CSAPP 并发编程读书笔记
CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...
- 读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《C#本质论》读书笔记（18）多线程处理
.NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...
- C#温故知新：《C#图解教程》读书笔记系列
一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...
- C#刨根究底：《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Web高级征程：《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
随机推荐
- 服务端套接字类CxServerSocket的使用
服务端套接字类CxServerSocket的使用 这是一个精练的服务端套接字类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣能),个人习惯而已,如有雷同,纯属巧合. CxS ...
- VB的写法，关于版本写入注册表
VB的写法,关于版本写入注册表 '软件都有一个关于我们的菜单,单单实现这个功能并不难,困难的是能够将这些信息写入注册表中,这样每次只要弹出这样的窗口,就从注册表里去搜索.这样是不是极大的节省了资源 ...
- ASP.NET Web API消息处理管道：Self Host下的消息处理管道[下篇]
ASP.NET Web API消息处理管道:Self Host下的消息处理管道[下篇] 我们知道ASP.NET Web API借助于HttpSelfHostServer以Self Host模式寄宿于当 ...
- OpenCV3.0.0+win10 64位+vs2015环境的下载，安装，配置
操作系统:WIN10 pro 64 软件版本:VS2015+OpenCV3.0.0 1. 下载安装 http://opencv.org/ https://www.visualstudio.com/ ...
- Closures in OOC
Closures in OOC 接上一篇Complexity Behind Closure,这次来专注于Rock是如何在C里实现Closure的. 这篇文章同时发布在Github上. Block as ...
- Kendo UI开发教程(6): Kendo DataSource 概述
Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...
- [COM/ATL]组件、对象、MFC、ATL的区别
组件(Component)和对象(Object)之间的区别 先明确组件(Component)和对象(Object)之间的区别.组件是一个可重用的模块,它是由一 组处理过程.数据封装和用户接口组成的业务 ...
- 【C++自我精讲】基础系列四 static
[C++自我精讲]基础系列四 static 0 前言 变量的存储类型:存储类型按变量的生存期划分,分动态存储方式和静态存储方式. 1)动态存储方式的变量,生存期为变量所在的作用域.即程序运行到此变量时 ...
- Windows平台下的node.js安装
Windows平台下的node.js安装 直接去nodejs的官网http://nodejs.org/上下载nodejs安装程序,双击安装就可以了 测试安装是否成功: 在命令行输入 node –v 应 ...
- URL传值问题，不同浏览器对URL的长度要求
通过URL传值的问题,所以对url字符串进行encodeURIComponent对url字符串内容进行编码,问题解决,但是有时候会出现 The request filtering module is ...