本文摘自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如何使文字垂直对齐
css3实现微信小程序瀑布流布局的代码示例
css响应式布局之媒体查询
css和js后加问号和数字有什么用
css选择器有哪些
怎么外部引入css
详解css处理长短文本内容的几种小技巧(值得收藏)
css怎么设置字体为宋体
vertical-align负值和margin-bottom负值的差异有哪些?
css行元素跟块元素有哪些相同点
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解css行内样式、内嵌样式与外部引用样式的使用方法