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. 从cpu加电到加载OS内核的详细过程（清华大学ucore-lab1总结一）

    结合最近学习清华的OS课,先用“人话”来高度抽象的描述一下我自己的理解.CPU在系统加电也就是我们按下电源开关后,开始初始化他的寄存器,主要是cs和eip(本文基于x86架构),然后在ROM中找到一个 ...

  2. 【索引】Volume 0. Getting Started

    AOAPC I: Beginning Algorithm Contests (Rujia Liu) Volume 0. Getting Started 10055 - Hashmat the Brav ...

  3. flume-ng 使用spool source 传输文件到hdfs

    Flume 1.4.0 User Guide 地址:http://archive.cloudera.com/cdh4/cdh/4/flume-ng-1.4.0-cdh4.6.0/FlumeUserGu ...

  4. linux —— shell 编程（整体框架与基础笔记）

    导读 关于shell编程基础的学习,网上有很多资源,如果在校图书馆应该也有一些教程,所以这里对于零碎的基础不做详细记录,而只是对一些常用的概念.命令与操作做一个简要的记录,以备方便查找. (本文所有语 ...

  5. java參数传递机制浅析

    欢迎转载,转载请声明出处! ----------------------------------------- 前言: java语言中,參数的传递仅仅有一种机制.那就是值传递. 举例: 以下将通过几个 ...

  6. 数据库框架 Litepal

    1.导包 dependencies {   compile 'org.litepal.android:core:1.4.1' } 2.在asstes中建立litepal.xml文件 <?xml ...

  7. sparkSQL1.1入门之二：sparkSQL执行架构

          在介绍sparkSQL之前.我们首先来看看,传统的关系型数据库是怎么执行的.当我们提交了一个非常easy的查询: SELECT a1,a2,a3 FROM tableA Where con ...

  8. java.lang.ClassCastException: android.view.ViewGroup$LayoutParams cannot be cast to android.widget.L（转）

    09-09 10:19:59.979: E/AndroidRuntime(2767): FATAL EXCEPTION: main09-09 10:19:59.979: E/AndroidRuntim ...

  9. HDU 4462（暴力枚举）

    因为题目当中的k比较小k <= 10,所以可以直接枚举,题目里面由两个trick, 一个是如果每个点都可以放稻草人的话,那么答案是0, 另外一个就是如果可以放稻草人的点不用被照到.知道了这两个基 ...

  10. Java数字、货币值和百分数等的格式化处理

    如果我们用下列语句输出一个数 System.out.println(123456.789); 将会在Console看到输出 123456.789 那么如何得到123,456.789这种格式化的输出呢? ...