从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网站布局实录》读书笔记的更多相关文章

  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. IS动态左侧菜单-01

    <%@ Page Language="C#" CodeFile="Default3.aspx.cs" Inherits="Default3&qu ...

  2. php5.3.*编译出现make: *** [ext/gd/libgd/gd_compat.lo] Error 1 解决方法

     升级系统,把php5.2.9升级到5.3.6,按照以前的编译参数,configure能正常通过,但是在make的时候提示: In file included from /root/php-5.3.6 ...

  3. 传统的MVC模式

    对于MVC模式,我们可以将可视化UI呈现,UI处理逻辑和业务逻辑分别定义在View,Controller,和Model中. 可视化UI呈现->View UI处理逻辑->Controller ...

  4. Linux编程之给你的程序开后门

    这里说的"后门"并不是教你做坏事,而是让你做好事,搭建自己的调试工具更好地进行调试开发.我们都知道,当程序发生异常错误时,我们需要定位到错误,有时我们还想,我们在不修改程序的前提下 ...

  5. SmoOne——开源免费的企业移动OA应用,基于VS.Net

    一.SmoOne是什么一个开源的移动OA应用 二.语言.Net 三.开发环境Visual Studio 四.开发平台Smobiler Designer 五.功能该应用开源代码中包含注册.登录.用户信息 ...

  6. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

  7. 用C++实现的元胞自动机

    我是一个C++初学者,控制台实现了一个元胞自动机. 代码如下: //"生命游戏"V1.0 //李国良于2017年1月1日编写完成 #include <iostream> ...

  8. Windows server 2008 r2上安装MySQL

    用MSI安装包安装 根据自己的操作系统下载对应的32位或64位安装包.按如下步骤操作: MySQL数据库官网的下载地址http://dev.mysql.com/downloads/mysql,第一步: ...

  9. [Angular Directive] Implement Structural Directive Data Binding with Context in Angular

    Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...

  10. 【.NET-EF】Entity Framework学习笔记2 - 增删改(没查询)

    学习描述:用EF就像是省略了做实体类和DAL类,感觉是很方便,废话不多说,直接写步骤: 1.创建EF的edmx文件 这个其实在笔记1已说过,不过有些细节也要说,所以再说一遍,这里使用的是EF 6.1版 ...