1. 行内样式

例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>Example inline</title>

</head>

<body bgcolor="#e0f1ff">

<p style="color: #0000FF; font-size: 18px; font-weight: bold;">CSS内容1</p>

<!--字体颜色为蓝色；字号大小为18px；粗体字-->

<p style="color: #000000; text-decoration: underline; font-style: italic;">正文CSS2</p>

<!--字体颜色为黑色；斜体；下划线-->

<P style="color: #FF33CC; font-size: 28px; font-weight: bold;">CSS正文内容3</P>

<!--字体颜色为紫红色；字号大小为28px；粗体字-->

</body>

</html>

运行效果：

总结：行内样式是最简单的CSS使用方法，但由于需要每一个标记设置style属性，后期维护维护成本很高，而且网页体积容易过胖，因此现在很多项目都不再使用该方式。

2. 内嵌式

例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>内嵌CSS</title>

<style type="text/css">

<!--

p{

color: #FF00FF;

text-decoration: underline;

font-weight: bold;

font-size: 25px;

}

-->

</style>

</head>

<body>

<p>紫色、下划线、粗体、字号25px的效果</p>

<p>紫色、下划线、粗体、字号25px的效果</p>

<p>紫色、下划线、粗体、字号25px的效果</p>

</body>

</html>

运行效果：

总结：相对于行内样式来讲，CSS的代码部分被集中在了一个区域，方便后期维护，页面也大大瘦身了。但如果同一个网站有很多页面，对于不同页面上的<p>标记都采用相同风格时，内嵌式的样式也显得略微麻烦，维护成本也是不低。因此内嵌式的方法仅适用于对于特殊页面设置单独的样式风格时使用。

知识点：可以看到上面的代码，<style>标签中间的代码部分使用了注释标记<!-- -->，这是因为在一些比较老的浏览器中，无法识别<style>标签，但它有可能会把<style>标签里面的部分当做正常的文本显示在页面上，所以为了防止这种情况发生，将<style>标签里面的内容用注释标记括起来。

3. 链接式

例：

Html代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>链接式</title>

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

</head>

<body>

<h2>第一行标题</h2>

<p>紫红色、斜体、下划线、28px的效果1</p>

<h2>第二行标题</h2>

<p>紫红色、斜体、下划线、28px的效果2</p>

</body>

</html>

CSS代码：

/*css样式，仅做读书练习使用*/

h2{

color: #0000FF;

}

p{

color: #FF33CC;

text-decoration: underline;

font-style: italic;

font-size: 28px;

}

运行效果：

总结：链接式是项目中最常用的一种方式，它最大的优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的格式风格，如果后续需要更改网站的设计，则只需更改CSS文件即可。

4. 导入样式

与链接样式表的功能基本相同，只是语法和运作方式略有不同。运作区别：import方式导入的样式表会在HTML初始化时，被导入到HTML文件内，作为其中的一部分，类似于内嵌式的效果；而链接式则是在HTML的标记需要格式时才以链接的方式引入。语法区别：import的使用方法如下：

例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>导入样式</title>

<style type="text/css">

<!--

@import url(../css/1.css);

-->

</style>

</head>

<body>

<h2>第一行标题</h2>

<p>紫红色、斜体、下划线、28px的效果1</p>

<h2>第二行标题</h2>

<p>紫红色、斜体、下划线、28px的效果2</p>

<h3>浏览器默认效果</h3>

<p>紫红色、斜体、下划线、28px的效果3</p>

</body>

</html>

运行效果：

总结：@import方式其实和链接式在使用上还是有很大区别的，相比较而言，链接式更节省带宽，用时才会下载样式表，而@import则是只要启用了html文件，就会直接下载样式表。

知识点：由于样式表CSS文件中不能包含任何文档标记，如果有一个外部样式表1需要使用另外一个样式表2中的样式，那么我就可以在表1的顶部，也就是其他规则之前使用@import引入这个样式表2，直接写@import url(2.css);即可。

CSS学习（一）---使用CSS的四种方式的更多相关文章

  1. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

  2. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  3. sess文件编译输出css的四种方式以及使用

    sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...

  4. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

  5. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  6. 从零学习Fluter(八):Flutter的四种运行模式--Debug、Release、Profile和test以及命名规范

    从零学习Fluter(八):Flutter的四种运行模式--Debug.Release.Profile和test以及命名规范 好几天没有跟新我的这个系列文章,一是因为这两天我又在之前的基础上,重新认识 ...

  7. 你知道CSS实现水平垂直居中的第10种方式吗？

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  8. 【Java EE 学习 80 下】【调用WebService服务的四种方式】【WebService中的注解】

    不考虑第三方框架,如果只使用JDK提供的API,那么可以使用三种方式调用WebService服务:另外还可以使用Ajax调用WebService服务. 预备工作:开启WebService服务,使用jd ...

  9. jQuery绑定事件的四种方式：bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  10. ASP.NET MVC之下拉框绑定四种方式（十）

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...

随机推荐

  1. html5只需要<!DOCTYPE HTML>的原因

    首先我们先了解两个东西: SGML:标准通用标记语言(以下简称"通用标言"),是一种定义电子文档结构和描述其内容的国际标准语言:[1]  通用标言为语法置标提供了异常强大的工具,同 ...

  2. C++ 初始化列表（转）

    转载自:http://www.cnblogs.com/graphics/archive/2010/07/04/1770900.html 何谓初始化列表 与其他函数不同,构造函数除了有名字,参数列表和函 ...

  3. UE4 unreliable 同步问题

    今天发现了一个问题,标记为unreliable的函数从来不执行,但是官方文档上的说明是只有在网络负载重时才不执行此类函数,哎哎哎.

  4. .24-浅析webpack源码之事件流compilation(2)

    下一个compilation来源于以下代码: compiler.apply(new EntryOptionPlugin()); compiler.applyPluginsBailResult(&quo ...

  5. Android按下home键后重新打开app进入主activity的问题

    问题阐述: 当我们写一款App的时候,势必会有这种情况:用户已经进行了多级的操作,现返回栈中已存在多个activity,那么这个时候我们想回到最初的activity难道要一层层的返回吗,对用户来说 无 ...

  6. 关于OELD屏显示电池电量的简易方法

    如何采集电源电压大家可能都熟悉,stm32的ADC+DMA能很方便迅速的帮我们采集到自己想要的电压数据.使用DMA进行数据搬运也能很好的减轻CPU的一部分压力.但是这样只是第一步--数据. 用户想看到 ...

  7. Cannot declare class app\home\controller\Cases because the name is already in use

    Cannot declare class app\home\controller\Cases because the name is already in use 命名空间冲突了 use 模型类的时候 ...

  8. BC高精确度函数使用。

    bc是Binary Calculator的缩写.bc*函数的参数都是操作数加上一个可选的 [int scale],比如string bcadd(string $left_operand, string ...

  9. @RequestMapping 相关 spring

    *      * @param request HttpServletRequest     * @param delList 削除Idエスト     * @return 削除結果     * @th ...

  10. 安装新的int 9中断例程

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...