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. [转]java二维码生成与解析代码实现

    转载地址:点击打开链接 二维码,是一种采用黑白相间的平面几何图形通过相应的编码算法来记录文字.图片.网址等信息的条码图片.如下图 二维码的特点: 1.  高密度编码,信息容量大 可容纳多达1850个大 ...

  2. php常用函数(持续中)

    字符串 折分字符串:split和explode 函数原型:array split (string $pattern, string $string [, int $limit])           ...

  3. wex5 实战 框架拓展之1 公共data组件(Data)

    一 前言 wex5作为开发利器,框架本身的集成能力与拓展能力可谓简单强大.在学习过程中,对框架的拓展能力,需要通过实践来丰富.今天,我以实际工作中的实例,先来看一看,框架上的公共data组件的实现与用 ...

  4. Java设计模式（三）——观察者模式和监听器

    为了实现多个模块之间的联动,最好的方法是使用观察者模式.网上介绍的资料也比较多,今天我就从另一个方面谈谈自己对观察者模式的理解.从JDK提供的支持库里,我们能够找到四个对象:Observable.Ob ...

  5. easyui DataGrid 工具类之 WorkbookUtil class

    /** * @Title: WorkbookUtil.java * @Description: excel工具类 * @date 2014年5月29日 上午10:36:42 * @version V1 ...

  6. [原]__FILE__宏

    在vs中__FILE__宏代表了当前文件,如果有/FC那么__FILE__代表了当前文件的全路径!否则只表示当前文件名   参考 https://msdn.microsoft.com/en-us/li ...

  7. 安装AdventureWorks2008R2

    在微软的网站,有介绍安装示例数据库AdventureWorks的说明. 你可以在这里下载到压缩包 (AdventureWorks2008R2_Database.zip),解压后会得到两个文件: Adv ...

  8. 【前端】iterable类型的 forEach方法

    看三个例子: a = [ age: 1 , age: 2 ] a.forEach (item) -> item.age = 0 # 有效 console.log a # [ # age: 0 # ...

  9. Xcode 8 Swift 类似插件方法

    Xcode8 Swift使用技巧 1 option + cmd + / 可以弹出注释 2 color 然后加 enter 可以弹出颜色选择 3    #FIXME:  警告 4   #MARK: 备注 ...

  10. GOLANG 注释

    注释可提高代码可读性 编译器编译时自动忽略注释段内容 单行注释 //单行注释 块注释 /* 块注释 */