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简介与图片映射的更多相关文章

  1. html5快速入门（二）—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  2. CSS 简介

    CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...

  3. CSS那些事儿-阅读随笔1（CSS简介与选择符）

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  4. CSS（一）：CSS简介和基本语法

    一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...

  5. 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有

    好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...

  6. webpack(四) --css样式及图片打包

    一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...

  7. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  8. CSS简介，基础选择器，字体属性，文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

随机推荐

  1. poj1664 （递归）

    放苹果 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 31295   Accepted: 19742 Description ...

  2. JVM垃圾回收机制入门

    前言 数据库是大家会普遍重视的一个领域,异步通信一般用不到,虚拟机在大部分时候不会出问题,常被人忽视,所以我打算先学习虚拟机,从零单排Java高性能问题. 堆内存存储结构 Java6是以年代来规划内存 ...

  3. IOT数据库选型——NOSQL，MemSQL，cassandra，Riak或者OpenTSDB，InfluxDB

    IoT databases should be as flexible as required by the application. NoSQLdatabases -- especially key ...

  4. 命令行修复MBR分区

    命令行修复MBR 1.shift+F10打开命令行 2.输入:diskpart 3.输入:list disk 查看磁盘信息 4.选择你要操作的磁盘:select disk 0 5.输入:clean,清 ...

  5. adb出现adb server is out of date时的解决的方法

    出错的原因是adb的port被其它程序的进程占据了,所以要做的就是找到并kill该进程.步骤:. 1.在cmd中运行adb nodaemon server,查看adb的port号是多少,普通情况下是5 ...

  6. 【Java规划】DOM XML Parser分解、遍历、创XML

    1.前言 DOM XML Parser简介 DOM 它是 W3C 处理 XML 规范 API,这是很多其他的 XML 地基处理相关标准,不仅是 Java,其他的,如 Javascript,PHP.MS ...

  7. C++通过WIN32 API获取逻辑磁盘详细信息

      众所周知,在微软的操作系统下编写应用程序,最主要的还是通过windows所提供的api函数来实现各种操作的,这些函数通常是可以直接使用的,只要包含windows.h这个头文件. 今天我们主要介绍的 ...

  8. fluentd结合kibana、elasticsearch实时搜索分析hadoop集群日志<转>

    转自 http://blog.csdn.net/jiedushi/article/details/12003171 Fluentd是一个开源收集事件和日志系统,它目前提供150+扩展插件让你存储大数据 ...

  9. Aircrack-ng 工具箱

    官网为:http://www.aircrack-ng.org/, 它就是一个与WiFi 相关的工具啦,可以进行一些注入,抓包.破解WiFI等.里面有很多不同的套件. 另外,http://blog.cs ...

  10. retrofit2 okhttp3 RxJava butterknife 示例

    eclipse的jar包配置 eclipse中貌似用不了butterknife buildToolsVersion "23.0.2" defaultConfig { applica ...