CSS学习笔记-【内联样式、内部样式、外部样式表】AND2018-11-21(21:
18)
⼀、内联样式
1.在DIV标签中添加内联样式。
添加style属性 。
在style中属性和值得表⽰⽅法为:
style=“属性:值;属性:值”;
例如:
<div >内联样式表</div>
⼆、内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<style type="text/css">
/*写样式*/
div{
color: red;
/*边框:边框粗细、边框样式(dashed虚线、solid实线)边框的颜⾊*/
border: 1px solid black;
}
</style>
</head>
<body>
<div>内部样式表</div>
<br/>
<div>内部样式表2</div>
</body>
</html>
div border属性以以上代码为例:
将内部样式写在head标签中。
格式为:
<style type="text/css">
div(标签名){
属性:值;
属性:值;
}
</style>
此样式会应⽤在此页⾯所有的DIV标签上。
三、外部样式表
CSS⽂件:
div{
color: red;
border: 1px solid green;
}
第⼀个HTML⽂件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="Demo.css">
</head>
<body>
<div>外部样式表demo.html</div>
</body>
</html>
第⼆个HTML⽂件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="Demo.css">
</head>
<body>
<div>外部样式表demo2.html</div>
</body>
</html>
⾸先创建两个HTML页⾯和⼀个CSS外部样式表。
上⾯的代码是CSS表中的DIV的属性通过Link标签在两个不同的HTML完成CSS的样式。浏览器会从.css⽂件中读取样式,并对页⾯上的html进⾏修饰。
Link标签属性:
rel:定义当前⽂档与被连接⽂档之间的关系。
href:定义被连接的⽂档URL。
type:定义被连接⽂档的MIME类型。
注释:
样式⽤法:
如果有多个页⾯需要⽤同⼀种样式,那么就⽤外部样式表。
如果是单个页⾯需要⽤这⼀种样式,就⽤内部样式表。
如果是⼀个标签⽤CSS的样式,就⽤内联样式。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论