从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式、嵌入式和外部式三种。

1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码:

<p style="color:red";font-size:12px>这里文字是红色。</p>

2:嵌入式,嵌入式css样式。就是能够把css样式代码写在<style type="text/css">XXX</style>标签之间。

<head>
<style type="text/css">
span{
color:red;
}
</style> </head>

3:外部式css样式,写在单独的一个文件里.

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

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

注意:

1、css样式文件名以有意义的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可改动。

3、<link>标签位置一般写在<head>标签之内。

这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式。可是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。

事实上总结来说,就是--就近原则(离被设置元素越近优先级别越高)

但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的同样权值的情况下。

CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级的更多相关文章

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

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

  2. 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

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

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

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

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

  5. html中css的三种样式

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

  6. CSS的三种样式表和优先级

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

  7. css的三种样式

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

  8. 引入CSS的三种方式

    虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...

  9. CSS选 择器 三种样式

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

随机推荐

  1. WinSock网络编程基础(2)客户端

    接下来说一下如何用WinSock创建基于TCP/IP模型的客户端和服务器. TCP可以提供两个计算机间可靠无误的数据传输,应用程序使用TCP通信时,会在两台计算机之间建立一个虚拟连接,连接之后计算机之 ...

  2. BZOJ 1208: [HNOI2004]宠物收养所(BST)

    本来想先用set写一遍,再自己写个splay或treap,不过用set过了之后就懒得去写了....以后有空再来写吧..(不会有空的吧= = ------------------------------ ...

  3. python笔记之第一次使用(未入门)

    刚开始学习python,之前完全没有接触,在这里写下自己学习python的过程和心得. 首先,安装python,打开官网:http://python.org.点击Download.我选择了3.5.1版 ...

  4. ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能

    首先放出该插件的下载地址:http://pan.baidu.com/s/1Aa3yD,里面有帮助文档,详细了解可以自行下载学习,本章只讲解一些基本的验证功能,页面代码如下: <%@ Page L ...

  5. 项目管理软件伙伴https://www.huobanyun.cn/

    现在项目管理软件市面上很多,但能够完全适合每家公司需求的比较难找,因为众口难调,每家公司都有自己的特殊情况,所以,建议考虑下有比较齐全的基础功能的标准化软件产品,同时又在项目管理开发能力上比较突出. ...

  6. Delphi的MDI编程中遇到的一个奇怪问题(值得研究的一个问题)

    近日在用delphi写一个多文档应用程序,除了一个主界面是自动生成的,其他功能页面全部都是通过Application.CreateForm()动态生成的,也就是说在ProjectManager中点击程 ...

  7. Laravel后台 + AngularJS前端 的网站构建与维护

    最近维护的报修网站,采用Laravel+AngularJS框架搭建,还有很多东西需要熟悉掌握,现将修复的Bug或添加的功能中值得记录的地方总结如下. 其中,需要注意的问题基本是原因不明且不是太严重的问 ...

  8. BZOJ 1062

    program candy bzoj1062; ; maxm=; maxn=; var n,len,m,i,p,t,l,r,c,d,q:longint; s:..,..maxn,..maxm] of ...

  9. SpringMVC静态文件(图片)访问+js访问 简单小例子

    项目文件布局: web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app vers ...

  10. poj 2411 Mondriaan's Dream 轮廓线dp

    题目链接: http://poj.org/problem?id=2411 题目意思: 给一个n*m的矩形区域,将1*2和2*1的小矩形填满方格,问一共有多少种填法. 解题思路: 用轮廓线可以过. 对每 ...