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. poj 1149 最大流

    题目链接:http://poj.org/problem?id=1149 #include <cstdio> #include <cmath> #include <algo ...

  2. 值得关注的 10 个 Python 英文博客

    英文原文:http://pythontips.com/2013/07/31/10-python-blogs-worth-following/ 中文翻译参考: http://python.jobbole ...

  3. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  4. java中字节流和字符流的区别

    流分类: 1.Java的字节流   InputStream是所有字节输入流的祖先,而OutputStream是所有字节输出流的祖先.2.Java的字符流  Reader是所有读取字符串输入流的祖先,而 ...

  5. VS2008 error C2470

    error C2470: '***类' : looks like a function definition, but there is no parameter list; skipping app ...

  6. Solr开发参考文档(转)

    Solr开发文档 Solr 是一种可供企业使用的.基于 Lucene 的搜索服务器,它支持层面搜索.命中醒目显示和多种输出格式.在这篇文章中,将介绍 Solr 并展示如何轻松地将其表现优异的全文本搜索 ...

  7. POJ 2418 ，ZOJ 1899 Hardwood Species - from lanshui_Yang

    Description Hardwoods are the botanical group of trees that have broad leaves, produce a fruit or nu ...

  8. C#读写共享文件夹

    该试验分以下步骤: 1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.80.88.180,共享文件夹名字是test,test里面有两个文件:good.txt和bad.txt,访问权限,用 ...

  9. OpenCV LDA(Linnear Discriminant analysis)类的使用---OpenCV LDA演示样例

    1.OpenCV中LDA类的声明 //contrib.hpp class CV_EXPORTS LDA { public: // Initializes a LDA with num_componen ...

  10. (转)cocos2dx 内存管理

    原文地址:http://blog.csdn.net/ring0hx/article/details/7946397 cocos2dx的内存管理移植自Objective-C, 对于没有接触过OC的C++ ...