前端从零初始（1）HTML 与 CSS 的关系
<h1 style="color: black; text-align: left; margin-bottom: 10px;">HTML 与 CSS 的关系</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上一章节学习了 HTML 的基本概念，<span style="color: black;">咱们</span><span style="color: black;">亦</span><span style="color: black;">晓得</span>了 HTML 到底是什么。<span style="color: black;">那样</span><span style="color: black;">咱们</span>在前端<span style="color: black;">行业</span>，经常能听到前端的三架马车，HTML，CSS 和 JavaScript。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 组<span style="color: black;">成为了</span>网页的基本结构，<span style="color: black;">那样</span> CSS <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;">而 JavaScript 则<span style="color: black;">供给</span>了交互功能，让<span style="color: black;">咱们</span>能够在网页中做<span style="color: black;">各样</span>各样的操作，这一小节，<span style="color: black;">咱们</span>来学习一下 HTML 与 CSS 的<span style="color: black;">详细</span><span style="color: black;">功效</span>和关系。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. HTML 的<span style="color: black;">功效</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 标签构<span style="color: black;">成为了</span>网页的基本结构，虽然大部分标签有自带的样式，<span style="color: black;">然则</span>并<span style="color: black;">不可</span>满足<span style="color: black;">咱们</span><span style="color: black;">实质</span>的需求，<span style="color: black;">况且</span>有些标签，<span style="color: black;">咱们</span>甚至要取消某些标签的默认样式，<span style="color: black;">因此</span><span style="color: black;">咱们</span><span style="color: black;">必须</span> CSS 来优化 HTML 标签的样式。</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>的网页就像是一个清水房，<span style="color: black;">仅有</span>一个架子，<span style="color: black;">咱们</span>还<span style="color: black;">必须</span>给房子做装修，<span style="color: black;">才可</span>变成一个完整的家。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. CSS 的<span style="color: black;">功效</span></h2>
<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>元素定义样式，它主要用于美化 HTML 页面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>设置对应的 CSS 样式属性<span style="color: black;">能够</span>修改 HTML 文档内各元素的<span style="color: black;">表示</span>、位置等样式。如修改<strong style="color: blue;">颜色、字体、字号、宽高、位置、背景</strong>等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS 不仅能取消 HTML 标签的默认样式，还能给 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>要编写一个完整炫酷的网页，<span style="color: black;">必须</span> HTML 搭配 CSS <span style="color: black;">一块</span><span style="color: black;">运用</span>。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. HTML 和 CSS <span style="color: black;">怎样</span>结合（CSS 的引用方式）</h2>
<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><span style="color: black;">咱们</span><span style="color: black;">必须</span>结合 CSS <span style="color: black;">一块</span><span style="color: black;">运用</span>。怎么样在 HTML 文件<span style="color: black;">其中</span><span style="color: black;">运用</span> CSS 呢？<span style="color: black;">咱们</span>有 3 种方式：</p><span style="color: black;">经过</span>内联样式来书写样式；<span style="color: black;">经过</span> style 标签来书写样式；<span style="color: black;">经过</span> link 标签引入<span style="color: black;">外边</span> CSS 文件来书写样式。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-3dfad350a8b5bf4fd6c645e1ac0214aa_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">照片</span>描述<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 经验分享</h2><span style="color: black;">倘若</span>页面样式不<span style="color: black;">繁杂</span>，<span style="color: black;">能够</span>采取 <strong style="color: blue;">style</strong>标签来书写样式；HTML <span style="color: black;">非常多</span>标签有默认样式，有时候<span style="color: black;">咱们</span><span style="color: black;">能够</span>借助这些标签的默认样式。<span style="color: black;">倘若</span><span style="color: black;">咱们</span>不<span style="color: black;">必须</span>标签的默认样式，<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 标签加上 CSS 样式；<span style="color: black;">由于</span> div 标签是<span style="color: black;">无</span>默认样式的，<span style="color: black;">因此</span><span style="color: black;">非常多</span>时候<span style="color: black;">咱们</span><span style="color: black;">爱好</span><span style="color: black;">运用</span> div标签，<span style="color: black;">而后</span>自定义样式。<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 小结</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-c007fb2cb3ee6c2dfbf4322a4372caa5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">照片</span>描述<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>为 HTML 标签添加样式，让本来平平<span style="color: black;">没</span>奇的 HTML 标签，变得光鲜亮丽起来，你<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>了 HTML 知识，还远远<span style="color: black;">不足</span>，<span style="color: black;">仅有</span>将 HTML 与 CSS 完美结合，<span style="color: black;">才可</span>编写出各式各样的网站。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">微X</span>公众号老徐说</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文<span style="color: black;">运用</span> <a style="color: black;">WPL/s</a> <span style="color: black;">颁布</span> <a style="color: black;">@GitHub</a></p>
页:
[1]