l14107cb 发表于 2024-6-30 08:46:43

从0.1初始学习CSS - 0 什么是CSS？


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">序</h2>
    <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>做学习记录，<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>先从<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>自学前端的小伙伴(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ，欢迎交流~</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>愿意花时间翻阅新人记录的前端大佬们指出不足之处~鞠躬~</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">为何</span>是0.1？</h3>
    <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>HTML知识会<span style="color: black;">运用</span>集成<span style="color: black;">研发</span>环境（IDE，Integrated Development Environment）写代码，<span style="color: black;">针对</span>新人<span style="color: black;">这儿</span><span style="color: black;">举荐</span><span style="color: black;">运用</span><a style="color: black;">VSCode</a>。<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">https://code.visualstudio.</span></span></a>com/<span style="color: black;"><span style="color: black;">​</span>code.visualstudio.com/</span></div>注册一个github账号（<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>过IDE，又想快速上手，<span style="color: black;">能够</span><span style="color: black;">运用</span><a style="color: black;">Codepen</a>实践css代码。（github账号一键登录）<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">Just a moment...</span><span style="color: black;"><span style="color: black;">​</span>codepen.io/</span></span></a></div>
    <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>学习css~！</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">什么是css</h2>
    <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>什么是HTML，就能更快的<span style="color: black;">认识</span>CSS。简单描述一下HTML，CSS和网页的关系：</p>网页<span style="color: black;">指的是</span><span style="color: black;">咱们</span>平时在网页浏览器上看到的<span style="color: black;">各样</span>界面。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-5e58a01339ec66c6dc49bc4fd79d3e4e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>打开后的B站，<span style="color: black;">便是</span>一个网页HTML(<span style="color: black;">超文本标记语言</span>)是一种标记语言。你<span style="color: black;">能够</span>把它看做一个描述每一部分的网页内容的文本类型（文字/<span style="color: black;">照片</span>/音频）的工具。HTML构建了网页的基本结构。下面是一个html文件实例：<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!-- 新建一个html文件写入以下内容 --&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">h1</span><span style="color: black;">&gt;</span>h1是一级标题<span style="color: black;">&lt;/</span><span style="color: black;">h1</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>p<span style="color: black;">一般</span><span style="color: black;">暗示</span><span style="color: black;">这儿</span>有一段文字<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
    </div>用浏览器打开上面的HTML文件后<span style="color: black;">表示</span>以下网页内容 ↓<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-6a244e88faa84b67f0f21f7961e10b3f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>CSS(层叠样式表)是一种Web语言，它<span style="color: black;">重点</span>用来描述HTML文件的表现形式。CSS构建了网页的样式。在上面的html文件中加入以下的css内容：<div style="color: black; text-align: left; margin-bottom: 10px;">&lt;style&gt;
      h1 {
      &lt;!-- 背景颜色：#0072b0 --&gt;
      bac<span style="color: black;">公斤</span>round-color: #0072b0;
      &lt;!-- 文字颜色：#fff --&gt;
      color:#fff;
      }

      p{
      &lt;!-- 边框：2px宽 灰色 实线 --&gt;
      border:2px gray solid;
      }
      &lt;/style&gt;</div>用浏览器打开添加CSS后的HTML文件<span style="color: black;">表示</span>的网页内容 ↓<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-4c2832e5c9659d44125faf1977cff164_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><a style="color: black;">点击<span style="color: black;">这儿</span></a><span style="color: black;">能够</span>查看在codepen上的演示<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><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;">将某个元素的某属性设置为某个值。 </p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;style&gt;
      h1 {
      &lt;!-- 翻译： 将 h1元素 的 背景颜色属性 设置为 #0072b0 --&gt;
      bac<span style="color: black;">公斤</span>round-color: #0072b0;
      &lt;!-- 翻译： 将 h1元素 的 字体颜色属性 设置为 #fff --&gt;
      color:#fff;
      }

      p{
      &lt;!-- 翻译：将 p元素 的 边框属性 设置为 2px宽、灰色、实线 --&gt;
      border:2px gray solid;
      }
      &lt;/style&gt;</div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-3e94392ff426661572bf4c3f2a98afff_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>将P元素的color属性设置为blue<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>的语言转化成css的语法。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>将HTML和CSS结合起来，<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>JavaScript）的网页了。</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了。它是用来美化<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>想要的样式效果翻译成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><span style="color: black;">根据</span>CSS的规则，去描述<span style="color: black;">咱们</span>想要的样式。</p>虽然CSS看起来很简单，<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>的页面效果容易令人摸不着头脑！




听听海 发表于 2024-9-7 21:58:38

你的话语如春风拂面，让我心生暖意。

m5k1umn 发表于 2024-10-20 05:23:47

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。

qzmjef 发表于 2024-11-9 19:12:21

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。

m5k1umn 发表于 5 天前

我完全同意你的看法，期待我们能深入探讨这个问题。
页: [1]
查看完整版本: 从0.1初始学习CSS - 0 什么是CSS？