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. DataGrid获取当前行某列值

    前言: 本文将给大家介绍一下, 在ASP.NET MVC环境下,如何利用Jquery MiniUI(一个专业WebUI控件库)来获取Datagrid中的值,官网没有涉及到的内容:如何获取当前行某一列的 ...

  2. Tween.js的使用示例

    可参考:http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html 官方文档:https://github.com/tweenjs ...

  3. CSS3 笔记五（Buttons）

    Some examples 1> Input width animation Search: Code <!DOCTYPE html> <html> <head&g ...

  4. 用java代码手动控制kafkaconsumer偏移量

    为应对消费结果需要存储到关系数据库中,避免数据库down时consumer继续消费的场景 http://kafka.apache.org 查了很多源码都记录下来,省的下次还要过滤源码. //如果将结果 ...

  5. es搜索引擎

    1.es简介 2.es优缺点 3.es使用 4.es可以解决的问题 5.es举例 6.es执行结果截图 7.es数据增量方案 8.使用es搜索 一.es简介 es是一个是一个实时的分布式搜索和分析引擎 ...

  6. java中的23中设计模式（转）

    设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  7. zigbee学习之路(十二):zigbee协议原理介绍

    一.前言 从今天开始,我们要正式开始进行zigbee相关的通信实验了,我所使用的协议栈是ZStack 是TI ZStack-CC2530-2.3.0-1.4.0版本,大家也可以从TI的官网上直接下载T ...

  8. 《利用python进行数据分析》读书笔记--第七章 数据规整化：清理、转换、合并、重塑（三）

    http://www.cnblogs.com/batteryhp/p/5046433.html 5.示例:usda食品数据库 下面是一个具体的例子,书中最重要的就是例子. #-*- encoding: ...

  9. [Spark] Spark的RDD编程

    本篇博客中的操作都在 ./bin/pyspark 中执行. RDD,即弹性分布式数据集(Resilient Distributed Dataset),是Spark对数据的核心抽象.RDD是分布式元素的 ...

  10. Life is short

    相信不少码农曾看过类似“life is short, use Python”等之类略带调侃意味的小段子(譬如我),而其也并非不无道理.每门编程语言都是合理的存在,都有它们的优点,及缺陷. 码农们也大多 ...