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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS外部样式表</title>
</head>
  <!--引入CSS样式表 -->
<link rel="stylesheet" type="text/css" href="../css/css1.1.css"/>
</style>
<body> <h1>我是大标题哦!</h1> </body>
</html>

css1.1样式表

h1{
font-family: "agency fb";
font-size: 18px;
color: #0000FF;
}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
</head>
<style type="text/css">
div{
widows: auto;
height: 2em;
background: red;
} </style>
<body>
<div>
<p>我是一个div</p>
</div> </body>
</html>

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

<p style="font-size:1cm;color:red;border:1ps solid blue">这是一个段落    </p>

样式的优先级

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

CSS的三种样式表和优先级的更多相关文章

  1. CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  2. css三种样式表写法

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

  3. 大家好,又是新的一天。今天给大家带来一些新的知识:选择器的种类和css的三种样式

    今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...

  4. CSS三种样式表

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

  5. html中css的三种样式

    在html中定义CSS样式的方法有三种,新建CSS文件 使用link 关联 这种是最常用的外部引用样式,第二种讲样式写在 head 头部里面 这种是页面样式 ,第三中样式直接写在行内  style里面 ...

  6. CSS 的三种样式 内联 内部 外部

    CSS:层叠样式表的缩写 就是 Cascading Style Sheets Cascading Style Sheets : 层叠样式表 优先级问题 :遵守就近原则  内联> 内部>外部 ...

  7. CSS的三种样式,有一种你肯定不知道

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者LFuser 正文 新手注意:如果你学习遇到问题找不到人解答,可以点我进裙 ...

  8. 2CSS层叠规则(即引入CSS的三种不同方式的优先级)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. css的三种样式

    1.行间样式 顾名思义就是直接写在div对里面的样式   2.内部样式 把样式写在一对<style></style>标签对中 这个标签对是放在html页面里面的   3.外联样 ...

随机推荐

  1. R中绘制聚类的离散图

    R中利用cluster简单的绘制常见聚类离散图 # 引入cluster库(clara.fanny) library(cluster) # 聚类散点图绘制 # 引入factoextra,cluster库 ...

  2. wireshark udp 序列号 User Datagram Protocol UDP

    序列号等差2^8固定首部20字节首部20+4字节数据部分1378字节片偏移0位Quick UDP Internet

  3. php curl采集数据问题汇总

    1. 使用curl获取网页数据提示: "curl: (6) Could not resolve host: xxx.xxx.com ; Name or service not known&q ...

  4. cocos2d-x-3.0 window+eclipse Android Project 环境与开发新手教程

    今天闲来没事,听说最新cocos2d-x 出新版3.0.所以来学习一下. 大致參考官方教程:http://www.cocos2d-x.org/wiki/How_to_Build_an_Android_ ...

  5. Mac OS X 在 Finder 里快速创建文本文件

    Automator 新建一个 Application   选取:应用程序 实用工具→运行AppleScript 添加一个动作 "Run AppleScript"代码如下: on r ...

  6. hadoop中map和reduce的数量设置

    hadoop中map和reduce的数量设置,有以下几种方式来设置 一.mapred-default.xml 这个文件包含主要的你的站点定制的Hadoop.尽管文件名以mapred开头,通过它可以控制 ...

  7. CentOS7系统上部署.net core程序

    一.准备工作 首先安装 xshell 和 xftp ,前者用于SSH连接Linux服务器,后者用于FTP上传下载文件. xshell和xftp个人使用是免费的,下载地址 之后分别输入用户名和密码登录主 ...

  8. 接口测试之接口api文档的重要性

    接口文档的特点 接口文档,顾名思义就是对接口说明的文档.好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能编写出一个个的测试用例.而且接口文档详细的话,测试用例编写简单,不会 ...

  9. 3.8 Templates -- Actions

    一.The {{action}} Helper 你的应用程序通常会需要一种方法来让用户用控件交互改变应用程序状态. 例如,你有一个显示blog post的模板,并支持用额外的信息扩展post. 可以使 ...

  10. laravel 项目部署注意事项

    1.'Failed to open stream: Permission denied' error - Laravel Laravel >= 5.4 php artisan cache:cle ...