04.背景、超链接、样式

设置背景图：

1.普通方式

图片：background-image:url(../images/background.png) ;

平铺：background-repeat:repeat ;

位置：background-position:center ;

2. 采用简化的方式设置背景

设置顺序： color、image、repeat、position(repeat-x, repeat-y)

background:url(./images/background.png) no-repeat center

3.固定背景图:页面向下滚动，背景保持同一位置

background-attachment: fixed ;

插入图片

绝对路径（d:images/start.jpg）

相对路径（只写出网页和图片的对应路径）

平级： <img src="start.jpg">

上级： <img src="../start.jpg”>

下级： <img src="image/start.jpg">

字体设置

当行高=元素的高时，文字垂直居中

{ height: 100px;
line-height: 100px; }

{ text-indent: 2em;
text-height: 2em; }              //文字缩进、行高

p{ text-align: center; }         //水平居中

超链接

1.链接到其他网站

默认打开

<a href="http://www.albertliangzt.com" target="_self">Albert Liang个人主页</a>

Albert Liang个人主页

新窗口打开

<a href=”http://www.github.com” target=”_blank”>Github</a>

Github

2.链接到锚点

<a href=”#mark”>click here</a>  //点击此处
<a name=”mark”>link here</a>    //跳到此处

返回到顶部

<a href="#">top</a>

top

样式设置：

1. 内联样式:

在元素的style属性里写样式，这种样式只对一个元素有效，无法复用

<h1 style="color:red;">这是内联样式</h1>

h1{ color:red; }

2. 内部样式：

在head元素内部的style标签内写样式，这种样式可以在当前网页上复用

h2{ color:blue; }

3.外部样式：

在单独的css文件中写样式，需要通过link标签将其引入到

页上才能生效，这种样式可以在任意的网页上复用

<link rel=”stylesheet” href=”style.css”/>   //新建css格式文件，将style内容写到css中

属性：

1. 继承性：

在元素上写的样式，可以被子元素继承，注意只有字体、颜色可以继承

body{

font-family:"微软雅黑", "文泉驿正黑", "黑体";

}

2. 层叠属性：

先后给一个元素设置不同的样式，效果会叠加在一起

h1{

color:#ff0000;

font-size:50px;

}

3.优先级：

先后给一个元素设置同一属性，其效果以后者为准。

h3{ color:#00ff00; }

...other code...

h2{ color:green; }