如何插入样式表

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
　　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
注：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

CSS学习（3）样式表的更多相关文章

  1. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  2. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  3. CSS重构：样式表性能调优

    这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...

  4. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  5. 网页制作之html基础学习3-css样式表

    样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /*  */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...

  6. CSS三种样式表

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  7. css选择器，样式表导入

    css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 ...

  8. Normalize.css重置化样式表

    Normalize.css是一种CSS reset的替代方案.它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML ...

  9. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  10. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

随机推荐

  1. Wannafly Camp 2020 Day 2H 叁佰爱抠的序列 - 欧拉遍历

    转化为完全图的欧拉遍历 如果 n 是奇数,则欧拉遍历长度为 \(n(n-1)/2\) 条边 如果 n 是偶数,则欧拉遍历长度为 \(n*n/2-1\) 条边 (即将(n-1)/2对点配对,剩下的一对当 ...

  2. dubbox生产者与消费者案例

    一.首先要将dubbox添加到本地maven仓库     参考: https://blog.csdn.net/try_and_do/article/details/83383861     二.目录结 ...

  3. Ubutu安装oracle jdk1.8

    环境: Ubuntu 18.04 LTS x64位 系统用户  hou 工具: jdk-8u171-linux-x64.tar.gz 实验的心 步骤: 第一步: 查看有没有装jdk,按住  ctr+a ...

  4. 互联网的“ip分组交换技术”

    (1)从名字分析 从“ip分组交换”这个名字中,我们看看涉及哪些事情. 1)交换 主要涉及两类交换. · 交换机:负责网内部数据交换 · 路由器:负责网间的数据交换. ip分组交换技术的核心就是路由器 ...

  5. 网络编程UDP、TCP详解

    网络编程   网络编程主要用于解决计算机与计算机(手机.平板-)之间的数据传输问题. 1.InetAddress(IP类)   方法: 方法 描述 getLocalHost() 获取本机的IP地址对象 ...

  6. RN开发-Flex

    1.容器属性        (1). display : flex | inline-flex (块级伸缩容器 | 行内级伸缩容器)        (2). flex-direction : row ...

  7. 解决 IDEA 无法提示导入 java.util.Date 的问题

    之前有一段时间在使用IDEA的时候,发现通过快捷键Alt + Enter导入并没有提示有java.util.Date的包,仅仅只有java.sql.Date的包.于是每次使用都需要通过手写import ...

  8. python3练习100题——003

    今天继续-答案都会通过python3测试- 原题链接:http://www.runoob.com/python/python-exercise-example3.html 题目:一个整数,它加上100 ...

  9. c数据结构 -- 栈与队列

    栈和队列 ·栈和队列是两种常用的.重要的数据结构 ·栈和队列是限定插入和删除只能在表的“端点”进行的线性表 栈 只能在队尾插入,只能在队尾删除 -- 后进后出 表尾称为栈顶:表头称为栈底 插入元素到栈 ...

  10. 2 request的get和post方法

    requests的get方法 1 在百度里面查询关键字的方法,并获取带百度当前页面 import requests keywords = input('请输入>>>').strip( ...