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. 为什么导入数据库要加入set names utf-8

    Repinted:http://blog.csdn.NET/class1/archive/2006/12/30/1469298.aspx 为了让你的网页能在更多的服务器上正常地显示,还是加上" ...

  2. Android从assets目录下读取文件相关

    有一个需求是app的帮助文档是word格式,ios可以直接用webview加载word显示,Android不行.而美工不配合转换成图片,前端没时间把word写成html 没办法,自己搞. 步骤: 1. ...

  3. input 的blur事件之后button的onclick事件不执行解决方案

    最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...

  4. C++中 OOP相关的类型转换

    我们都知道,在C++中有很多类型转换.今天在这里,我们不讨论普通变量的类型转换(比如int转换成double等等).本文主要讨论面向对象相关的类型转换:向上转换和向下转换. 首先,我们定义一个基类Ba ...

  5. NetSuite SuiteScript 2.0 export data to Excel file(xls)

    In NetSuite SuiteScript, We usually do/implement export data to CSV, that's straight forward: Collec ...

  6. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) C

    Description Santa Claus has Robot which lives on the infinite grid and can move along its lines. He ...

  7. x86和x64的区别

    整理了下网上的资料,归类了下,大似表述是这样的:IBM/PC兼容机,也就是Intel的i80x86指令架构,就简称了x86.x86并不是指32位环境,而是指80x86架构,这个架构目前有32位,64位 ...

  8. [ Arch Linux ] Arch更新源高速源整理之测速并自动排序高速源 加快更新效率

    方法一: 工具:rankmirrors 0x01 备份原来的源,并创建一个测试源 cd /etc/pacman.d cp mirrorlist mirrorlist.bakcp mirrorlist ...

  9. 如果你恨一个程序员 忽悠他去做iOS开发(戏谑篇)

    .state { text-align: right; height: 16px; line-height: 16px; color: #999; padding-top: 5px; overflow ...

  10. 在myeclipse下安装svn的几种方式

    方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Sv ...