第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及其各自的使用方法,最后中袋说明了CSS的继承与层叠特性,以及它们的作用. 1.1 HTML与XHTML HTML与XHTML是一种语言的不同阶段,类似于文言文和白话文的关系.因为它们也常被写作为(X)HTML.XHTML是HTML的“严谨版”. 1.1.2 DOCTYPE(文档类型)的含义与选择 “…

第五章 文字与图像 5.1.2 设置字体 通过font-family属性设置字体.可以声明多种字体,字体之间用逗号分隔开.如一些字体名称中间有空格,需用双引号将其引起来,使浏览器知道这是一种字体的名称. p{ font-family:Arial,"Times New Roman";} 5.1.3 文字大小 通过font-size属性来控制文字大小. 1. 长度单位px.表示在浏览器上1个像素的大小.px是相对单位,也就是相对于1个像素的比例.因为不同访问者的显示器的分辨率不同,而且每个…

第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素就可以并排了. CSS中的float属性,默认为none.就是标准流通常的情况. 如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸张,而是根据盒子里…

第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“标准流”的概念. 3.1 盒子的内部结构 padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法.这些矩形对象被统称为”盒子“,英文为”Box“. 模型 就是对某种事物的本质特性的抽象. 在CSS中,一个独立的盒子模型由content(内容).border(边框).…

LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要理解这些框架,高效使用这些框架,甚至最后实现自己的框架,必须要了解结构化CSS设计思想. 我不是前端专家,但是我想,是否一定要等成为了专家才能布道?那是不是太晚了. 所以我是作为一个CSS的学习者,给其他CSS学习者分享一下结构化CSS设计的学习心得. 我更多的是一个后端开发者,后端开发的成熟思想必…

前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践.这个列表请参考 Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html 同时,他们还发布了一个相应的测试工具Yslow http://developer.…

你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面的那条线路称为线路1,下面的称为线路2. 思路1 先判断线路1的第一个节点的下级节点是否是线路2的第一个节点,如果不是,再判断是不是线路2的第二个,如果也不是,判断是不是第三个节点,一直到最后一个.如果第一轮没找到,再按以上思路处理线路一的第二个节点,第三个,第四个... 找到为止.时间复杂度n2,…

本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己自学的,记得当时自己对 CSS 基本上什么都不懂,甚至连怎么在 CSS 中选择某个 class 和 id 都不懂,然后就直接下载一些源码来看,后来看到这些 CSS 文件中有 . 和 # ,然后就连蒙带猜的学会了怎么使用它们,然后就在源码中看到什么不懂的就直接上 W3School 中查找 API,这样也慢慢的让…

原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构.使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成. 1.1 元素盒子的属性 1.边框(border):可…

原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效果.然而,这个属性也成为了创建多栏布局最简单的方式. 1.文本绕排图片 在浮动一张图片或其他元素时,你是在要求浏览器把它往上方推,直到它碰到父元素的内边界.后面的段落不再认为浮动元素在文档流中位于它的前面了,因为它会占据父元素左上角的位置.不过,它…