HTML CSS简介与图片映射

1. CSS 入门

内联样式：在 HTML 元素中使用 “style” 属性，需要将表现与内容混在一起；

内部样式表：在 HTML 文档头部 <head> 区域使用 <style> 元素来包含 css；

外部引用：使用外部 css 文件；

一般使用外部引用 css 文件的方式。

简单样式参考：

　　background-color：背景色

　　color：字体颜色

　　margin-left：左外边距

　　font-family：字体

　　font-size：字号

　　text-align:center：居中对齐

css 基础资料查询：http://www.runoob.com/css/css-tutorial.html。

内联样式示例：

<body style="background-color:yellow;">
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<p style="background-color:green;">这是一个段落。</p>
</body>

内部样式表：

<head>
<style>
hr {color:red;}
p  {text-align:center;}
</style>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

外部样式表：

<head>
<link rel="stylesheet" type="text/css", href="test.css"> 
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

test.css：
p {color:red; text-align:center;}

层叠次序：

　　浏览器默认设置 -> 外部样式表 -> 内部样式表 -> 内联样式。

ID选择器：

为标有特定ID的HTML指定特定的样式，内部外部样式都可以实现。

一个ID的样式可以被多个元素选中。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>

<!-- <link rel="stylesheet" type="text/css", href="test.css">  -->
<style>
#p1
{
    color:red;
    text-align:center;
}
#p2
{
    color:blue;
    text-align:center;
}
#p3
{
    color:green;
    text-align:center;
}
</style>
</head>

<body>
<p id="p1">This is a paragraph.</p>
<p id="p2">一个段落。</p>
<p id="p3">这是一个段落。</p>

</body>
</html>

Class 选择器：

.center
{
    text-align:center;
}
.red
{
    color:red;
}
.green
{
    color:green;
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>

<link rel="stylesheet" type="text/css", href="test.css">
</head>

<body>
<p class="center">This is a paragraph.</p>
<p class="center red">一个段落。</p>
<p class="center green">这是一个段落。</p>

</body>
</html>

指定元素的样式：

p.center
{
    text-align:center;
}
h1.red
{
    color:red;
}
.green
{
    color:green;
}

h1 标题元素将不受 .center 的影响；
p 段落元素将不受 .red 的影响；

2. HTML 图像补充：

alt 属性：在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

height、width：设置图片的宽、高，默认单位是像素。　　

usermap：图片映射，点击图片的位置将链接到新的位置。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

area shape=“”：指定响应区域的形状；
coords：根据响应形状提供必要的坐标参数；

posted on 2016-09-28 19:30 青墨淡潋阅读(352) 评论(0) 编辑收藏举报