当浏览器读到一个样式表时，浏览器会根据这个样式表来格式化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. 【JS】导出table到excel，同时兼容FF和IE

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. SpringMVC(三) —— 参数绑定和数据回显

    参数绑定的过程:就是页面向后台传递参数,后台接受的一个过程. 默认支持的参数类型:(就是你在方法上以形参的形式去定义一下的类型,就可以直接使用它) HttpServletRequest HttpSer ...

  3. mysql学习（十二）内置函数

    常用的内置函数,常用select\ 字符串函数 contat('' , '', .....) //连接字符串 select concat(name, ' age is ', age) from per ...

  4. Android之 compileSdkVersion, minSdkVersion, and targetSdkVersion

    在一年之中,也有可能只是几个月后,你会发布你的Android应用程序.但是这中间有可能会发布新的版本的Android系统,比如:6.0+. 你肯定希望你的应用可以向前兼容,当用户升级到新的Androi ...

  5. 判断用户是pc访问还是手机访问

    前天因为手机页面中点击无法链接53客服,就研究了下怎样通过js判断,用户是拿手机(ipad)访问,还是pc端访问, 如果是手机访问的话只需把链接通过attr修改a的链接地址~ <a class= ...

  6. 嵌入式平台使用gtest进行白盒测试

    看了coderzh大神写的gtest(http://www.cnblogs.com/coderzh/archive/2009/04/06/1426755.html)使用的帖子,觉得gtest这个工具比 ...

  7. 2-4. BCD解密(10)

    BCD数是用一个字节来表达两位十进制的数,每四个比特表示一位.所以如果一个BCD数的十六进制是0x12,它表达的就是十进制的12.但是小明没学过BCD,把所有的BCD数都当作二进制数转换成十进制输出了 ...

  8. vc++深入跟踪MFC程序的执行流程

    在MFC程序设计的学习过程中最令人感到难受,甚至于有时会动摇学习者信心的就是一种对于程序的一切细节都没有控制权的感觉.这种感觉来源于学习者不知道一个MFC程序是如何运行起来的(即一个MFC程序的执行流 ...

  9. Eclipse安装Weblogic插件

    1.启动Eclipse,打开window>References>server>Runtime server. 2.点击“add”按钮,添加新的web服务器. 注:上图Oracle是W ...

  10. 【Stackoverflow好问题】Java += 操作符实质

    问题 直到今天,我都一直以为: i += j 等同于 i = i + j; 但如果有: int i = 5; long j = 8; 这时 i = i + j不能编译.但i += j却能够编译.这说明 ...