当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页。

想要浏览器读到样式表,有三种方法:

1.外部样式表

外部样式表可以理解为.CSS文件。当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择。

在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候。

每个html页面使用标签<link>来连接外部样式表:

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

浏览器会从样式表mystyle.css中读取样式声明,格式化html文档。

注:样式表中,属性值和单位之间不能留有空格。

2.内部样式表

内部样式表就是将样式的定义放在html文档的开头处。

当单个html文档需要特殊的样式时,内部样式是个很不错的选择。

可以使用<style>标签中定以内部样式。

<head>
<style type="text/css">
hr {color: #3F0;}
p {margin-left: 100px;}
body {background-image: url("bg.gif");}
</style>
</head>

3.内联样式

内联样式表就是将样式的定义放在html的标签中。

使用内联样式,需要在相关的html标签内使用样式属性(style),style属性中可以包含任何CSS的属性。

<p style="color: #3F0; margin-left: 100px">
This is a paragraph
</p>

这是标签p的内联样式,效果是

注:内联样式会损坏样式表的许多优势。

4.多重样式的问题

如果同一个选择器将不同的属性定义在不同的样式表中,这是属性值会根据样式表的类型进行继承。

内部样式会继承外部样式的属性。

例如:外部样式定义的属性

h3 {
color: #F00;
text-align: left;
font-size: 8pt;
}

内部样式定义属性

h3 {
text-align: right;
font-size: 20pt;
}

当显示的浏览器上时

可看出内部样式会继承外部样式的属性。

当再一次的定义了内联样式

<h3 style="color:#006">测试h3标题</h3>

CSS自学笔记(4):CSS样式表的使用的更多相关文章

  1. CSS 小结笔记之三种样式表

    CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...

  2. CSS自学笔记(5):CSS的样式

    CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-col ...

  3. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  4. CSS自学笔记(1):CSS简介

    一.什么是CSS CSS(Cascading Style Sheet(级联样式表))是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  5. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  6. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  7. DIV+CSS学习笔记(CSS)

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  8. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  9. CSS自学笔记(2):CSS语法

    CSS的语法规则主要有两个分构成选择器和声明(声明问一条或者多条). selector {declaration1; declaration2; ... declarationN } 选择器(selc ...

随机推荐

  1. Oracle文章中常用数据表的描述

    desc stud; 名称   空值       类型           ---- -------- ------------ ID   NOT NULL NUMBER(38)   NAME     ...

  2. 使用 hibernate 存取大对象数据类型(clob和blob)

    数据库表如下: book表 id 该表的主键.number类型. photo 代表图书的图片,blob类型. description 图书的描述,clob类型. 使用 hibernate3 往 boo ...

  3. HMM模型详解

    http://www.cnblogs.com/skyme/p/4651331.html

  4. 用OpenCV实现Otsu算法

    算法的介绍 otsu法(最大类间方差法,有时也称之为大津算法)使用的是聚类的思想,把图像的灰度数按灰度级分成2个部分,使得两个部分之间的灰度值差异最大,每个部分之间的灰度差异最小,通过方差的计算来寻找 ...

  5. Android Intent的花样启动

    刚开始看郭大神的<>,实现以下里面的一些例子.Intent的花样启动 显示Intent的使用. 实例化一个Intent,并且制定当前的activity和要跳转到的activity Inte ...

  6. ArrayList--卧槽这就是源码

    最近在<数据结构与算法分析(java版)>中看到了实现ArrayList的简易代码,亲自做了一下.个中的疑点还是在代码中实现了一下.其中就包括内部类Iterator对外部成员访问的问题. ...

  7. Android 之 MediaPlayer类

    在Android中通常用MediaPlayer来播放一些媒体文件,对于音频文件来说只需直接使用MeidaPlayer结合几句代码即可,但是对于视频文件来说稍微复杂一些.单独的MediaPlayer只能 ...

  8. PBOC2.0安全系列之—脱机认证之静态数据认证(SDA)

    一,什么是PBOC2.0 2005年3月13日,人民银行发布第55号文,正式颁发了<中国金融集成电路(IC)卡规范>(简称PBOC2.0).该规范补充完善电子钱包/存折应用:增加借/贷记应 ...

  9. cdoj 秋实大哥带我飞 最短路走法 含0权边

    //做完这题以后终于理解白书上的边为什么要那样定义了 可以很方便的在o(1) 时间内找到反向边 解法:先跑一边最短路,然后检查最短路上有没有0权边(dfs就好,但是每条边只能走一次,这里就需要用异或找 ...

  10. 二叉查找树的Find,FindMin,FindMax的递归和非递归实现

    typedef struct TreeNode *Position; typedef struct TreeNode *SearchTree; struct TreeNode{ ElementType ...