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:根据响应形状提供必要的坐标参数;