赢在职场－WEB全栈开发－1-3CSS的位置
<!doctype html><!文档类型声明 document type,感叹号代表这是一个注释>
<html>
<head>
<title>抬头</title>
<!GBK:Chinese Internal Code Specification,汉字内码扩展规范，1995年颁布>
<meta charset="utf-8"><!代码解析格式,UTF-8国际通用编码，中国,系统默认的编码一般是GBK编码或GB2312(1981年颁布)编码，注意编辑时使用什么编码，meta中就就尽量设置成什么编码>
<!metadata |ˈmetədeɪtə| noun 元数据 猜测meta就是metadata的意思>
<!charset 英 [t'ʃɑ:set] 美 [t'ʃɑ:set] n.字符集、编码; 字符编码; 编码格式>
<style>
.div1{width:400px;height:50px;background:green;}
</style>
<style>
.head{width: 300;height: 100;background:red;}
</style>
<link href="main.css" rel = "stylesheet"/><!引入外部样式>
</head>
<body>
内容<!在抬头中可以设置编码方式>
<!CSS><!--行内样式--><!盒子、块>
<div style="width:300px;height:100px;background:red">
宽度300像素，高度100像素，背景红色
</div><!实际网页可能有上千个盒子，使用行内样式这种方式就不方便了>
盒子下面
<!--内部样式-->
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="head">头部</div><!内部样式只能用于某一个html内部，若若干个网页使用同一个样式，则很难维护>
<!--外部样式--><!通过链接引入>
<div class="head2">外部样式</div>
</body>
</html>
／／－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
main.css
.head2{width: 300;height: 50;background:blue;}<!外部样式>
***************************************************************************************
<!doctype html>
<html>
<head>
<title>抬头</title>
<meta charset="utf-8">
<style>
.InternalStyle1{width:400px;height:50px;background:green;}
</style>
<style>
.InternalStyle2{width:300px;height:100px;background:red;}
</style>
<style>
.InternalStyle3{width:34px; height:33px; background:purple;}
</style>
<style>
.InternalStyle4{weight:33px; height:98px; background:orange;}
</style>
<link href = "main.css" rel = "stylesheet"> <!Hypertext Reference的缩写,意思是超文本引用。引入外部样式,外部CSS引用><!relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间的关系。stylesheet，的意思就是样式调用。>
</head>
<body>
<!行内样式(Internal Style(internal |ɪnˈtɜːnl| adj 里面的、内部的))><!实际网页可能有上千个盒子，使用行内样式这种方式就不方便了>
<div style = "width:300px;height:100px;background:red">inline style1</div>
<div style = "width:400px;height:300px;background:purple">行内样式2</div>
<div style = "height:40px;height:100px;background:blue">inline style3</div>
<!内部样式><!内部样式只能用于某一个html内部，若若干个网页使用同一个样式，则很难维护>
<div class = "InternalStyle1">内部样式1</div>
<div class = "InternalStyle2">内部样式2</div>
<div class = "InternalStyle3">内部样式3</div>
<div class = "InternalStyle4">内部样式4</div>
<!外部样式><!通过链接引入>
<div class = "ExternalStyle1">外部样式1</div>
<div class = "ExternalStyle2">外部样式2</div>
<div class = "ExternalStyle3">外部样式3</div>
<div class = "ExternalStyle4">外部样式4</div>
</body>
</html>