CSS---基础外部样式表
<link rel="stylesheet" type="text/css" href="style.css" media="all">
1.CSS用link来链接样式表和文档。link需要放到head元素中,但不能放到其他元素内部。
对于CSS文档,type总是设置为text/css。这个值描述了使用link标记加载的数据类型。
href属性值可以是绝对的URL也可以是相对的。
media属性:
all:用于所有表现的媒体。
screen:在屏幕媒体(如桌面计算机监视器)中表现文档使用。在这种系统上运行所有web浏览器都是屏幕媒体的用户代理。
print:为视力正常的用户打印文档使用,另外还会在显示文档的“打印预览”时使用。
projection:用于投影媒体,如发表演讲时显示幻灯片的数字投影仪。
rel的属性值定为"alternate stylesheet"就可以定义候选样式表了。
<style type="text/css">
@import url(styles.css) all;
@import url(styles.css) projection,print;
@import url(http://example.org/library/styles.css);
</style>
2.style一定要用type属性。@import用于指示web浏览器加载一个外部样式表。必须写在其他CSS规则之前,之后兼容用户代理就会将其忽略。
文档中可以有不只一个@import语句,但是不同与link,每个@import样式表都会加载并使用,所以额发指定候选式样表。
与link一样,可以限制所导入的样式表应用于一种或多种媒体。
如果有一个外部样式表,它需要使用其他外部样式表中的样式。此时@import就非常有用。由于外部样式表不能包含任何文档标记,所以不能用link元素。
3.如何让较老的浏览器也能访问自己的文档
如果一个浏览器无法识别<style>和</style>就会将其统统忽略,不过这些标记中的声明不一定会忽略,因为对于浏览器而言,它们看上去就像是正常的文本。所以样式的声明会出现在页面的最上面。(当然,浏览器应该忽略这些文本,因为这不是body元素的一部分,但是事实总是相反)。解决这个问题的办法,建议将声明包含在一个注释标记中。
<style type="text/css"><!--
@import url(style.css);
h1{
color: azure;
}
--></style>
4.style属性可以与任何HTML标记关联。一个内联style属性中只能放一个声明块,而不能放整个样式表。不能在style属性中放@import,也不能包含完整的规则。style属性值只能是规则中出现在大括号之间的部分。
5.从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。他们的优先级:内联式 > 嵌入式 > 外部式。但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
CSS---基础外部样式表的更多相关文章
- HTML&CSS基础-外部样式表
HTML&CSS基础-外部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,有2个文件 p { color:pink; font-size:40px; ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- css基础-语法篇
CSS基础 1.css简介 cascading style sheets 汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- css基础内容
css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...
随机推荐
- 1.基础数据类型的初识 字符串 bool 整型 if else elif
---恢复内容开始--- 计算器基础知识 cpu :人类的大脑 运算和处理问题 内存:临时存储数据 断点就消失了 高铁 硬盘:永久存储数据 图片 操作系统:是一个软件 控制每个硬件之间的数据交互 Py ...
- 【算法】LRU算法
缓存一般存放的都是热点数据,而热点数据又是利用LRU(最近最久未用算法)对不断访问的数据筛选淘汰出来的. 出于对这个算法的好奇就查了下资料. LRU算法四种实现方式介绍 缓存淘汰算法 利用Linked ...
- RobotFramework自动化测试框架(3)- RobotFramework扩展测试库、资源文件、变量文件
扩展测试库 扩展测试库可使用python或java语言编写.后直接导入需要使用的测试用例文件即可. 具体的实现和操作,后续补充.请参考官网. 资源文件 在资源文件中定义用户关键字,它提供了共享机制,即 ...
- django_models表设计
和很多现代的web框架一样,django依赖于强大的数据访问层,试图将python面向对象特性和关系型数据库联系起来. 可移植性:不同的数据库,可以使用同一段代码,不用关心后台是哪家的数据库. 在一个 ...
- PTA天梯赛训练题L1-064:估值一亿的AI核心代码(字符串模拟)
Update:smz说regex秒过Orz,yzd记在这里了. 听说今年天梯赛有个烦人的模拟,我便被队友逼着试做一下……一发15,二发20.记一记,要不然枉费我写这么久…… 自己还是代码能力太菜了,校 ...
- 贪心 Codeforces Round #297 (Div. 2) C. Ilya and Sticks
题目传送门 /* 题意:给n个棍子,组成的矩形面积和最大,每根棍子可以-1 贪心:排序后,相邻的进行比较,若可以读入x[p++],然后两两相乘相加就可以了 */ #include <cstdio ...
- Vue不兼容IE8原因以及Object.defineProperty详解
Vue不兼容IE8原因以及Object.defineProperty详解 原因概述: Vue.js使用了IE8不能模拟的ECMAScript5特性. Vue.js支持所有兼容ES5的浏览器. Vue将 ...
- php一致性hash性能测试(flexihash/memcache/memcached)
一致性hash的使用在PHP中有三种选择分别是原生的memcache扩展,memcached扩展,还有一个是网上比较流行的flexihash类. 最近有项目需要使用flexihash类操作memcac ...
- AJPFX辨析Java中运算符 ++ 和 += 的区别
我们都知道Java中 ++ 和 +=1 都是把数字增加一后,把值赋给左边,那二者有什么区别呢? i+=1 运行的底层Heap申请一个区域存放i,在数据区域开劈一个区域存放1,2个内存段被数据被送入到 ...
- 【转】哪个更快:Java堆还是本地内存
译文出处: shenzhang 原文出处:原文链接 使用Java的一个好处就是你可以不用亲自来管理内存的分配和释放.当你用new关键字来实例化一个对象时,它所需的内存会自动的在Java堆中分配.堆 ...