(仅供自己备份) 原文地址：http://blog.csdn.net/chq11106004389/article/details/50515717

CSS的组成 选择符/选择器+声明（属性+值）

选择符/选择器，指明网页中要应用样式规则的元素，如本例中是p是选择器,它的文字将变成蓝色，而其他的元素（如ol）不会受到影响

声明：当有多条声明时，中间可以英文分号“;”分隔

--------------------------------------------------内联式CSS ---来自慕课--------------------------------------------------------------------------------------------------------------------------------------------

CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式表就是把css代码直接写在现有的HTML标签（如p,span...etc）中，如：<pstyle="color:red;font-size:12px">这里文字是红色。</p>

  • 注意要写在元素的开始标签里，下面这种写法是错误的： <p>这里文字是红色。</pstyle="color:red;font-size:12px">
  • 并且css样式代码要写在style=""双引号中

<body>
    <p>这短话是例子，<span style="color:green">这句话会变成绿色</style></span>，<span>但是这句话不会变成绿色</span>。哇卡卡卡！</p>
</body>

-----------------------------------嵌入式CSS ---来自慕课--------------------------------------------------------------------------------------

嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如图代码将把多个<span>标签中的文字统一设置为红色：

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

-------------------------------外部式CSS ---来自慕课------------------------------------------------------------------------------------

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

  • css样式文件名称以有意义的英文字母命名，如 main.css。
  • rel="stylesheet" type="text/css" 是固定写法不可修改。
  • <link>标签位置一般写在<head>标签之内。

-------------------------------------------------对比 ---来自慕课--------------------------------------------------------------

这三种样式是有优先级的，记住他们的优先级内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？在后面的9-2小节中会讲解到。

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

转载：CSS的组成,三种样式(内联式,嵌入式,外部式),优先级的更多相关文章

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

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

  2. 《转载》CSS中的三种样式来源：创作人员、读者和用户代理

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...

  3. CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

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

  4. css代码插入三种方式

    1．内联式 <p style="color:red;font-size: 12px">iutt</p> 2．嵌入式 <style type=" ...

  5. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  6. css三种样式表写法

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

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

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

  8. HTML三种样式引入方式

    HTML三种样式引入方式   HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...

  9. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

随机推荐

  1. javascript fundamental concept

    http://hzjavaeyer.group.iteye.com/group/wiki?category_id=283 上面这个url非常适合javascript初学者阅读,感谢原作者的分享 什么是 ...

  2. Oracle数据库从入门到精通 单行函数问题

    视频课程:李兴华 Oracle从入门到精通视频课程 学习者:阳光罗诺 视频来源:51CTO学院 Oracle数据库从入门到精通-单行函数 在数据库中,为了方便用户的数据开发,往往会提供一系列的支持函数 ...

  3. 使用POI解析Excel时，出现org.xml.sax.SAXParseException: duplicate attribute 'o:relid'的解决办法

    1.使用org.apache.poi解析excle,.xlsx类型文件InputStream is = new FileInputStream(strFileName);XSSFWorkbook wb ...

  4. Newtonsoft.Json code

    序列化 Product product = new Product(); product.ExpiryDate = new DateTime(2008, 12, 28); JsonSerializer ...

  5. Python初学者第五天 列表及简单操作

    5day 数据类型:列表 1.创建列表 user = ['aa','14',1,10,'aa',1,2,3,3,5,9] n = [] list() m = list() 2.查询 a.按索引查询 b ...

  6. SVN学习---使用 Visual SVN 搭建SVN服务器

    1.1. 使用 Visual SVN 搭建SVN服务器 搭建纯粹SVN服务器 --- svn:// 访问资源 将SVN 和 Apache服务器整合 ,搭建web SVN服务器 ----  https: ...

  7. 自动备份软件 —— Syncovery 7.98s Pro/Enterprise

    SynCovery自动备份软件原名Super Flexible Synchronizer,是目前功能最为强大的实时自动备份工具,连FTP.WebDAV等全部支持!最近从V6开始改用比较好记.易懂的新名 ...

  8. springMVC文件上传大小超过限制的问题

    [转自]https://my.oschina.net/ironwill/blog/646762 springMVC是一个非常方便的web层框架,我们使用它的文件上传也非常的方便. 我们通过下面的配置来 ...

  9. vs使用libevent

    1.下载最新libevent-2.1.8-stable,并解压 2.使用vs2013 工具这里使用x64,这里更新一下,改为使用x86 进入到libevent目录 运行 nmake /f Makefi ...

  10. springboot集成swagger2构建RESTful API文档

    在开发过程中,有时候我们需要不停的测试接口,自测,或者交由测试测试接口,我们需要构建一个文档,都是单独写,太麻烦了,现在使用springboot集成swagger2来构建RESTful API文档,可 ...