随笔分类 - 前端HTML 、 CSS
摘要：你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。 因为层叠的效果，CSS 变量通常会定义在:root元素里。 就像html是body的容器一样，你也可以认为:root元素是你整个 HTML 文档的容器。 在:root创建的
阅读全文
摘要：在penguinclass 里面，创建一个--penguin-skin变量，且赋值为gray（灰色）。 创建变量后，CSS 属性可以通过引用变量名来使用它的值。 background: var(--penguin-skin); 因为引用了--penguin-skin变量的值，使用了这个样式的元素背景
阅读全文
摘要：有时候，你的 HTML 元素的样式会跟其他样式发生冲突。 就像，你的h1元素也不能同时设置green和pink两种样式。 让我们尝试创建一个字体颜色为pink的 class，并应于用其中一个元素中。猜一猜，它会覆盖body元素设置的color: green;CSS 属性吗？ 在含有pink-text
阅读全文
摘要：ID 选择器和 Class 选择器 和其他CSS 选择器，可以让我们给特定的元素设置样式。 你会使用[attr=value]属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。 [type='radio'] { margin: 20px 0px 20px 0px;} in和m
阅读全文
摘要：你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。 每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。 padding控制着元素内容与border之间的空隙大小。 margin（外边距）控制元素的边框与其他
阅读全文
摘要：background-color属性可以设置元素的背景颜色。 例如，你想将一个元素的背景颜色改为green，可以在你的style里面这样写： .green-background { background-color: green;} 除了class属性，每一个 HTML 元素也都有id属性。 使用i
阅读全文
摘要：CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。 假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做： <style> .larger-image { width: 500px;
阅读全文
摘要：字体大小由font-size属性控制，如下所示： h1 { font-size: 30px;} 引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签
阅读全文
摘要：CSS 的class具有可重用性，可应用于各种 HTML 元素。 一个 CSSclass声明示例，如下所示： <style> .blue-text { color: blue; }</style> 可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。 你
阅读全文
摘要：<h2 style="color: red;">CatPhotoApp</h2> 请注意行内style最好以;来结束。 当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。 <h2 style="color: red;"> <st
阅读全文
摘要：在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。 你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"
阅读全文
摘要：radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。 单选按钮只是input输入框的一种类型。 每一个单选按钮都应该嵌套在它自己的label（标签）元素中。 所有关联的单选按钮应该拥有相同的name属性。 下面是一个单选按钮的例子： <label> <input type="r
阅读全文
摘要：通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。 例如: <form action="/url-where-you-want-to-submit-form-data"></form> 让我们来给表单添加一个submit提交按钮，当点击提交按
阅读全文
摘要：现在让我们来创建一个form表单。 input输入框可以让你轻松获得用户的输入。 你可以像这样创建一个文本输入框： <input type="text"> 注意：input输入框是没有结束标记的。 Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。 你可以像这样创建一
阅读全文
摘要：HTML 有一个特定的元素用于创建无序列表unordered lists（缩写 ul）。 无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。 例如: <ul> <li>牛奶</li> <li>奶酪</li></ul> HTML 有一个特定的元素用于创建有序列表ordere
阅读全文
摘要：你可以用a锚点（Anchor，简写 a）来实现网页间的跳转。 锚点需要一个href属性指向目的地，它还需要有锚点文本，例如： <a href="https://freecodecamp.one">传送至 freecodecamp.one</a> 然后你的浏览器会显示一个可以点击的文本，点击该文本就会
阅读全文
摘要：用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。 所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。 注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。 理想情况下，alt属性不应该包含特殊字符
阅读全文
浙公网安备 33010602011771号