Shaw
0%

Posted on Edited on In

写在前面

CSS 是层叠样式表 (Cascading Style Sheets) 的缩写。要理解本节内容，我们首先需要搞清楚层叠的概念。与这个概念密切相关的还有“当某个元素同时拥有两种冲突的样式时，应该应用哪一种”的问题，也即优先级问题。我们还将了解哪些父元素的样式会被子元素继承，哪些则不会

最后我们总结精炼了一些样式优先级的法则

Read more »

Posted on Edited on In

预备知识

  1. CSS 基础 ⭐ | Shaw
  2. CSS 基本语法 | Shaw

写在前面

上一节我们讲了关于确定选择器的一些方法，实际上它已经涵盖了大部分情况，只是分类显得稍微有些粗浅。如果你不大记得了，这里给一个提示，大致是讲了三类：通过类名，按所处位置以及按所处状态。如果你完全不记得了，建议你好好复习一下。本节我们继续对这部分内容进行更细致的学习

最后我还给出了选择器参考附录，里面列举了一些例子，供读者复习总结

Read more »

Posted on Edited on In

预备知识

  1. Web 概述 ⭐ | Shaw
  2. CSS 基础 ⭐ | Shaw
  3. 通过 HTML 网站架构 | Shaw 一节的无语义元素了解类的概念
  4. HTML 超链接 | Shaw

写在前面

这一节的知识将会比较杂，包含了 CSS 语法，CSS 的作用以及应用 CSS 的三种方法

语法部分先回顾了规则集的构成，重点讲了选择器部分的语法，再讲了关于属性方面的一点小语法知识

关于选择器的一些比较零碎的内容我本来打算留到下一节专门讲选择器时再讲，但是由于下一节的内容本身就不少，所以还是将这一部分先放到这里；另外我将下一节的一些知识作为例子放在这里，先培养培养感情，到下一节时读者不会因为一时接触了过多新概念而心生退意

Read more »

Posted on In

嵌入技术可以说为网页的功能完善做出了不少的贡献

<iframe> 用于嵌入其他网页它提供了一种将整个 web 页嵌入到另一个网页的方法，看起来就像那个 web 页是另一个网页的一个 <img> 或其它元素一样。不过与 <img> 不同，<iframe> 不是空元素，需要闭合标签 </iframe>

拿来主义

<iframe> 使用场景可以很广泛，它使得我们直接通过 API 实现特定的功能，例如：

Read more »

Posted on Edited on In

HTML 中图片

除了干巴巴的文本，我们可以为网页添加一些有趣的元素，例如图片 (image) 元素。直观的图片会给予读者更加舒适的阅读体验

如何为你的网页添加图片

我们可以用 <img> 元素来把图片放到网页上。与之前所接触的绝大多数例子不同，<img> 是一个空元素，也即它不需要包含文本内容或者一个形如 </img> 的闭合标签，只需要一个 src (source) 属性指向所要引入的图片的路径，可以是相对路径或绝对 URL（可以参考 <a> 的 href 属性）

以相对路径引入图片为例：假如图片与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它

Read more »

Posted on Edited on In

文档的基本组成部分

<header>：页眉。通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页

<nav>：导航栏。指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示

<main>：主内容。主内容中还可以有各种子内容区段：

  • <article>：正文部分
  • <aside>：侧边栏，经常嵌套在 <main> 中。一些外围信息、链接、引用、广告、辅助导航栏等
  • <section>：通用的分节元素

<header>：页脚。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容

Read more »

Posted on Edited on In

超链接使互联网成为了互联的网络：我们可以将网络内容转化成链接，通过点击链接转而浏览目标位置。

链接的解析

基本链接 Anchor

<a> 元素标签表示超链接，并由属性 href (Hypertext Reference) 指向目标网址

1
2
3
<p>
    <a href="https://kiritoshaw.github.io/">Home</a>
</p>

上述方式是通过统一资源定位符 (URL) 访问，我们也可以通过路径 (Path) 访问文件夹中的其他网页

1
2
3
<p>
    <a href="/archives.html">Home</a>
</p>
Read more »

Posted on In

这一节的内容非常基础，只需快速浏览熟悉即可

标题和段落 Heading & Paragraph

大部分文本结构由标题和段落构成。而内容的结构化会使读者的阅读体验更加轻松，更愉快

我们一共有六个标题元素 (heading) 标签：<h1> 表示主标题，<h2> 表示二级子标题，…，<h6> 为最小子标题；段落元素 (paragraph) 标签由 <p> 引导一个新的段落。请看下面这个例子：

Read more »

Posted on Edited on In

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说 HTML 规定了网站的静态内容，而人们可以用 CSS 来选择性地为 HTML 元素添加样式

CSS 规则集基础

规则集构成

我们以段落元素 p (paragraph) 为例：

Read more »