6 链接

6.1 创建指向另一个网站的链接

链接有两个只要的部分：目标和标签

使用目标（destination）可以指定访问者点击链接的时候会发什么什么。

标签：是用户可以在浏览器上看到的部分，点击标签就可以激活标签达到链接的目标

A元素是关键！

创建一个指向另一个网站的链接

<a href=”#”>链接标签</a>

<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。

6.2创建锚和连接锚

通常，激活一个链接会将用户带到对应的网页顶端，可以利用锚来实现这个功能

1:创建锚

例：

<header id=”top”>

<h2 id=”second”>

2:创建链接到锚的特定锚的链接

输入<a href=”#top”>或<a href=”#second”>

7 CSS 构造块

7.1构造样式规则

样式表规定了网页外观规则

规则里都有两个主要的部分：选择器（selector）和声明块（declaration block）

定义样式步骤：

1：填写元素名/类名/id名

2：加上{}两个中括号

3：在括号内填写属性和值

为样式添加注释

在样式表中添加/*在这里填写需要注释的内容*/

注释是不能嵌套的！！！

7.3理解继承

给一个元素添加样式的时候这个元素的后代也会继承这一个属性。

继承树概念图

常见的可继承/不可继承css属性

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

7.4层叠：当规则发生冲突时

CSS用层叠的原则来考虑特殊性（specificity）、顺序(order)、和重要性(importance)来解决样式冲突问题

1：特殊性

特殊性指的是选择器的具体程度。选择器越特殊，规则就越强。

2：顺序

顺序，满足就近原则，越近的优先级就越高

3：重要性：

可以覆盖整个系统的规则，加上important重要程度就最高（除非在特殊的情况下，否则不推荐使用）

7.5属性的值

1：inherit（继承）

3：长度和百分数

Em：受font-size的影响 响应式设计

9更多的css3提供的指定颜色的方式：RGBA HSLA HSL

RGBA:在RGB颜色上添加了一个alpha透明度，IE9之前的浏览器不支持alpha属性

Alpha越接近0，颜色就越透明。越接近1就是越不透明

HSL代表色相（hue）、饱和度（saturation）、和亮度（lightness）

其中色相的取值范围为0~360

饱和度的取值范围是一个百分数

Color：hsl（282,100%，25%）；

HSLA：和hsl相比就是多了一个alpha属性

8：创建样式表：

我们会使用三种创建css样式表的方法，外部样式表、嵌入式样式表和内联样式表。

首选方法是使用外部样式表，它满足了W3C的基本标准，达到结构，行为和表现的分离。

8.6使用与媒体相关的样式表

Media

定义和用法

media 属性用于为不同的媒介类型规定不同的样式。

提示：如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表（例如：<style type="text/css" media="screen,projection">）。

浏览器支持

所有主流浏览器都支持 media 属性的 "screen"、"print" 以及 "all" 值。

提示：Opera 同时支持 "handheld" 值。

9定义选择器

选择器可以定义5个不同的标准来选择要进行格式化的元素

1：元素的类型或者名称

h1{color:red}

2：元素所在的上下文

h1 em{ color:red}

3：元素的类或者ID

.error{color:red;}/#error{color:red}

4：元素的伪类或者伪元素

a:hover{color：red；}

5：元素是否有某些属性的值

a[title]{color:red;}

编写CSS的一个重要的目标就是让选择器尽可能简单，仅保持必要的特殊性。充分的利用样式的层叠性，及后代会继承祖先的样式

9.2按照名称选择元素

也就是平时所说的类型选择器。

例：h1{color：red}；

在页面里的所有h1标签都会显示为红色

通配符*

*{}：表示匹配的代码中所有元素都实现实现同样的CSS样式

9.3按类或者ID选择元素

类选择和ID选择的区别：

类选择器使用. 而ID选择器使用的是#

最好少用或者不用ID选择器

原因：

1：类选择器可以实现样式的复用，而ID选择器不能实现复用

2:特殊性太强，这就代表着ID选择器会覆盖类选择器所定义的样式

9.4按上下文选择元素

在CSS中，可以根据元素的祖先，父元素或同胞元素来定位它们

有点，可以更好地看清楚元素之间的包含关系，更好地进行定位。

在类名之前添加元素名通常会让特殊性比实际的要高。

1 按照祖先元素选要格式化的元素步骤

输入祖先名

输入一个空格

重复前两步的过程然后直到找到需要格式化的元素

后代选择器 CSS3重新命名为后代结合符

2 按父元素选择要格式化的元素

从父元素的直接后代即子元素定义样式。在CSS3之前，他们称为子选择器

输入父元素

输入>符

如果需要就对前两步进行循环

找到需要格式化的子元素为止

Father>child{****};

提示：

通常最好保持较低的特殊性，这样才能让样式跟易于实现复用

3：按照相邻同胞元素选择要格式化的元素

相邻同胞元素：是直接相互毗邻的元素，他们之间没有其他同胞元素。

CSS相邻同胞结合符：

1：father child1+child2{color：red}；

9.5：选择第一个或者最后一个子元素

有时候我们仅需要对元素的第一个或者最后一个元素进行格式化样的时候就要用到：first-child和：last-child

比如有一个UL

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

Li:first-child{color:red}第一个

Li:last-child{color:red}最后一个

这种选择器只能选择第一个或者最后一个li元素

9.6选择元素的第一个字母或者第一行

我们可以分别使用：first-letter和：first-line伪元素来获取元素的第一个字母或者第一行

9.7按状态选择链接元素

a的伪类

Link 设置从没被激活过的链接

Visited 设置已经被访问过的链接

Focus 获得焦点，通常是用tab键获得的焦点的链接

Hover 光标指向该链接时的外观

Active 当激活链接时的样式

10 为文本添加样式

10.2选择字体系列

Font-family：“字体”；

10.3指定替代字体

不是所有的字体都能在web端显示所以就需要用到替代字体

Font-family：Geneva,Tahoma,sans-serif;

在第一种字体没有的情况下就会使用第二种字体，依次类推

10.4创建斜体

尽管一些HTML元素可以使内容变为斜体，但是有时候你又需要让一些内容变成斜体

Font-style：italic//斜体

取消斜体：

Font-style:normal;

10.5应用粗体格式

Font-weight:bold:

或者可以输入100~900之间的倍数，其中400代表正常粗细，700代表粗体

还可以输入bloder（更粗） 或者lighter（更细）

取消粗体格式：

Font-weight:normal;

10.6 设置字体大小

Font-size:100%//16px

设置字体一般有两种方法

1：直接设置像素值

2：使用rem

建议使用相对单位，具有更大的灵活性，而且对定义页面中特定的设计部件很有帮助

建议

最好在body元素上建立一个基准，即声明body{font-size：100%}

其他元素会继承这条属性

怎么确定em的值？

1：在父元素上声明font-size：100%//大约是16px

2：如果你要讲h1设置为35px那么就用除法来确定相对的值，可以用除法来确定相对的值，要指定的字体大小/父元素的字体大小=Xem

Rem和em的区别：

Em是以body为基准作为判断的而rem（root em）是以根元素作为判断基准的，就是以html元素为基准（CSS3新的单位）

10.7设置行高

设置行高就相当于设置段落之间的距离，有时候设置大一些的行高更易于阅读，有时候使用较小的行高更美观

Line-height:1.45em//body 的高度为100%相当于16px

10.9：设置颜色

Color：“”；

10.10设置背景

Background-color：背景色

Background-image：背景图片

Background-repeat：背景图像重复：repeat x-repeat y-repeat no-repeat四个值可以依情况来选取

Background-attachment：控制背景图片是否随页面滚动

Fix（固定不动） scroll（默认值，随着窗口的移动而移动） local

Background-position _X _Y：控制背景图片的位置

10.11控制间距

可以增加或者减少单词之间的距离，前者称为字间距（tracking），后者称为子偶距（kerning）

Word-spacing：常用于英文，一个单词内的距离

Letter-spacing是指子和子之间的距离（常用）

是可继承的

10.12添加缩进

通过设置Text-indent属性，可以指定段落第一行前面应该流出多大的空间

10.13对齐文本

Text-align：left right center justify(文字两端对齐)

10.14修改文本的大小写

Text-transform：capitalize（每个单词的首字母大写）

Uppercase（所有字母大写）

Lowercase（所有字母小写）

10.15使用小型大写字母

Font-variant：small-caps；

取消样式

Font-variant：none；

10.16装饰文本

Text-decoration：

Underline：下划线

Overline：上滑线

Line-through：删除线

取消样式

Text-decoration：none

*{padding: 0;margin:0;font-family: "KaiTi";letter-spacing: 0.1em;line-height: 2em;
}
#contain{width: 100%;border: 1px solid black;
}
#top{max-width: 1000px;min-width: 320px;width: 100%;height: 50px;border-radius:0 20px 0 20px  ;text-align: center;margin: 10px auto;background: #efefef;
}
#top nav ul{padding-top: 5px;
}
#top nav ul li{list-style: none;display: inline;padding: 20px;font-size: 1.5em;text-shadow:  2px 2px 2px #666666;
}
#top nav ul li a{text-decoration: none;color: black;
}
#top nav ul li a:hover{color: orangered;
}
.body,.right{float: left;text-align: center;background: #efefef;border-radius: 20px;box-shadow: 5px 5px 2px black;margin: 20px 10px;
}
.body{width: 60%;
}
.image_cir,.text_group,.text_base{width: 40%;color: coral;margin: 10px 10px;
}
.text_group{float: right;
}
.text_base{margin-top: 259px;
}
.right{width: 30%;margin-left: 100px;
}
.bottom{width: 100px;height: 60px;
}
.icon{text-align: center;width: 100px;float: right;position: fixed;bottom: 60px;right:20px;
}