css引入页面的三种方法
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引入页面的三种方法的更多相关文章
- asp.net跳转页面的三种方法比较
目前,对于学习asp.net的很多朋友来讲,实现跳转页面的方法还不是很了解.本文将为朋友们介绍利用asp.net跳转页面的三种方法,并对其之间的形式进行比较,希望能够对朋友们有所帮助. ASP.NET ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- asp.net跳转页面的三种方法比较(转)
2006-10-20 14:32 [小 大] 来源: 博客园 评论: 0分享至: 百度权重查询 词库网 网站监控 服务器监控 SEO监控 手机游戏 iPhone游戏 今天老师讲了三种跳转页面的方法,现 ...
- 在PC上调试微信手机页面的三种方法
场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...
- [HTML/CSS]创建新元素的三种方法
第一种:通过text/HTML var txt1="<h1>Text.</h1>"; 第二种:通过jQuery var txt2=$("<h ...
- 插入css样式表的三种方法
http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...
- CSS怎么隐藏滚动条(三种方法)
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- springmvc跳转到自定义404页面的三种方法
有时候我们并不想跳转到系统自定义的错误页面中,那么我们需要自定义页面并且实现它的跳转 有三种方法可以实现 方法一:最简单的实现,也是最快的 在<web-app>节点下配置 代码如下: &l ...
- 小胖说事29-----iOS中Navigation中左滑pop页面的三种方法
第三中类型.自己定义任何位置返回页面的方式,上边的类就是.m,大家能够贴过去使用.这个类是继承NavigationController的.用这个类初始化rootController就能够了.这里还有源 ...
随机推荐
- 18个分形图形的GIF动画演示
这里提供18个几何线段分形的GIF动画图像.图形颜色是白色,背景色为黑色,使用最基本的黑与白以表现分形图形. (1)科赫(Koch)雪花 (2)列维(levy)曲线 (3)龙形曲线(Drago ...
- [bug]”System.InvalidProgramException:公共语言运行时检测到无效程序“解决方案
Visual Studio 2017版本15.8.x运行某些程序会报这样的错误:“System.InvalidProgramException:公共语言运行时检测到无效程序” 此问题的临时解决方案: ...
- React Native学习方法论
这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学 ...
- linux 下动态链接实现原理
符号重定位 讲动态链接之前,得先说说符号重定位. c/c++ 程序的编译是以文件为单位进行的,因此每个 c/cpp 文件也叫作一个编译单元(translation unit), 源文件先是被编译成一个 ...
- JS应用实例5:全选、动态添加
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- (转)内核模块操作命令-lsmod+rmmod+modinfo+modprobe
原文:http://watchmen.xin/2018/07/13/IT%E7%A7%91%E5%AD%A6%E6%8A%80%E6%9C%AF%E7%9F%A5%E8%AF%86%E4%BD%93% ...
- 转载:https原理:证书传递、验证和数据加密、解密过程解析
写的太好了,就是我一直想找的内容,看了这个对https立马明白多了 http://www.cnblogs.com/zhuqil/archive/2012/07/23/2604572.html 我们都知 ...
- 【Java基本功】一文读懂String及其包装类的实现原理
String作为Java中最常用的引用类型,相对来说基本上都比较熟悉,无论在平时的编码过程中还是在笔试面试中,String都很受到青睐,然而,在使用String过程中,又有较多需要注意的细节之处. S ...
- Ajax经典交互讲解
资料: XMLHttpRequest 对象 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.XMLHttp ...
- leetcode — regular-expression-matching
/** * Source : https://oj.leetcode.com/problems/regular-expression-matching/ * * Created by lverpeng ...