第一章 CSS和文档

向HTML文档中引入CSS常见有四种方法:

1. <link>标签:

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/ title="" />
自封闭标签,写在<head>元素中。

  • rel:关系
  • type:类型
  • href:需要链接的文件路径
  • media:表现媒体
media的值 含义
all 所有媒体
print 打印文档时,包括打印预览
screen 屏幕媒体
aural 语音媒体(语音合成器、屏幕阅读器等)

2. @import 指令:

<style type="text/css">
@import url(styles.css);
...
</style>

放在style容器中,用于加载一个外部样式表,必须放在其他CSS规则之前。不同于link出现多条会覆盖,而是当有多条@import指令时会全部加载,合并使用。

3. 内部CSS样式

<style type="text/css">
  body {
    background: white;
    color: gray;
}
</style>

style容器常放在head里,style容器中的代码直接使用CSS语法。

4. 内联CSS样式

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
将样式规则直接写在标签的style属性里。这种写法的CSS拥有最高优先级,但这种写法一方面会使得页面代码混乱,不便于阅读与后期维护,另一方面会损失掉CSS可以对多个元素统一管理样式的优势,所以不建议使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • 一、html结构化 -> html结构化 + 外在表现(样式标签) -> 混乱 二、术语 1.替换和非替换:替换元...
    写代码写到人生巅峰阅读 194评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,621评论 32 459
  • 最近在看html基础,好吧,写点笔记,比较low见谅,反正我自己看懂就行了 CSS基础 1、css简介 casca...
    小龙是只猫阅读 602评论 0 1
  • 从2010年开始,智能手机就成为用户最宠爱的终端设备之一。到2014年更是迎来一次大规模爆发,到了今天… 标配:人...
    城东那个小丑阅读 430评论 4 5