CSS学习笔记-【内联样式、内部样式、外部样式表】 AND 2018-11-21(21:18)

一、内联样式
1.在DIV标签中添加内联样式。
添加style属性 。
在style中属性和值得表示方法为:
style=“属性:值;属性:值”;
例如:

<div style="Color: red;border: 1px dashed black" >内联样式表</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>

以以上代码为例:
将内部样式写在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的样式,就用内联样式。

猜你喜欢

转载自blog.csdn.net/weixin_43680500/article/details/84330621