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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- SoupUI学习资料
官网: https://www.soapui.org 下载地址: https://www.soapui.org/downloads/soapui.html 官方文档: https://www.soap ...
- getting start with storm 翻译 第八章 part-2
转载请注明出处:http://blog.csdn.net/lonelytrooper/article/details/12435641 The Bolts 首先我们看一下该topology中的标准bo ...
- VMware vSphere 服务器虚拟化之二十五 桌面虚拟化之终端服务池
VMware vSphere 服务器虚拟化之二十五 桌面虚拟化之终端服务池 终端服务池是指由一台或多台微软终端服务器提供服务的桌面源组成的池.终端服务器桌面源可交付多个桌面.它具有以下特征: 1.终端 ...
- HDU4530：小Q系列故事——大笨钟
Problem Description 饱尝情感苦恼的小Q本打算隐居一段时间,但仅仅在3月25号一天没有出现,就有很多朋友想念他,所以,他今天决定再出来一次,正式和大家做个告别. 小Q近来睡眠情况很差 ...
- mysql编码和Java编码相应一览表
MySQL to Java Encoding Name Translations MySQL Character Set Name Java-Style Character Encoding Name ...
- troubleshooting tools in JDK 7--转载
This chapter describes in detail the troubleshooting tools that are available in JDK 7. In addition, ...
- DTD简单使用
DTD:Document Type Definition DTD是一种简单的XML约束模式语言 DTD文档必须以utf-8或unicode编码 注释方式与HTML.XML文档相同 DTD文档的引用:紧 ...
- Audio Capture 录音
The Android multimedia framework includes support for capturing and encoding a variety of common aud ...
- 使用APICloud设计物联网APP
0.前言 1).APP功能: 1.控制室内插座的开关. 2.查看室内实时温湿度和温湿度趋势. 3.控制小车的行走,小车摄像头的开启/关闭.移动. 4.查看摄像头监控画面,可拍照并追溯. 5.查看服务器 ...
- retrofit2 okhttp3 RxJava butterknife 示例
eclipse的jar包配置 eclipse中貌似用不了butterknife buildToolsVersion "23.0.2" defaultConfig { applica ...