css基本语法
<h3 style="color: black; text-align: left; margin-bottom: 10px;">书写位置</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css的代码<span style="color: black;">按照</span>书写位置<span style="color: black;">区别</span>分为四种书写方式：内联式、内嵌式、外联式、导入式</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">内联式</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内联式，<span style="color: black;">亦</span>被习惯叫做行内式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">书写位置：在html标签之上的style属性中书写css样式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">所有的css样式属性总体<span style="color: black;">构成</span>标签的style属性的属性值</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-4aec2dd3348c1ae2b7a17ee7c0a8960e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内联式<span style="color: black;">必要</span>书写在标签上，<span style="color: black;">无</span>完全脱离html标签</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css样式代码让标签结构繁重，<span style="color: black;">有害</span>于html结构的<span style="color: black;">诠释</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内联式的css代码，只能给一个标签<span style="color: black;">运用</span>，<span style="color: black;">倘若</span>多个标签有相同的样式，<span style="color: black;">一样</span>的css代码<span style="color: black;">必须</span>书写多次，<span style="color: black;">增多</span>代码量</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此呢</span>，在<span style="color: black;">咱们</span><span style="color: black;">实质</span>工作中很少会<span style="color: black;">运用</span>内联式（行内式）编写css代码</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">内嵌式</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">书写位置：在html文件中，<head>标签内部有一个<style>标签</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><style>标签书写在<title>标签后面，所有css代码书写在<style>标签内部</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><style>标签有一个标签属性叫做type,属性值是"text/css"</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;">p</span> <span style="color: black;">{</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">14</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">实现了结构和样式的初步分离，css只负责样式，html负责结构</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">多个标签<span style="color: black;">能够</span>利用一个代码设置相同的样式，节省代码量</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">结构和样式并<span style="color: black;">无</span>完全分离，代码依旧写在html文件的<style>标签内部</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css样式只能给一个html文件<span style="color: black;">运用</span>，<span style="color: black;">不可</span>狗被多个html文件<span style="color: black;">同期</span>利用</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在html中<span style="color: black;">倘若</span>css代码太多，会<span style="color: black;">导致</span>问文件头重脚轻</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">外联式</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">外联式css，<span style="color: black;">亦</span><span style="color: black;">能够</span>叫做外链式css、<span style="color: black;">外边</span>css</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">书写位置：在一个单独的扩展名为xx.css的文件中</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">书写语法：内部代码与内嵌式样式表中<style>标签内部的代码<span style="color: black;">同样</span>的，<span style="color: black;">必须</span><span style="color: black;">经过</span><span style="color: black;">选取</span>器去选中标签，添加对应的样式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：文件中只需写样式，不<span style="color: black;">必须</span>再写<style>标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">p {
font-size: 14px;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">外联式引用：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">外联式样式表<span style="color: black;">必要</span>引入到html文件中，<span style="color: black;">才可</span>正常进行加载</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">引入方式：在html中的<head>标签内部<span style="color: black;">运用</span><link>标签进行引入</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><link>标签属性：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-d6243ffc750726e4bb43ae146515c8cf_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><link rel="stylesheet" href="xxx.css"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">优点：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">实现了html和css完全分离</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">多个html文件<span style="color: black;">能够</span>公用一个css文件，便于提取公共css，减少代码量</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>实现一个css变化，多个html页面<span style="color: black;">同期</span>变化，减少工作量</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个html文件<span style="color: black;">能够</span>引入多个css文件，<span style="color: black;">能够</span>实现同一个页面中css代码分层</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">导入式</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">书写位置：在内嵌式样式表<style>标签内部，<span style="color: black;">或</span>在外联式样式表内部，导入其他的<span style="color: black;">外边</span>的.css文件</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">导入方式：利用一条@import url(路径)语句进行引入</p>
页:
[1]