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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- Xcode use Protocol buffer
http://stackoverflow.com/questions/10277576/google-protocol-buffers-on-ios http://stackoverflow.com/ ...
- 使用国人的koala来重新预编译BOOTSTRAP的LESS文件
好玩...
- 由阿里巴巴一道笔试题看Java静态代码块、静态函数、动态代码块、构造函数等的执行顺序
一.阿里巴巴笔试题: public class Test { public static int k = 0; public static Test t1 = new Test("t1&qu ...
- undo损坏故障恢复（二）ORA-01092,ORA-00604,ORA-01110
undo 故障诊断与恢复(二) 今天是2013-09-01,目前困扰我将近一周的问题,终于解决了,我非常感谢帮助我的朋友,也非常感谢管我要钱然后替我解决问题的朋友(我没采用).这更激发了我一定要解决这 ...
- mysql批量删除指定前缀或后缀表
今天突然发现我们数据库中多出很多表,后缀名为"copy",预计是navicat直接拷贝导致的,然后要对这些有同样后缀名的表进行删除,假设一个一个选择会非常麻烦,表计较多,在网上找了 ...
- nginix 笔记
1. 一个master进程,多个worker进程,worker进程数目可自动配置为核的数目 2. 配置文件ngnix.conf存放在linux的/etc/ngnix目录下
- [转] __thread关键字
http://blog.csdn.net/liuxuejiang158blog/article/details/14100897 __thread是GCC内置的线程局部存储设施,存取效率可以和全局变量 ...
- mysql 大表 Sharding [转]
参看以下两篇文章 http://www.dedecms.com/knowledge/data-base/mysql/2012/0820/9172.html http://dbanotes.net/da ...
- okhttp 常用使用方式 封装 演示
工具介绍 使用: AndroidStudio:[compile 'com.squareup.okhttp3:okhttp:3.4.2']和[compile 'com.zhy:okhttputils:2 ...
- 【开源java游戏框架libgdx专题】-09-动画的使用
1.Animation类介绍 Api定义:动画是由多个帧,在设定的时间间隔序列显示.比如,一个跑步的人一个动画可以通过运行时播放这些图像无限拍照他了. 功能用法:管理动画,设置随即播放模式和播放顺 ...