CSS基本语法(一)
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>CSS整体感知</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">一)：简介</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">前端<span style="color: black;">研发</span>3层：
HTML 结构层 语义、结构
CSS 样式层 样式
JS <span style="color: black;">行径</span>层 交互、<span style="color: black;">行径</span>、动画
CSS 全<span style="color: black;">叫作</span> cascading style sheets，层叠式样式表，是一种用来表现 HTML 的文件样式的计算机语言
<span style="color: black;">功效</span>：静态地修饰网页，并且<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>是w3c，最新版本是CSS3，<span style="color: black;">然则</span>浏览器<span style="color: black;">无</span><span style="color: black;">那样</span>的兼容
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下图<span style="color: black;">便是</span>在Chrome和IE8中看<span style="color: black;">设备</span>猫： </p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-6cb078facac09067b5e1b1de7473696c_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">二)：产生背景</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">• 从 HTML 被发明<span style="color: black;">起始</span>，样式就以<span style="color: black;">各样</span>形式存在，最初的 HTML 只<span style="color: black;">包括</span>很少的<span style="color: black;">表示</span>属性。
• 随着 HTML 的成长，为了满足页面设计者的<span style="color: black;">需求</span>，HTML 添加了<span style="color: black;">非常多</span><span style="color: black;">表示</span>功能，例如文本格式化标签。
• <span style="color: black;">然则</span>随着这些功能的<span style="color: black;">增多</span>，HTML 变的越来越杂乱，<span style="color: black;">况且</span> HTML页面<span style="color: black;">亦</span>越来越臃肿。
• 于是 CSS 便诞生了。</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">三)：发展过程</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-b622880dec006c44d26f2263203ec20d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;">CSS 的<span style="color: black;">显现</span>，实现了网页的结构和样式分离，拯救了混乱的 HTML，更加拯救了<span style="color: black;">咱们</span> web <span style="color: black;">研发</span>者。</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>CSS语法</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.1 CSS规则</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">CSS 规则由两个<span style="color: black;">重点</span>的部分<span style="color: black;">形成</span>：<span style="color: black;">选取</span>器，以及一条或多条声明</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-2275b123cf671c2c35fb90131fa72d16_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.2 书写位置</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">css 的代码<span style="color: black;">按照</span>书写位置<span style="color: black;">区别</span>分为四种书写方式：内联式、内嵌式、 外联式、导入式。</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2.2.1 内联式</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">• 内联式，<span style="color: black;">亦</span>被习惯叫做行内式。
• 书写位置：在 HTML 标签之上的 style 属性中书写 css 样式
• 所有的 css 样式属性总体<span style="color: black;">构成</span>标签的 style 属性的属性值
<div style="width: 100px;height: 200px;"></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;">a、内联式<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;">b、 css 样式代码让标签结构繁重，<span style="color: black;">有害</span>于 HTML 结构的<span style="color: black;">诠释</span>。 </p>c、一个内联式的 css 代码
感谢你的精彩评论，为我的思绪打开了新的窗口。
页:
[1]