本文摘自PHP中文网,作者V,侵删。
三中的使用方法的简单实例如下:
行内样式:
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html>
< html >
< head >
< meta charset = "UTF-8" >
< title >css行内样式</ title >
</ head >
< body >
< div style = "width:100px;height:100px;background:red;" ></ div >>
</ body >
</ html >
|
(推荐教程:CSS教程)
内嵌样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!!doctype html>
< html >
< head >
< meta charset = "UTF-8" >
< title >css内嵌样式</ title >
</ head >
< body >
< style type = "text/css" >
#div{width:100px;height:100px;background:red;}
</ style >
< div id = "div" ></ div >>
</ body >
</ html >
|
外部式:
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html>
< html >
< head >
< meta charset = "UTF-8" >
< title >css内嵌样式</ title >
< link rel = "stylesheet" type = "text/css" href = "ccss.css" >
</ head >
< body >
< div id = "div" ></ div >>
</ body >
</ html >
|
css文件:
1 | #div{ width : 100px ; height : 100px ; background : red ;}
|
总结:
行内样式:就是代码写在具体网页中的一个元素内;比如:<div style="color:#f00"></div>
内嵌式:就是在</head>前面写;比如:<style type="text/css">.div{color:#F00}</style>
外部式:就是引用外部css文件;比如:<link href="css.css" type="text/css" rel="stylesheet" />
相关视频教程推荐:css视频教程
以上就是详解css行内样式、内嵌样式与外部引用样式的使用方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何插入图片
css如何实现倒计时翻页动画
css 什么是相对长度单位
在css样式中class是什么
css字体样式属性有哪些
css属性为什么要加前缀
css给文字添加描边的方法是什么
css怎么去掉a标签的下划线
css实现禁止页面文字被选中功能
css如何实现阴影效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解css行内样式、内嵌样式与外部引用样式的使用方法