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：根据响应形状提供必要的坐标参数；
HTML CSS简介与图片映射的更多相关文章
- html5快速入门（二）—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- CSS 简介
CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...
- CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS（一）：CSS简介和基本语法
一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...
- 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
- webpack(四) --css样式及图片打包
一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS简介，基础选择器，字体属性，文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- THOMAS MASON--英国顶级衬衫面料品牌
欧尚时光 THOMAS MASON--英国顶级衬衫面料品牌 2014-01-26 欧尚时光 今天为大家介绍英国顶级衬衫面料厂商:THOMAS MASON(托马斯·梅森).THOMAS MAS ...
- Necklace of Beads
http://poj.org/problem?id=1286 // File Name: poj1286.cpp // Author: bo_jwolf // Created Time: 2013年1 ...
- Libgdx New 3D API 教程之 -- Libgdx中使用Materials
This blog is a chinese version of xoppa's Libgdx new 3D api tutorial. For English version, please re ...
- ubuntu sublime安装及配置
安装sublime-text-2: sudo add-apt-repository ppa:webupd8team/sublime-text-2 sudo apt-get update sudo ap ...
- hdu 1882 Strange Billboard(位运算+枚举)
http://acm.hdu.edu.cn/showproblem.php?pid=1882 感觉非常不错的一道题. 给一个n*m(1<=n,m<=16)的矩阵,每一个格子都有黑白两面,当 ...
- Qt深入：不能不知道的Type、Attribute和Flags
Qter高手与新手的区别在于:知道还是不知道 Qt不是开发语言,所以无所谓谁厉害.但使用他的Qter却有着差异,也许是面向对象语言本身的.或者实际经验上的.而对于Qt本身来说,高手与新手最显著的差异在 ...
- Linux如何关闭防火墙和查看防火墙的具体情况
1.Linux下关闭和开启防火墙 1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: ser ...
- 根据IP地址获取IP的详细信息
<?php header('Content-Type:text/html; charset=utf-8'); function ip_data() { $ip = GetIP(); $url = ...
- Java Math 类中的新功能--浮点数
Java™语言规范第 5 版向 java.lang.Math和 java.lang.StrictMath添加了 10 种新方法,Java 6 又添加了 10 种.这个共两部分的系列文章的 第 1 部分 ...
- 警告"Local declaration of 'XXX' hides instance variable"原因
Local declaration of 'XXX' hides instance variable 是因为本地变量名跟函数变量名同名 ,.在命名上要注意.....