(仅供自己备份) 原文地址：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. Sql Server 如何去掉内容里面的Html标签

    DECLARE @str NVARCHAR(MAX)= ' <!DOCTYPE html> <html> <head> </head> <body ...

  2. pt-mysql-summary

    pt-mysql-summary主要用来输出MySQL的基本信息,可以作为数据库巡检以及刚开始熟悉数据库环境时候进行使用: [root@mxqmongodb2 bin]# ./pt-mysql-sum ...

  3. 事件循环进阶：macrotask与microtask

    这段参考了参考来源中的第2篇文章(英文版的),(加了下自己的理解重新描述了下), 这里没法给大家演示代码,我就简单说下我的理解吧. promise和settimeout 在一起的时候执行顺序是个有意思 ...

  4. @vue-cli3配合element和scss打包的配置

    @vue-cli3配合element和scss打包的配置 标签(空格分隔): Vue 使用@vue-cli3初始化项目,且使用ElementUI,然后按照官方文档自定义主题. 自己的scss全局变量文 ...

  5. 看了xici有写给孩子的信，maybe我也要写给孩子一些东西了

    看了xici有写给孩子的信,maybe我也要写给孩子一些东西了

  6. 通过ajax获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示

      { "data": "268" } json数据 <!DOCTYPE html> <html> <head lang=&quo ...

  7. webConfig详细跳转配置.[转]

    站更换域名,把旧域名用301指到新域名来. 从iis中设置url永久转向就可以,看上去很容易,用了一会儿才发现,参数都没有带上. 从微软网站上找到如下说明,果然好使: 重定向参考 (IIS 6.0,7 ...

  8. PHP------------正则表达式应用——实例应用

    正则表达式应用——实例应用     1.验证用户名和密码:("^[a-zA-Z]\w{5,15}$")正确格式:"[A-Z][a-z]_[0-9]"组成,并且第 ...

  9. 19、配置嵌入式servlet容器(下)

    使用外置的Servlet   嵌入式Servlet容器:应用打成可执行的j ar 优点:简单.便携: 缺点:默认不支持JSP.优化定制比较复杂         使用定制器[ServerProperti ...

  10. FreeMarker之根据模型生成HTML代码

    FreeMarker之根据模型生成HTML代码与FreeMarker根据模型生成Java代码,本质上是一样的,关于生成Java代码可以参考我的这篇文章:FreeMarker之根据模板生成Java代码 ...