CSS学习摘要-引入样式

注:主要是摘录自MDN 网络开发者这个网站的。

CSS 实际上如何工作?

当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:

  1. 浏览器将 HTML和 CSS转化成 DOM(文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
  2. 浏览器显示 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方式总共有三种:

  1. 行内样式 style
  2. 内接样式 <style>
  3. 外接样式 (推荐规范)

      3.1 链接式(link

      3.2 导入式(@import url

end

2018-05-30

CSS学习摘要-引入样式的更多相关文章

  1. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  2. CSS学习摘要-定位

    CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...

  3. CSS 四种引入样式表优缺点分析

    CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...

  4. 【CSS学习】--- 字体样式

    一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...

  5. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  6. CSS学习摘要-层叠和继承

    当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...

  7. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  8. CSS学习摘要-盒子模型

    注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...

  9. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

随机推荐

  1. 链式编程:遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)

    public class NutritionFacts { private final int servingSize; private final int servings; private fin ...

  2. Hive中自定义Map/Reduce示例 In Python

    Hive支持自定义map与reduce script.接下来我用一个简单的wordcount例子加以说明.使用Python开发(如果使用Java开发,请看这里). 开发环境: python:2.7.5 ...

  3. volatile特性

    volatile保证可见性 一旦一个共享变量(类的成员变量.类的静态成员变量)被volatile修饰之后,那么就具备了两层语义: 1)保证了不同线程对这个变量进行操作的可见性,即一个线程修改了某个变量 ...

  4. mybatis在oracle中的分页扩展

    applicationContext.xml <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlS ...

  5. CSS实现跨浏览器兼容性的盒阴影效果

    .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3 ...

  6. SESSION机制(转)

    转自:http://www.cnblogs.com/zyf-zhaoyafei/p/4477175.html 一:Session与Cookie Session:在服务器端创建并存放在服务器的内存中的, ...

  7. 自定义指令directive基础用法

    官方链接:http://doc.vue-js.com/v2/guide/custom-directive.html#simplest-directive-example 在main.js中注册自定义指 ...

  8. 解决ubuntu使用命令sudo apt -get install 安装东西时出现"E: Sub-process /usr/bin/dpkg returned an error code (1) "的错误

    问题描述: 今天在使用命令 "sudo apt-get install python3-pip"安装时,总是出现如下图这样的错误,开始以为是以为自己python版本的问题,后来发现 ...

  9. elixir 模块

    模块定义  defmodule 函数定义  def 私有函数  defp  --相当于其他语言 private iex(29)> defmodule Math do...(29)> def ...

  10. 润乾在东方通tongweb5.0上部署手册

     作为国内领先的中间件开发商,东方通是国内最早研究J2EE技术和开发应用服务器产品的厂商.应用服务器TongWeb的开发目标,是利用公司在中间件 领域的技术优势,实现符合J2EE规范的企业应用支撑 ...