(仅供自己备份) 原文地址：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. Java SpringMVC学习--基础配置

    快速开始一个基于SpringMVC框架的web项目 开发工具 Eclipse neon.2 运行环境 tomcat8.5 1.在Eclipse中新建一个web项目:File-New-Dynamic W ...

  2. linux命令整理

    Linux系统命令 1. ls 查看某个 目录下 所有文件的大小总和 ls -lR| awk 'BEGIN{size=0;} /^[-l]/{size+=$5;print $0;} END{print ...

  3. css z-index层重叠顺序

    一.z-index语法与结构 z-index 跟具体数字 如:div{z-index:100}注意:z-index的数值不跟单位. z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数) ...

  4. EDM邮件群发：群发邮件不进垃圾箱的独家秘笈

    EDM邮件群发想要群发的邮件避免进入垃圾箱,不仅需要优化邮件内容和主题,管理收件人邮箱列表,还要有多服务器IP分流技术,控制发信速度,打乱收件人列表等手段,当然更少不了借助专业的邮件群发平台譬如U-M ...

  5. java学习第一步，使用IntelliJ IDEA编写自己的第一个java程序

    首先下载java的jdk,然后说一下IDEA的配置 IntelliJ IDEA目前公认的最好的java开发工具,不过一般的学校的教学还是使用eclipse来进行java的开发.所以老师一般只会教你如何 ...

  6. 使用commons-fileupload-1.2.1.jar等组件实现文件上传

    使用的主要jar包:commons-io-1.3.2.jar包;commons-fileupload-1.2.1.jar包:commons-lang-2.3.jar,在使用组件实现文件上传时候要注意前 ...

  7. HDOJ 1528 Card Game Cheater

    版权声明:来自: 码代码的猿猿的AC之路 http://blog.csdn.net/ck_boss https://blog.csdn.net/u012797220/article/details/3 ...

  8. 八.安装Nginx

    http://blog.csdn.net/grhlove123/article/details/47834673

  9. BZOJ3790:神奇项链(Manacher)

    Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字 母组成的字符串,每个小写字母表示一种颜色.为了制作这个项链,小 H 购买了两个机器.第一个机器可 ...

  10. 几句代码简单实现IoC容器

    前言 最近在调试EasyNetQ代码的时候发现里面有一段代码,就是IoC容器的简单实现,跟着他的代码敲了一遍,发现了奇妙之处.当然也是因为我才疏学浅导致孤陋寡闻了.他的思路就是通过动态调用构造函数生成 ...