《HTML5与CSS3基础教程》第6-10章-CSDN博客

第六章链接

1、创建指向另一网页的链接:<a href=”http://www.site.com/directory/page.html ” rel=”external”>Lable text</a>

2、HTML块级链接：HTML5几乎允许在链接内包含任何类型的元素或元素组，例如段落、列表、区块，但是其他链接、音频、视频、表单元素、iframe等交互式内容除外。

3、创建锚并链接到锚：id=”anchor-name” <a href=”#anchor-name”>

4、创建其他类型的链接：<a href=”http://www.site.com/dire/file.ext ”>、<a href=”mailto:name@domain.com ”>、<a href=”tel:+telphone”>，包括RSS源、图像、希望访问者可以下载的文件、电子邮件地址、电话号码等任何URL链接。

第七章 CSS构造块

1、构造样式规则：selector{ property:value; }

2、为样式规则添加注释：/* */，注释可以放在样式规则内部，也可以包围整条规则或多条规则。一个注释不能嵌套在另一条注释内部。

3、CSS属性的继承：可以使用inherit进行强制继承

4、CSS规则的层叠：

1）特殊性：选择器越特殊，规则越强。遇到冲突时，优先应用特殊性强的规则

选择器	对应的HTML
P{...}	<p>...</p>
.someClass{...}	<p class=”someClass”>...</p>
.someClass.someOtherClass{...}	<p class=”someClass someOtherClass”>...</p>
#someID{...}	<p id=”someID”>...</p> <p id=”someID” class=”someClass”>...</p> <p id=”someID” class=”someOtherClass”>...</p> <p id=”someID” class=”someClass someOtherClass”>...</p>

2）顺序：晚出现的优先级高

3）重要性在某条声明的末尾加上!impoerant

5、属性的值

1）inherit：对于任何属性，如果希望显示地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit值。

2）预定义的值

3）长度和百分数：em单位大约与对应元素的字号相等，当em单位用于设置元素的font-size属性本身时，它的值继承自对应元素的父元素的字号；rem单位相对于html元素的字体大小；百分数通常是相对于父元素的。

4）纯数字：line-height的值没有单位，将与字号相乘，得到行高；

5）URL：例如background：url(bg-pattern.png)；

6）CSS颜色：预定义颜色关键字或以十六进制、RGB（rgb(0~255,0~255,0~255)）、HSL（hsl(0~360,0~100%,0~100%)）、RGBA（rgba(0~255,0~255,0~255,0~1)）、HSLA（hsl(0~360,0~100%,0~100%,o~1)）等格式，其中RGBA和HSLA可以指定具有一定程度alpha透明度的颜色。HSL、RGBA和HSLA格式都是在CSS3中引入的，IE9之前的版本不支持RGBA、HSL和HSLA。关于HSL的解释，选择一个0到360之间的色相，并将饱和度设为100，亮度设为50，就会得到这个颜色最纯的形式；降低饱和度，颜色就会向灰色变化；增加亮度，颜色就会向白色变化；减少亮度，颜色就会向黑色变化。

第八章操作样式表

1、外部样式表：<head><link rel=”stylesheet” href=”url.css”/></head>，HTML早期版本要求在link元素定义中包含type=”text/css”。

2、嵌入样式表：<head><style></style></head>

3、内联样式表：设置属性style=”property:value;”；内联样式的优先级高于其他所有样式，除非其他地方与之冲突的样式标记了！Important；不能在两个地方使用相同类型的引号。

4、样式的顺序：在其他条件相同的情况下，越晚出现的样式优先级越高；嵌入样式表与任何连接的外部样式表之间的关系取决于它们在HTML中的相对位置，如果link元素在HTML代码中出现的早，style元素就会覆盖链接的样式表，反之则反；内联样式表优先级最高；标记了!important的样式总是具有最高的优先级。

5、与媒体相关的样式表：设置属性media为all、aural、braille、handheld、print、projection、screen、tty和tv，可以将样式表限于特定输出。

第九章定义选择器

1、构造选择器

1）元素的类型或名称，如h1{color:red;}；

2）元素所在的上下文，按祖先元素选择要格式化的元素，如.architect p{color:red}；按父元素选择要格式化的元素；如.architect>p{color:red}；按相邻同胞元素选择要格式化的元素，如.architect p+p{color:red}；按普通同胞元素选择要格式化的元素，如.architect p~p{color:red}。

3）元素的类，如.class{color:red}。

4）元素的ID，如#id{color:red;}。

5）元素的伪类，伪类用于向某些选择器添加特殊的效果，伪类的效果可以通过添加一个实际的类来达到，如选择第一个或最后一个元素，li:first-child{color:red;}，li:last-child{color:red;}。

6）元素的伪元素，伪元素用于将特殊的效果添加到某些选择器，伪元素的效果可以通过添加一个实际的元素来达到，如选择元素的第一个字母或第一行，p:first-letter{color:red;}，p:first-line{color:red;}，IE8将标点符号本身当做第一个字母。

7）元素是否有某些属性和值：

选择器	属性值
[attribute]	匹配指定属性
[attribute=”value”]	完全匹配指定属性值
[attribute~=”value”]	属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
[attribute\|=”value”]	属性值是以value-打头
[attribute^=”value”]	属性值是以value开头，value为完整的单词或单词的一部分
[attribute$=”value”]	属性值是以value结尾，value为完整的单词或单词的一部分
[attribute*=”value”]（CSS3）	属性值为指定值的子字符串

2、按状态选择链接元素（通过伪类实现）

1）a:link设置链接从未被激活或指向；

2）a:visited设置已被激活的链接；

3）a:focus设置链接通过键盘选择获得焦点，如果链接处于活跃状态也会获得焦点

4）a:hover设置光标指向链接；

5）a:active设置正在被激活的链接。

严格按照link、visited、focus、hover、active的顺序定义规则；可以对其他类型的元素使用:active和:hover伪类。

3、将相同的样式规则应用于多个元素：selector1，selector2{property:value;}

4、将相同的样式规则应用于多个选择器：如果要定位的元素有多个类名，可以在选择器中将它们连在一起，类名之间没有空格；如果有空格，则对对应元素嵌套的元素设置样式。

第十章为文本添加样式

1、字体（继承）：selector{font-family:name1,name2,name3;}；Windows的默认字体是Times New Roman；表单的select、textarea和input元素不会继承父元素的字体设置，若要强制继承，则设置select、textarea、input{font-family:inherit;}。

2、斜体（继承）：selector{font-style:italic/oblique/normal;}。

3、粗体（继承）：selector{font-weight:bold/bolder（更粗）/lighter（更细）/100~900之间的100的倍数（400代表正常粗细，700代表粗体）/normal;}。

4、字体大小（继承）：selector{font-size: px /pt /em /rem /xx-small /x-small /small /medium /large /x-large /xx-large /百分数;}；1em等于父元素的字体大小；1rem等于根元素的字体大小，IE8不支持；大多数浏览器对body元素设置的默认字体大小为16px。

5、行高（继承）：selector{line-height:px /pt /em /rem /数字（与元素的字体大小相乘得出行高）/百分数;}。

6、同时设置所有字体值（继承）：selector{font:font-size/line-height, font-family, font-style, font-variant, font-weight ;}。

7、颜色：color，除了link元素，其他元素都会继承body元素中的color属性

8、背景

1）背景颜色：mso-char-indent-count:0.0000;mso-list:l17 level1 lfo18;">2）背景图像：background-image:none/url(image.png);

3）重复背景图像：background-repeat:direction(repeat/repeat-x/repeat-y/no-repeat);

4）控制背景图像是否随页面滚动：background-attachment:scoll/fixed/local;

5）指定背景图像的位置：background-position：left/center/right top/center/bottom;

9、间距（继承）

1）字间距：单词之间的距离，word-spacing:length/0;

2）字偶剧：字母之间的距离,letter-spacing:length/0;

10、缩进（继承）：text-indent:length/0;