《Web标准设计》读书笔记

2012-05-30 22:39 臭小子1983 阅读(240) 评论(0) 编辑收藏举报

第一章 Web标准

一、CSS的作用

网页 = 结构 + 表现 + ？

N个网页就是 N*网页 = N*结构 + N*表现 + N*?

二、CSS布局 vs 表格布局

css布局与表格布局哪种更优：

css布局可以很简单实现网站换肤，css布局可以让网页一边载入一边显示，css布局可以让网页变得更小

三、常见标签

a 为标签 title为属性前端开发为值

四、标题标签

1、<title>：页面标题

2、<h>系列：h1至h6，<h1>为最顶级标题，<h2>为副标题，<h3>为sidebar（侧边栏）的栏目使用

3、<caption>：表格的简要描述

4、<legend>：表单的<fieldset>标题，

五、内容标签

1、<p>：表示用来区分段落 <p>aabbcc</p>

2、<br>：换行.

3、<strong>、<em>：强调某一内容，strong重点强调

4、<ins>、<del>：del删除内容简介

5、<q>、<cite>：引用一句话的话可以使用<q>

六、列表标签

1、<ul>：无序列表

2、<ol>：有序列表

3、<dl>：自定义列表

<dl>
　　<dt>标题</dt
　　<dd>内容</dd
　　<dd>内容</dd
</dl>

七、表单

1、<form>：申明表单，定义采集数据的范围，<form>和</form>面包含

2、<fieldset>、<legend>：fieldset对表单进行分组，legend它的标题

<fieldset>
    <legend>个人爱好</legend>
    <input type="checkbox" name="link" /><label>
</fieldset>

八、块元素与内联元素

1、block块元素的特点：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。

例如：<div>, <p>, <h1>, <form>, <ul> 和 <li>......

2、inline内联元素的特点：和其他元素都在一行上；高，行高及顶和底边距不可改变; 宽度就是它的文字或图片的宽度，不可改变。

例如：<span>, <a>, <label>, <input>, <img>, <strong> 和<em>......

块元素与内联元素的嵌套规则：块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只是包含其他的内联元素。

九、div与span的差别

div为块元素，span为内联元素

第二章 CSS-网页美容师

一、基本结构

　　选择符合｛属性：属性值｝

　　　h1 { color : #00ff00 }

二、样式表中的注释

　　/* 注释内容 */

三、选择符的使用

1、通配选择符：*：匹配任意元素， *{ color: red }

2、类型选择符：E { }：匹配任意元素 a { dispaly:block }

3、包含选择符：E F ｛｝：包含选择符，也叫派生选择符和后代选择器 p strong { color:blue; }

4、子对象选择符：E > F {}：匹配E父元素下面的F元素 body > p { color:red }

5、相邻选择符：

　　E + F {}：匹配同辈元素相邻的元素 h1 + p { color :red }

四、属性选择符的使用

1、匹配属性：E[attr]：匹配指定的元素下的属性;　　h2[title]｛color:red ｝匹配h2下有title属性的

2、匹配属性值：

　　E[attr=value]：匹配E元素下具有attr属性且值等于value;　　input[type=passwrod]{ background:#ccc; }

　　E[attr!=value]：匹配E元素下具有attr属性且值不等于value;　　input[type=passwrod]{ background:#ccc; }

　　E[attr~=value]：匹配具有attr属性且属性值是用空格分隔列表; span[title~=csser]{ font-weight:blod } <span title="haha csser"></span>

　　E[attr|=value]：匹配具有attr属性且属性值是用连字符（-）分隔;　　span[title|=csser]{ font-weight:blod } <span title="csser-haha"></span>

3、类选择符：E.className：匹配E元素下带有className;　　p.first{ color:red }

4、ID选择符：#ID： #first{ color:red; }

5、选择符分组：selector,selector { }：把多个相同定义选择符合并起来 body,ul { padding:0; }

五、伪元素与伪类

伪类：

1、:first-child：匹配在同一父亲元素下指定元素的第一个

.tab li:first-child { background:#CCC; }

<ul class="tab">
<li>aaaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

2、链接伪类：:link：表示没有访问过的链接　　:hover：鼠标移上去的状态　　 :active：表示鼠标点击按下的状态　　 :focus：表示得到焦点的状态

3、语言伪类：:lang

伪对象

1、:first-letter：对象的第一个字符的样式表属性

　　p:first-letter{float:left; font-size:2.5em; color:red; }

2、:first-line：对象的第一行样式

　　p:first-line{ color:red }

3、:befor和:after：在元素之前和元素之后配合content属性添加内容

　　strong:before { content:"我来自CSS"}

　　strong:after { content:"我也是来自CSS"}

　　返回：我来自CSS哈哈我也是来自CSS

六、常用单位

1、长度单位

相对长度单位：px，em，ex，px，%等;

绝对长度单位：pt，mm，in，cm，pc等;

1em指一个字体高，默认情况下大多数浏览器字体高都是16px，1em=16px，12px = 0.75em， 10px = 0.625em

换行 12/16 = 0.75em 10/16 = 0.625em;

2、百分比单位

　　百分比总是相对于另一个值来说的，百分比是用父亲作参照物，例如一个元素为50%，父元素为1000，那么他就为500;

3、颜色单位

　　rgb： p｛ color:rgb(red，grren，blue) ｝

　　十六进制：p{ color:#000fff }

七、应用在css在网页上

1、链入外部样式表：<link rel="stylesheet" href="afox.css" type="text/css" media="all" title="Afox" />
　　rel：用于定义连接的文件和HTML文档之间的关系

　　href：属性用于指定外部样式表的地址

　　type：用于指定媒体类型　　text/css允许浏览器忽略它们不支持的样式表类型

　　media：属性用于指定样式表被接受的介质或媒介，也就是设备：

　　title：用于定义样式的名称

2、定义内部样式

　　写在<head></head>之间

　　body{ color:#000; }

　　</style>

3、定义内联定义

　　<h1 style="font-size:3em;">内联定义样式</h1>

4、导入指定的外部样式表

　　@import url("base.css")all

5、各种方式的差异

　　外链样式有一个好处就是：它会给当成一个资源，像图片一样，会存在于你本地缓存，这样的话就不会每次访问一具网页时，重新加下载一次的需要样式，

　　href="afox.css?date=070101" 用参数欺骗服务器

6、优先权的计算

　　具体计算在各种情况下的数字加成，形式以0,0,0,0

　　1、直接写在标签上优先级为1,0,0,0　　例：<div style="font-size:2em"></div>

　　2、每个ID选择符为0,1,0,0　　例：#nav{}

　　3、每个class选择符为0,0,1,0 　　例：.nav{}

　　4、每个元素或伪元素等为0,0,0,1　　例： :frist-child{}

　　5、其它选择符包括全局选择符*加0,0,0,0

　　有!important声明的规则的高于一切

第三章用XHTML和CSS来“摆”网页

一、<meta>

　　name="keywords"和name="description"分别表示关键字和关键字的描述，这两个属性是服务于搜索引擎，

二、文字的表现

1、font-family：字体的名称

2、font-style：字体样式，属性：normal 普通字、italic 斜体字、oblique 倾斜的字体

3、font-variant：设置对象中的文本是否为小型的大写字母，normal 正常的字体、 small-caps 小型的大写字母字体就是小写字母都用大写来表示

4、line-height：表示行与行基线之间的高手度

5、text-align：控制文本的对齐方式，left 左对齐、right 右对齐、center 居中、justify 两端对齐

6、letter-spacing：控制对象中的文字之间的间隔

7、word-spacing：控制对象中的单词之间插入的间隔

8、text-indext：设置对象中的文字缩进，text-indent:2em

9、text-decoration：对象文本的装饰，常见链接下划线，text-decoration:underline;

三、Margin与padding、border

　　margin外边距，padding内边距，border边框线

　　让整个div居中可以使用margin:0 auto; width:500px;

四、outline

　　去除链接虚线框的推荐方法

　　<a href=”#” hidefocus=”true” >链接</a>
　　　　a:focus {
　　　　outline:none;
　　}

五、文字旁边的图片

　　vertical-align属性：

　　值：

　　baseline：让该元素的基本线和父亲元素的基本线对齐，如果没有基线，就该元素底部与父元素的基线对齐

　　top：顶端对齐　　middle：中部对齐

六、图片浮动
　　给指定的img元素加float属性 left、right

七、Min和Max

1、min-width：最小宽度　　　　2、max-width：最大宽度

3、min-height：最小高度　　　 4、max-height：最大高度

第四章各种浏览器

一、兼容之道

　　Hack：所谓的Hack就是钻浏览器的空子，利用正规或不正规的写法，或利用某些浏览器对CSS的支持不完整来完成对某个浏览器单独的定义

二、条件注释

三、兼容问题

　　1、IE 3px bug：当浮动元素后面跟着文本或者只是一个普通容器时，浮动元素会与产生的3px的间距，问题存在IE6

<style type="text/css">       
/* 解决问题是 _margin-right:-3px */
#floatbox { float:left; width:70px; height:120px; border:6px #68f solid; _margin-right:-3px; }
#textwrapper{ border:3px #000 solid; }
#jog-box { margin-left:90px; border:3px #f66 solid; }
</style>

<div id="floatbox">Float元素</div>
跟在浮动元素后面的文字

<p id="textwrapper">这多了个容器<br />还给这个容器加个边框</p>
<div id="jog-box">这个容器多了个margin-left<br />传说中的测试文字<br />传说中的测试文字</div>

　　2、Layout初体验：它是IE私有的概念，

　　layout能做什么：1、IE许多常见的浮动Bug　　2、元素本身对一些基本属性异常处理问题　　3、容器和其子孙之间的边距重叠问题　　4、使用列表时遇到的诸多问题　　5、背景图像定位偏差问题　　6、使用脚本时遇到浏览器之间处理不一致的问题.

　　3、浮动元素双边距

　　双边距解决方法：将双边距元素设置为display:inline

<style type="text/css">
body { margin:0; border:0; padding:0; }
#floatholder { float:left; margin:0 50px; width:70px; height:120px; border:6px #68f solid; display:inline }
</style>

<div id="floatholder">
<div id="floatbox">IE边框若显若无，须注意，定是高度设置已忘记；</div>
浮动产生有缘故
</div>

刷新页面返回顶部

臭小子1983

《Web标准设计》读书笔记

第一章 Web标准

第二章 CSS-网页美容师

第三章 用XHTML和CSS来“摆”网页

第四章 各种浏览器

About

第三章用XHTML和CSS来“摆”网页

第四章各种浏览器