1.内联式：直接在标签上写样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css页面引入方法</title>

 </head>

 <body>

     <div style="color: red ;font-size:50px">css页面引入方法</div>

 </body>

 </html>

　　如上面的代码所示，在div标签内直接通过styl属性直接写样式。那么这里我们设置了字体的颜色为红色，字体大小为50px。

看一下显示出来的效果。

　　　　这种方法在开发中是最不常用的一种，因为在标签内写方法会让代码看起来很乱，而且也不利于管理和查找，所以只有在某些情况下才会使用这种方式来写样式。

2.嵌入式：通过style标签来写样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css页面引入方法</title>

    <style type="text/css">

        div{

            color: green;

            font-size: 50px;

        }

    </style>

</head>

<body>

    <div>css页面引入方法</div>

</body>

</html>

　　可以看到我在head中用style标签写了一个样式出来，通过选择器选择器来将样式加入到页面中。看一下效果。

　　　这种方法是比较常用的一种，一般在写首页的时候通常会用到这种方式，因为网站首页加载快慢会直接影响用户的体验，所以网页的加载速度就要快。那么这种方式不会影响加载速度，又将样式整合到了标签中，所以是比较适用的。但是也不会大量的使用。最后一种才是我们经常用的方式。

3.外联式：通过link标签将样式添加到页面上

main.css

 div{

     font-size: 50px;

     color: blue;

 }

code.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css页面引入方法</title>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

    <div>css页面引入方法</div>

</body>

</html>

　　我们可以看到这次用了两个文件，一个是css文件，一个是html文件。css文件里写的东西和style标签中的写法是一模一样的。只是单独写在一个文件中。然后通过link标签将css样式文件引入到页面。rel里面的东西我们不用管，herf中的路径就是css文件的逻辑路径。我们看一下效果。

　　这种方法才是开发中最常用的办法。好处显而易见，比如，低耦合，整洁，条理清晰。

css引入页面的三种方法的更多相关文章

  1. asp.net跳转页面的三种方法比较

    目前,对于学习asp.net的很多朋友来讲,实现跳转页面的方法还不是很了解.本文将为朋友们介绍利用asp.net跳转页面的三种方法,并对其之间的形式进行比较,希望能够对朋友们有所帮助. ASP.NET ...

  2. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  3. asp.net跳转页面的三种方法比较(转）

    2006-10-20 14:32 [小 大] 来源: 博客园 评论: 0分享至: 百度权重查询 词库网 网站监控 服务器监控 SEO监控 手机游戏 iPhone游戏 今天老师讲了三种跳转页面的方法,现 ...

  4. 在PC上调试微信手机页面的三种方法

    场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...

  5. [HTML/CSS]创建新元素的三种方法

    第一种:通过text/HTML var txt1="<h1>Text.</h1>"; 第二种:通过jQuery var txt2=$("<h ...

  6. 插入css样式表的三种方法

    http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...

  7. CSS怎么隐藏滚动条(三种方法)

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  8. springmvc跳转到自定义404页面的三种方法

    有时候我们并不想跳转到系统自定义的错误页面中,那么我们需要自定义页面并且实现它的跳转 有三种方法可以实现 方法一:最简单的实现,也是最快的 在<web-app>节点下配置 代码如下: &l ...

  9. 小胖说事29-----iOS中Navigation中左滑pop页面的三种方法

    第三中类型.自己定义任何位置返回页面的方式,上边的类就是.m,大家能够贴过去使用.这个类是继承NavigationController的.用这个类初始化rootController就能够了.这里还有源 ...

随机推荐

  1. cant found Microsoft.VSSDK.BuildTools.15.0.26201

    如果在vs扩展开发中出现 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 Failed to load 'C:\程序\EncodingNormalior\packages\Microsoft. ...

  2. WPF学习笔记（6）：DataSet更新后台数据库个别列失败的问题

    WPF窗体中建有一个DataGrid,运行后修改各行数据,通过Update方法更新后台数据库.发现在数据库中,其中一列FAcctID(文本型)每次都会变为0,还有一列FDebit(货币型)不能更新,其 ...

  3. 构建一个Gods Eye Android应用程序：第1部分 – 收集已安装的Android应用程序

    首先问候一下我的黑客伙伴们,在之前的Introduction to Amunet 教程中,我们了解到Amunet可能是一个间谍Android应用程序. 我不浪费太多时间因而直入主题. 在本教程中,我们 ...

  4. Swift5 语言指南(八) 控制流

    Swift提供了各种控制流程语句.这些包括while多次执行任务的循环; if,guard和switch基于特定条件执行不同代码分支的语句; 和语句,如break和continue对执行流在你的代码转 ...

  5. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 —7.网络服务Neutron配置

    网络服务Neutron本章节结束如何安装并配置网络服务(neutron)采用:ref:`provider networks <network1>`或:ref:`self-service n ...

  6. [P4921] 情侣？给我烧了！

    回顾一下错排公式 错排问题: 设n位错排数为D[n].考虑元素1的位置,设置为k(有n-1中 ):在考虑元素k的位置, 若为1,则转换为n-2位的错排:否则,视元素k为元素1(不能放在位置1),转换为 ...

  7. 剖析QMenu & Qt完全定制化菜单

    贴张效果图:  定制包括: 1. 周边阴影 2. 菜单项的元素(分割符, 控制ICON大小, 文字显示位置与颜色, 子菜单指示符) 菜单内的效果, 部分可以使用stylesheet实现, 但要做到这样 ...

  8. s3 api接口的调用

    最近公司使用s3做文件存储服务器,因此在程序中需要调用s3的api,目前程序中使用了python和java版本的s3的api,简单做下记录,方便以后使用. 一.s3 api使用python版 1.安装 ...

  9. Java_反射demo

    package com.cnit.reflect; import java.lang.reflect.Field; import java.lang.reflect.Method; public cl ...

  10. 从零开始学 Web 之 ES6（一）ES5严格模式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...