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. C# 获取当前路径方法

    //获取包含清单的已加载文件的路径或 UNC 位置. public static string sApplicationPath = Assembly.GetExecutingAssembly ( ) ...

  2. GPIO口及中断API函数【转】

    本文转载自:http://blog.sina.com.cn/s/blog_a6559d9201015vx9.htmlG #include <linux/gpio.h> // 标准 GPIO ...

  3. Java数据结构之字符串模式匹配算法---KMP算法2

    直接接上篇上代码: //KMP算法 public class KMP { // 获取next数组的方法,根据给定的字符串求 public static int[] getNext(String sub ...

  4. Code4App地址

    http://www.code4app.com/ 一个 ios 很多sample的网站

  5. Thinkphp回顾(五)之前台模板中的基本语法

    一.导入CSS和JS文件 的三种方式  (了解) 1.link方式(常规) <link rel=’stylesheet’ type=’text/css’ href=’__PUBLIC__/Js/ ...

  6. java static静态方法的并发性

    在做一个web项目的时候需要做一个通用类去处理一些问题,想到这个类很多地方都有用到,又不想每次都new一个,因此就定义了里面的方法是静态方法,然后又因为多个静态方法都用到了同一个对象,结果定义了一个类 ...

  7. 将光标放到input内容的最后

    在使用setSelectionRange方法的时候一定要加setTimeout,否则无效,代码 var num = $('#input_phone').val().length; setTimeout ...

  8. GOAndroid的安装和配置

    android环境的配置还是比较复杂的,特别对于我这样一直使用mfc的程序员来说,有很多观念上需要转变.好在配置成功后就能够不断复用,那么这样的问题值得整理出来 一.安装jdk 二.解压adt-bun ...

  9. Java8的伪共享和缓存行填充--@Contended注释

    在我的前一篇文章<伪共享和缓存行填充,从Java 6, Java 7 到Java 8>中, 我们演示了在Java 8中,可以采用@Contended在类级别上的注释,来进行缓存行填充.这样 ...

  10. 复旦高等代数 I（16级）思考题

    思考题的说明 一.本学期高代I的思考题面向16级的同学,将不定期地进行更新; 二.欢迎16级的同学通过微信或书面方式提供解答图片或纸质文件给我,优秀的解答可以分享给大家: 三.请大家先独立解答思考题, ...