(仅供自己备份) 原文地址：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. RabbitMq ack 与 nack

    1.ack 移除 2.nack 移除再次发送队列

  2. LINQ学习笔记（一）基本语法

    1.LINQ简介 LINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.包括五个部分:LINQ to Objects.LINQ to DataSe ...

  3. 关于cmake输出动态链接库名字的问题

    使用cmake进行项目编译管理时,我们经常使用 add_library(foo SHARED foo.cpp) 这样的话,输出时,如果在win下面会得到foo.dll,linux下面会得到libfoo ...

  4. SharpZipLib压缩解压

    一.介绍 SharpZipLib是一个完全由C#编写的ZIP,GZIP,Tar和BZIP2 Library,可以方便的支持这几种格式的压缩和解压缩. https://github.com/icshar ...

  5. Android（java）学习笔记208：Android下的属性动画高级用法（Property Animation）

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

  6. 总结一下MVC思想

    MVC (Model View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...

  7. 简要总结 数据仓库VS数据库

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wl101yjx/article/details/31015367 本文简要总结以下两个问题,旨在高速 ...

  8. 牛客网多校训练第一场 D - Two Graphs

    链接: https://www.nowcoder.com/acm/contest/139/D 题意: 两个无向简单图都有n(1≤n≤8)个顶点,图G1有m1条边,图G2有m2条边,问G2有多少个子图与 ...

  9. Windows 使用iCloud日历

    作者:Lumos Night链接:https://www.zhihu.com/question/34287617/answer/97299386来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  10. springmvc进阶（5）：mvc:default-servlet-handler详解

    我们在配置dispatchServlet时配置<url-pattern>/</url-pattern>拦截所有请求,这时候dispatchServlet完全取代了default ...