第一部分----CSS基础知识

第1章，CSS需要的HTML

HTML越简单，对搜索引擎越友好

div是块级元素，span是行内元素

<section>标签包含一组相关的内容，就像一本书中的章节一样

<aside>标签包含与其周边的内容相关的内容，如纸质杂志上的侧边栏一样

<nav>标签用来包含重要的导航链接

<figure>标签用于说明图

让IE8及更早版本支持HTML5，可以使用html5shiv，不过，也只是接受了HTML5标签并实现应用了标签的CSS，并没有使浏览器“理解”HTML5的标签是干啥的，比如对于<video>，IE8及之前版本并不能播放HTML5视频，即使加载了js程序

对网页进行验证

W3C网站（http://validator.w3.org/）

Firefox（http://chrispederick.com/work/web-developer），扩展http://users.skynet.be/mgueury/mozilla/

Chrome（http://bit.ly/SCONRY）

Safari（www.zappatic.net/safaritidy）

对于包含多个相关项目的列表，使用无序列表<ul>

对于表示过程步骤或定义一组项目的顺序，使用有序列表<ol>

创建术语表及其定义或描述，使用<dl>定义列表，<dt>定义术语，<dd>定义描述

包含一段引用语，长段落使用<blockquote>，简短引语使用<q>

使用<cite>引用书的标题、新闻报道或网站

使用<address>标识和提供该网页作者的联系信息

在没有适当的HTML标签，又要标识某一元素时，可以使用<div>和<span>

注：不要滥用<div>，要记得关闭标签

DOCTYPE文档类型，可以给浏览器一个提示，现在这个网页是用的什么版本的HTML，使得浏览器可以正确的解释它

对于使用了HTML5的文档，声明如下：

<!DOCTYPE html>

对于旧版的HTML或XHTML，如HTML 4.01 Transitional或XHTML 1.0 Transitional，文档声明就复杂了

<!-- HTML 4.01 Transitional文档声明 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 Transitional文档声明 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

添加meta标签，可以使IE8停止无厘头的怪异行为（怪异模式，进入IE7模式），使IE8采用其最标准的兼容模式来显示网页

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

注：要放在head标签中，最好是title标签下

第2章，创建样式和样式表

简单的样式也会包含几个元素：

Selector（选择器）、Declaration Block（声明块）、Declaration（声明）、Property（属性）、Value（值）

注：在每个属性/值对的后面一定要加上一个分号(;)，省略分号会使得样式表无效。

内部样式表

使用<style>标签包围，并放在</head>前面，有js时，放在js前面，js放在</head>前面

HTML5对于内部样式表，只要求有开始<style>标签。HTML和XHTML早期版本，还要求要有type属性：

<style type="text/css">

外部样式表

使用HTML的<link>标签，或者CSS自己的@import指令，@import指令可以实现<link>无法做到的一件事，将多个样式表附到一个外部样式表上。

检验CSS

W3C：http://jigsaw.w3.org/css-validator

用HTML链接外部样式表

<!-- HTML5： -->

<link rel="stylesheet" href="css/style.css">

<!-- HTML4.01，需要增加type属性： -->

<link rel="stylesheet" type="text/css" href="css/style.css">

<!-- XHTML，要有关闭标签： -->

<link rel="stylesheet" type="text/css" href="css/style.css" />

使用CSS链接外部样式表

<style><!-- HTML5的写法 HTML4.01及XHTML还需要加上type="text/css" -->

     @import url(css/styles.css);

</style>

注：应该将所有@import行放在所有CSS规则之前，web浏览器会忽略任何在CSS规则之后引入的样式表

行内样式

将样式放在HTML元素的style属性里面定义，这是非常不好的。

第3章，选择器：明确设置哪些样式

标签选择器：整体控制

标签选择器也叫类型选择器、元素选择器，作用于HTML的元素

类选择器：精确控制

样式表中类名称命名规范

1、所有类选择器的名称必须以一个圆点开头

2、CSS只允许类名使用字母、数字、连字符(-)、下划线(_)

3、在圆点之后必须以字母开头

4、类名称区分大小写

注：在HTML中，作为类属性的一部分，不需要在类名前加一个点

ID选择器：控制特殊的网页元素

群组选择器

为了使多个选择器成为一个群，只需要创建一个用逗号分隔的选择器列表即可。

h1,h2,h3{

    color:#333;

}

通用选择器（*）

*号是选择每一个标签的通用选择器标志

 <html>

      <head>

           <title>A Simple Document</title>

      </head>

      <body>

           <h1>Header</h1>

           <p>A paragraph of <strong>important</strong>text.</p>

      </body>

 </html>

<html>涵盖<head>,<body>标签，使<html>成为两者的祖宗。同样地，在另一个标签里面的标签就是派生标签

将上述HTML代码转换成一张图：

祖先标签：当HTML标签涵盖另一个标签时，HTML就成了该标签的祖先。<html>就是所有其他标签的祖先标签，<body>就是<h1>,<p>,<strong>的祖先标签

派生标签：处在一个或多个标签内部的标签就是派生标签。<body>是<html>的派生标签，<title>是<head>及<html>的派生标签

父标签：父标签是离另一个标签最近的祖先

子标签：直接被另一个标签包围的标签

同胞标签：同一个标签的子标签

创建派生选择器

多个选择器以空格隔开，类似群组选择器以逗号分开

h1 strong{color:#666}     /* 表示只要出现h1里面的strong标签，字体都改成红色，其他地方的strong不变 */

/*如果之间没有空格，表示的意义将完全不同：*/

p.intro;     /*这意味着：这个intro类必须专用于p标签(<p class="intro">)才有效。*/

伪类和伪元素

给链接定义样式

a:link：指访问者还没有访问到、鼠标也尚未滑到过或单击过的所有链接

a:visited：指依据Web浏览器历史记录，访问者之前已经单击过的链接

a:hover：在访问者鼠标滑过链接时改变链接的展现效果

a:active：当访问者单击链接时的展现效果

伪元素：:first-letter，:first-line

CSS3修改了这些伪元素的语法。在CSS2.1中，伪类用一个冒号开头，像这样 :first-letter，CSS3在此基础上又加了一个冒号，以便于从伪元素中辨别出项:hover这样的伪类。

:focus：访问者执行某些动作时起作用。类似访问者单击网页文本框，将焦点放在了文本框上。只对处于焦点的元素起作用

:before：能在指定的元素前添加内容。

<p class="tip">

p.tip:before{ content:"HOT TIP!"}/* 会在遇到<p>标签中的tip类时，在段落前插入文本"HOT TIP" */

用这个选择器添加文本的技术术语叫做“创造内容”

:after：与:before一样，也会创造内容，不过是添加在元素后面。

注：IE8+及其他主流浏览器都支持:before和:after选择器

注：:before、:after与:first-letter、:first-line一样，都是伪元素，在CSS3中都必须使用::before、::after，但浏览器都支持单冒号版本，为此可以继续使用:before、:after

::selection：针对访问者已经在网页上选中的项目。该选择器只能设置color，background-color属性。没有单冒号版本

注：这个选择器在IE9、Opera、Chrome、Safari都是有效的，但在IE8及Firefox中不行，不过可以通过添加厂商前缀，使Firefox支持它，例：

::-moz-selection{

    color:#fff;

    background-color:#999;

}

属性选择器

类似img[title]，input[type="text"]，a[href^="http://"]等

子选择器

使用尖括号（>）。与派生选择器类似，用子选择器可以给另一个标签的子标签设置样式

与派生选择器应用于同一个标签的所有派生标签不同，子选择器可以让你指定要的是哪个父标签的哪个子标签，亦即只会影响直接子元素，而不影响间接子元素。

相邻同胞选择器

使用加号（+）。只选择相邻的第一个子元素，h2+p只会选择h2标签之后的一个p标签

通用的同胞组合选择器

使用波浪线（~）。选择所有同胞子元素，h2~p会选择所有与h2同级的所有同胞p标签

:first-child：只选择和格式化该元素的第一个子元素

如果要选择上图所示的第一个h1标签，可以创建类似选择器：h1:first-child（写在子元素上），问题在于，如果将div底下的h2改成

h1，那么这个h1也会被选中

:last-child与:first-child类似，只不过选择的是最后一个

以上几个属性可以查看链接：HTML5与CSS3基础教程第八版学习笔记7~10章中的第九章，定义选择器与本章进行对比、参照

nth-child()

可以轻松对表格隔行进行设置不同样式：

tr:nth-child(odd) {

    background-color:#333;       /* 对奇数行设置 */

}

tr:nth-child(even) {

    background-color:#666;      /* 对偶数行设置 */

}

还可以在一个系列中，从它的第二个子元素开始，每个两个子元素选择一个子元素。例：想在一个行中，从第二个表格单元开始，每三个表格单元（<td>标签）就高亮一次：

tr td:nth-child(3n + 2) {

    background-color:#900;

}

注：3n表示每三个元素，4n表示每四个元素，加号后面表示从第几个元素开始

注：所有现代浏览器包括IE9及以上版本，都支持:last-child,:first-child,:nth-child()，但IE8不支持

子类型选择器

:first-of-type：与:first-child类似。

:last-of-type：与last-child类似

注：这些类型选择器必须是一个特殊标签的子标签，因此：p:first-of-type表示“一个段落标签的第一个子标签”

:nth-of-type：与nth-child类似

:not选择器

:not选择器也被称作否定伪类，可以选择不是其他东西的某件东西。

p:not(.classy){

    color:red;

}  /* 选择除了类为classy之外的所有段落 */

1、用:not选择器只能使用简单选择器，img:not(.portrait)，li:not(:first-child)等

2、不能使用派生选择器

3、不能使用多个not选择器

第4章，用样式继承节省时间

可以查看链接：HTML5与CSS3基础教程第八版学习笔记7~10章第七章，CSS构造块进行对比、参照

1、一般来说，影响网页元素位置的属性，或者页边距、背景颜色、元素的边框线等，都不会被继承

2、Web浏览器用它们自己固有的样式为各种标签设置样式，当给网页上定义一种字号，并将它应用于<body>标签时，标题还是会大于段落文字等等。即，继承不会影响浏览器对于某些元素的內建样式。

3、当样式发生冲突时，更具体的样式会胜出

第5章，用层叠管理多样式

如果一个标签本身没有设置任何样式，那么当继承来的属性发生任何冲突，离它最近的那个祖先标签就会胜出

任何直接应用于指定标签的样式，都将胜出

用权重值决定哪种样式胜出

1、一个标签选择器值1分

2、一个类选择器值10分

3、一个ID选择器值100分

4、一个內建样式值1000分

注：计算权重值所涉及的算术实际上比这要复杂一些，但这个公式在大多数情况下都使用，欲了解Web浏览器实际上如何计算权重值，可登录以下网站：www.w3.org/TR/css3-selectors/#specificity

注：伪元素（如::first-line）通常被当作标签选择器对待，值1分，伪类（如:link）则被当作类对待，值10分。

由于派生选择器由几个选择器组成，所以算术上会复杂些，权值是所有选择器值的总和

注：继承来的属性没有权值

权重值相同时，最后一个样式胜出

若内部样式表和外部样式表发生冲突时，两种样式表在HTML中所处的位置就非常重要，若<style>标签在<link>标签之前，外部样式表将胜出。

建议：最好先列出所有的外部样式表，并且当绝对需要在某一个网页中应用一个或多个样式表时，最好只使用一个内部样式表

忽略权重值

当一定、必须要确保某一个特定的属性不能被另一个更具体的样式覆盖时，就可以使用在需要保护的属性后面插入!important，可以避免被权重值更大的属性覆盖。

注意：是对个别属性应用，而不是对整个样式。最后，当两个都有!important的样式冲突时，更具体的样式会胜出。

选择性覆盖

1、使用内部样式表，定义要覆盖的样式

2、使用另一个外部样式表，定义要覆盖的样式，并在最后面引入

避免权重战争

<div id="article">

     <p>A paragraph</p>

     <p>Another paragraph</p>

     <p class="special">A Special paragraph</p>

</div>

首先定义：

#article p{

    color:red;

}

如果要更改<p class="special">段落，则必须定义如下规则

#article .special{

    color:blue;

}

冗长而没啥大用，当直接将<p class="special">复制到别的地方时，样式并不会改变

若用类代替：

.article p{

    color:red;

}

p.special{

    color:blue;

}

减少了冗余，并且将<p class="special">剪切到其他的地方，样式依然生效

建议：尽量使用类选择器，避免使用id选择器

关于为什么避免使用ID选择器的详细讨论：http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class

CSS reset：http://meyerweb.com/eric/tools/css/reset

CSS3秘笈第三版涵盖HTML5学习笔记1~5章的更多相关文章

CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局使用的是float(浮动)属性注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...
《Python基础教程（第二版）》学习笔记 -> 第十一章文件和素材
打开文件 open函数用来打开文件,语句如下: open(name[,mode[,buffering]]) open函数使用一个文件名作为唯一的强制参数,然后后返回一个文件对象.模式(mode)和缓冲 ...
《Python基础教程（第二版）》学习笔记 -> 第七章更加抽象
对象的魔力多态:意味着可以对不同类的对象使用同样的操作: 封装:对外部世界隐藏对象的工作细节: 继承:以普通的类为基础建立专门的类对象多态① 多态和方法绑定到对象特性上面的函数称为方法(metho ...
《Python基础教程（第二版）》学习笔记 -> 第六章抽象
抽象和结构本章将会介绍如何让将语句组织成函数,还会详细介绍参数(parameter)和作用域(scope)的概念,以及递归的概念及其在程序中的用途. 创建函数函数可以调用,它执行某种行为,并返回某 ...
《Python基础教程（第二版）》学习笔记 -> 第五章条件、循环和其他语句
条件和条件语句下面的值在作为布尔表达式的时候,会被解释器看作假(False):False None 0 "" () [] {} 条件执行和if语句 ...
《Python基础教程（第二版）》学习笔记 -> 第四章字典
字典是Python中唯一内建的映射类型. 字典中的值并没有特殊的顺序,但是都存储在一个特定的键(Key)里.键可以是数字.字符串甚至是元组. 字典的使用某些情况下,字典比列表更加适用: 表征游戏棋盘 ...
《数据库技术基础与应用（第2版）》学习笔记——第7章~
从这章开始,操作的内容开始增多,概念的东西越来越少,可能跟学校的教学目的有关,但是跟我的学习目的不匹配,就不再继续整理. 总结:这本书适合大学本科生学习和了解数据库的相关知识以及Access和SQL ...

随机推荐

thymeleaf中的th:each用法
一.th:eath迭代集合用法: <table> <thead> <tr> <th>序号</th> <th>用户名</th ...
CodeForces 732D Exams (二分)
题意:某人要考试,有n天考m个科目,然后有m个科目要考试的时间和要复习多少天才能做,问你他最早考完所有科目是什么时间. 析:二分答案,然后在判断时,直接就是倒着判,很明显后出来的优先,也就是一个栈. ...
Oracle数据库程序包全局变量的应用
1 前言在程序实现过程中,经常用遇到一些全局变量或常数.在程序开发过程中,往往会将该变量或常数存储于临时表或前台程序的全局变量中,由此带来运行效率降低<频繁读取临时表>或安全隐患< ...
配置iSCSI多路径
1.添加MPIO功能,完成后打开MPIO进行配置,添加对iSCSI多路径的支持,如下图表示已经添加完成后灰色不可选,再打开 MPIO设备标签页可以看到已安装完成的MPIO所支持的设备:
oracle连接数据的oci和thin的区别
1)从使用上来说,oci必须在客户机上安装oracle客户端或才能连接,而thin就不需要,因此从使用上来讲thin还是更加方便,这也是thin比较常见的原因.2)原理上来看,thin是纯java实现 ...
瑞丽的SQL-基于窗体的排名计算
在SQL Server中,窗体被定义为用户指定的一组行. 之所以要提出窗体这个概念,由于这种基于窗体或分区的又一次计算在实际工作应用范围比較广泛.比如.假设我们要对每一个班级中的学生按成绩进行排序,在 ...
SAP BW 平面文件创建信息立方体
T-CODE:RSA1 1.创建信息范围 2.创建信息范围创建特性信息对象目录创建关键指标信息对象目录 3.创建特性信息对象依次创建客户,销售组织 4.创建关键指标依次创建单价和金额 5.创建 ...
关于flash player debugger 无法弹窗报错的解决办法
第一个是IE的插件, Download the Windows Flash Player 10.2 ActiveX control content debugger (for IE) (EXE, 2. ...
如何本地化 Windows Phone 应用标题
如何本地化 Windows Phone 应用标题 http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff967550(v=vs. ...
把json格式对象转成可提交字符串格式,会过滤掉函数 {a: {b: 3}, b: [1], c: "d"} -> a.b=3&b[0]=1&c=d
var json = { name: "任务名称" , scoreRule: "", score: "", // 如果规则表达式不为空,则默 ...

CSS3秘笈第三版涵盖HTML5学习笔记1~5章