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. CSS---伪类选择器

    伪类选择器的作用: 控制标签在不同状态下的样式. 标签的四种状态: link:没有访问过的状态: hover:鼠标经过的状态: active:鼠标激活(按下但没有松开)的状态: visited:已经被 ...

  2. Nextday 参数化单元测试(测试用例)设计

    一.首先简单描述一下下载试题及配置试题的过程 配置环境:安装Eclipse.JDK(1.7).及考试插件 (net.mooctest....*.jar)等: 登录系统:运行Eclipse: [Mooc ...

  3. WCF学习笔记一之通过配置web.config可以通过http访问接口

    一.准备 这里涉及到三个文件,现在只是简单的把代码贴出来,后面再详细的讲一下. 三个文件分别是(都是wcf服务应用程序项目下的): 1.IService1.cs 2.Service1.svc 3.We ...

  4. navicat连接linux系统中mysql-错误:10038

    输入 命令 netstat -anp(查看所有的进程和端口使用情况) (注:Local Address一列中: 0.0.0.0 表示监听本地所有ip地址,其他电脑是可以访问的,并且修改ip不受影响. ...

  5. java中的io系统详解

    相关读书笔记.心得文章列表 Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字 ...

  6. 火狐浏览器安装 Modify Headers 插件

    一.火狐浏览器插件安装 这里以火狐浏览器的Modify Headers插件安装为例,展示火狐插件的安装: 1.打开火狐浏览器,右上角选择“附加组件” 2.搜索Modify Headers插件 3.安装 ...

  7. Java学习笔记50(DBCP连接池)

    实际开发中,连接数据库是十分消耗资源的操作,但是,我们又需要频繁地连接数据库 这时候,为了提高效率,这里就会采用连接池技术: 连接池地通俗理解: 一个池里面放入很多的连接,需要哪一个取出来用即可,用完 ...

  8. 第二篇:服务消费者(RestTemplate+ribbon)

    第一篇讲了服务的注册,这篇来说说服务的调用,服务与服务的通讯是基于http restful,springcloud的服务调用是通过ribbon方式的,客户端的负载均衡. Talk is cheap.S ...

  9. Dispatch Queue 之 dispatch_async

     可以看到,在queue里的任务,不仅仅是一个函数,也可以是一个其他的queue. 下面是一个例子.  全局队列的处理 一般一个全局队列有多个线程,这些个线程会遍历并处理链表里的任务. 对于全局队 ...

  10. 【sping揭秘】18、使用spring访问数据

    统一的数据访问异常层次体系 基于基本的jdbc封装dao层访问接口,封装不论是访问,csv文件,关系数据库(RDBMS),ladp都可以封装成一个个DAO对象来进行访问 抛出问题 可是对于我们忽略了一 ...