2.1  在HTML文件中设置样式表

　　当前HTML“规则”指出：HTML仅用于标识页面的内容，应该使用样式表来定义内容的呈现样式。这不仅使Web页面对于所有用户（无论采用什么浏览器、平台、操作系统和物力限制等），而且对于搜索引擎和其它类型的软件，都具有更好的可访问性和可用性。

2.1.1  定义样式

　　在CSS中将HTML标记称为选择器（selector）。实际上，选择器就是不带尖括号的HTML标记，比如：p。定义了选择器后，就可以定义它的属性。当为属性指定属性值时，就是为选择器创建了一个声明（declaration）。可将选择器和声明合称为一个规则集合，或规则集（ruleset）。在典型的规则集中，将声明放在一对花括号中位于选择器之后。

 h2{font-family:verdana;

     font-size:14pt;

     color:blue;

     font-style:italic;}

　　从上面的代码可以看到定义CSS属性的模式——在一个CSS属性名之后使用一个冒号，后跟该属性的值，属性值之后是一个分号。

2.1.2  定义属性值

　　与HTML中的属性类似，CSS属性也具有属性值。但是与HTML属性值不同的是，CSS属性值无须使用引号括起。

　　HTML中的属性：

 <img src="mypicture.jpg" width="100" height="100" alt="A photo of me">

　　CSS中的属性：

　　（1）内联样式表

 <h2 style="font-family:verdana; color:#003366;">

　　（2）内部样式表/外部样式表

 h2{font-family:verdana; color:blue;}

2.1.3  创建样式

　　可以在三个重要的位置定义Web页面的样式：

  • 内联样式：在HTML元素中使用style属性；
  • 内部样式：在HTML文档头部<head>区域使用<style>元素来包含CSS样式；
  • 外部样式：在HTML文档头部<head>区域使用<link>元素引用外部CSS文件。

　　在单个Web文档中，既可以使用一种样式表，也可以同时使用这三种样式表。如果同时使用了多种样式表，那么层叠次序（cascading order）的规则就会发生作用：内联样式表优先于内部样式表，内部样式表优先于外部样式表。

　　（1）内联样式表

 <h2 style="font-family:verdana; color:#003366;">Hello,World!<h2>

　　（2）内部样式表

 <head>

 <title>CSS Example</title>

 <style type="text/css">

 h2{font-family:verdana; color:blue;}

 h3{font-family:verdana; color:blue;}

 </style>

 </head>

　　（3）外部样式表

 <head>

 <title>Using an External Style Sheet</title>

 <link rel="stylesheet" type="text/css" href="styles.css">

 </head>

2.2  在Web开发中引用颜色的方法

2.2.1  十六进制颜色

　　计算机的显示器以RGB模式来显示颜色，其中R代表Red（红色），G代表Green（绿色），B代表Blue（蓝色）。每一个字母（即R、G、B）用一个介于0~255之间的值来表示，在色谱中，0代表最暗，255代表最亮。在HTML页面中使用十六进制颜色时，需要将十进制（RGB）转化为十六进制。将红、绿、蓝色值分别转化为一个两位的十六进制值，然后将这三个十六进制值合并在一起作为单个字符串，并在开头加上一个#号。

 <p style="color:#0000FF">

2.2.2  RGB值和百分比

　　如果颜色的RGB值容易得到，那么可以使用RGB值来代替十六进制值的颜色代码。

 <p style="color:rgb(0,0,255);">

　　如果没有方便的RGB值可供使用，那么也可以使用RGB值得百分比。

 <p style="color:rgb(0%,0%,100%);">

2.2.3  颜色名称
　　在不断更新每一个HTML版本中，都增加了一些额外的颜色名称，它们都具有标准的值。参考：http://www.runoob.com/tags/html-colorname.html

 <p style="color:blue;">

[HTML/HTML5]2 CSS样式表设置的更多相关文章

  1. css样式表设置

    有参考此片博文 1.内联式样式表 是指将CSS样式编码写在HTML标签中,在标签内编写的样式能影响的范围最小,只改变本标签的文字样式,同样的标签不会受到影响,也称行间样式表. 格式如下 <h1 ...

  2. 引入CSS样式表（书写位置）

    CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...

  3. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  5. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  6. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  7. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  8. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  9. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

随机推荐

  1. Spring学习笔记之五----Spring MVC

    Spring MVC通常的执行流程是:当一个Web请求被发送给Spring MVC Application,Dispatcher Servlet接收到这个请求,通过HandlerMapping找到Co ...

  2. aspose words 介绍

    Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XPS,EPUB和 ...

  3. Linux命令的返回码列表

    转自:http://blog.chinaunix.net/uid-10347480-id-3263127.html 在 Linux 下,不管你是启动一个桌面程序也好,还是在控制台下运行命令,所有的程序 ...

  4. easyui DataGrid 工具类之 TableUtil class

    import java.lang.reflect.InvocationTargetException;import java.util.ArrayList;import java.util.HashM ...

  5. Poj2186Popular Cows

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 31533   Accepted: 12817 De ...

  6. javascript 组合

    1. 大数组中有m个元素,抽取其中的n个进行组合. var combination = function(arr, num){ var r=[]; (function f(t,a,n) { ) { r ...

  7. android Fragment 使用

    一 .Fragment的理解 Fragment 与activity 相似,但比activity 多出几个方法 ,Fragment的生命周期小于activity 一个Activity 中可以包含多个Fr ...

  8. web前端之HTML的大框架（body元素与frameset元素）

    web前端之HTML的大框架      body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head ...

  9. codeforces 744C Hongcow Buys a Deck of Cards

    C. Hongcow Buys a Deck of Cards time limit per test 2 seconds memory limit per test 256 megabytes in ...

  10. FtpClient.storeFile返回false解决方法

    在确定路径和文件名没有中文的情况下添加以下代码 ftp.setFileTransferMode(ftp.BINARY_FILE_TYPE); ftp.enterLocalPassiveMode();/ ...