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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- Java实现人民币大写代码解析
想要实现人民币大写,在发票等场景中使用?? 1234.56显示为:壹仟贰佰叁拾肆元伍角陆分,那就往下看看吧! 本程序可以实现 0 到 9999 9999 9999.994 以内的人民币大写转换,精确到 ...
- 平衡树（AVL）详解
1. 为什么平衡树? 在二叉搜索树(BST,Binary Search Tree)中提到,BST树可能会退化成一个链表(整棵树中只有左子树,或者只有右子树),这将大大影响二叉树的性能. 前苏联科学家G ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
- 在asp.net中使用confirm可以分为两种:
在asp.net中使用confirm可以分为两种: 1.没有使用ajax,confirm会引起也面刷新 2.使用了ajax,不会刷新 A.没有使用ajax,可以用StringBuilder来完成. ( ...
- Git配置和一些常用命令
Git:常用命令.... git clone <repo> git config –list git diff –staged add后,commit前的撤销:git rm –cached ...
- logback logback.xml 常用配置详解
一:根节点<configuration>包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文 ...
- 在Quick-cocos2dx中使用云风pbc解析Protocol Buffers，支持win、mac、ios、android
本例主要介绍 如何将 pbc 集成到quick-cocos2dx框架中,让我们的cocos2dx客户端Lua拥有编解码Protocol Buffers能力. 参考: 云风pbc的用法: http:// ...
- CF 19D Points 【线段树+平衡树】
在平面上进行三种操作: 1.add x y:在平面上添加一个点(x,y) 2.remove x y:将平面上的点(x,y)删除 3.find x y:在平面上寻找一个点,使这个点的横坐标大于x,纵坐标 ...
- [转] Linux中gcc，g++常用编译选项
http://blog.sina.com.cn/s/blog_5ff2a8a201011ro8.html gcc/g++ 在执行编译时,需要4步 1.预处理,生成.i的文件[使用-E参数] 2.将预处 ...