CSS学习摘要-引入样式
CSS学习摘要-引入样式
注:主要是摘录自MDN 网络开发者这个网站的。
CSS 实际上如何工作?
当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:
- 浏览器将 HTML和 CSS转化成 DOM(文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
- 浏览器显示 DOM 的内容。
如何将你的 CSS 应用到你的 HTML 上
这有你常见的三种不同方式将 CSS 应用到 HTML 文档上,有的方式比其他方式更有用。在这里,我们将简要回顾一下每一种方式:
外部样式表 (推荐)
你已经在这篇文章看到了外部样式表,但是并不知道它的名字。外部样式表是指:当你将你的 CSS 保存在一个独立的扩展名为 .css 的文件中,并从HTML的 <link>
元素中引用它。
<link rel="stylesheet" href="style.css">
HTML 中元素指定了外部资源与当前文档的关系。
这个元素的用途包括为导航定义一个关系框架。这个元素经常用来链接样式表(如CSS文件)。
此时 HTML 文件看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
以及下面的 CSS 文件
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
这种方法可以说是最好的,因为你可以使用一个样式表来设置多个文档的样式,并且需要更新 CSS 的时候只要在一个地方更新。
另:外部样式表-导入式
和link有一点点 不同,使用的是@import url
外接样式表。
<style type="text/css">
@import url('./index.css');
</style>
内部样式表
内部样式表是指不使用外部 CSS 文件,而是将你的 CSS 放置在<style>
元素中,(HTML的<style>
元素包含了文档的样式化信息或者文档的一部分,该标签的样式信息通常是CSS的格式。) 该元素包含在 HTML head
内。
此时HTML看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
这在某些情况下很有用(也许你正在使用一个内容管理系统,不能直接修改 CSS 文件),但它不如外部样式表高效 —— 在网站中,CSS 将需要在每个页面重复,并且需要更新时要更改多个位置。
内联样式
内联样式是仅影响一个元素的CSS声明,被 style
属性包括着:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
除非有必要,否则不要这么做!这很难维护(你可能不得不在每份文档里更新多次同样的信息),并且它还混合了 CSS 表示的样式信息和 HTML 的结构信息,使 CSS 难以阅读和理解。保持不同类型代码的分离和纯净使处理该代码的任何人工作更为容易。
您唯一可能需要使用内联样式是当您的工作环境真的非常受限(也许您的CMS只允许您编辑 HTML 的 body)。
总结
在HTML中引入css方式总共有三种:
- 行内样式
style
- 内接样式
<style>
- 外接样式 (推荐规范)
3.1 链接式(link
)
3.2 导入式(@import url
)
end
2018-05-30
CSS学习摘要-引入样式的更多相关文章
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- CSS学习摘要-定位
CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...
- CSS 四种引入样式表优缺点分析
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...
- 【CSS学习】--- 字体样式
一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
- CSS学习摘要-层叠和继承
当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...
- CSS学习笔记之样式声明
目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...
- CSS学习摘要-盒子模型
注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
- CSS学习摘要-语法和选择器
主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...
随机推荐
- Java并发编程笔记之ThreadLocalRandom源码分析
JDK 并发包中 ThreadLocalRandom 类原理剖析,经常使用的随机数生成器 Random 类的原理是什么?及其局限性是什么?ThreadLocalRandom 是如何利用 ThreadL ...
- 根据模板导出excel
@RequestMapping(value = "/export", method = RequestMethod.GET) public void exportApprovals ...
- VM CentOS7 网络配置问题汇总
0. 前言 在进行配置之前,我们首先需要明确几个概念: I. VM的网络连接方式 ①. 桥接模式(Bridge) 此模式下,VM centOS 在网络中作为一台独立主机存在,它可以访问网络中的任何 ...
- 多条件搜索问题 -sql拼接与参数化查询
来源:传智播客 免费开发视频. 问题:根据书名或出版社或作者查询书籍信息. using System; using System.Collections.Generic问题; using Syste ...
- rabbitmq不同模式的交换机使用
交换机的功能主要是接收消息并且转发到绑定的队列,交换机不存储消息,在启用ack模式后,交换机找不到队列会返回错误.交换机有四种类型:Direct, topic, Headers and Fanout( ...
- [日常] 搭建golang开发环境
下载目录:https://studygolang.com/dl32位选 go1.10.linux-386.tar.gz64位选 go1.10.linux-amd64.tar.gz uname -a查看 ...
- JS 重写alert,使之能输出多个参数
windows._alert = windows.alert; windows.alert = function(){ _alert = (Array.prototype.slice(argument ...
- JSONArray排序[收藏]
问题 JSONArray中嵌套JSONObject, 对JSONArray进行排序 排序前: [{"id":1,"name":"ljw"}, ...
- Golang 使用FreeType-go进行字体
FreeType库(http://www.freetype.org/)是一个完全免费(开源)的.高质量的且可移植的字体引擎,它提供统一的接口来访问多种字体格式文件,包括TrueType, O ...
- DW如何打开已经关闭的站点文件提示框
DW在已经新建成功站点后,若将站点文件提示框关闭后,如何重新打开呢?即如下图所示的提示框: 点击站点下拉菜单中的‘在站点定位’即可打开关闭的提示框.