Sai佐为

2021年5月1日

样式中的优先级、Class 选择器的优先级高于继承样式、ID 选择器优先级高于 Class 选择器、内联样式的优先级高于 ID 选择器、Important 的优先级最高

摘要：有时候，你的 HTML 元素的样式会跟其他样式发生冲突。就像，你的h1元素也不能同时设置green和pink两种样式。让我们尝试创建一个字体颜色为pink的 class，并应于用其中一个元素中。猜一猜，它会覆盖body元素设置的color: green;CSS 属性吗？在含有pink-text 阅读全文

posted @ 2021-05-01 11:01 Sai佐为阅读(470) 评论(0) 推荐(0)

使用属性选择器来设置元素的样式、理解绝对单位与相对单位

摘要： ID 选择器和 Class 选择器和其他CSS 选择器，可以让我们给特定的元素设置样式。你会使用[attr=value]属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。 [type='radio'] { margin: 20px 0px 20px 0px;} in和m 阅读全文

posted @ 2021-05-01 10:43 Sai佐为阅读(167) 评论(0) 推荐(0)

调整元素的内边距、外边距、使用顺时针方向指定元素的内边距

摘要：你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。 padding控制着元素内容与border之间的空隙大小。 margin（外边距）控制元素的边框与其他阅读全文

posted @ 2021-05-01 10:11 Sai佐为阅读(428) 评论(0) 推荐(0)

给 div 元素添加背景色、设置元素的 id 、使用 id 属性来设定元素的样式

摘要： background-color属性可以设置元素的背景颜色。例如，你想将一个元素的背景颜色改为green，可以在你的style里面这样写： .green-background { background-color: green;} 除了class属性，每一个 HTML 元素也都有id属性。使用i 阅读全文

posted @ 2021-05-01 09:34 Sai佐为阅读(1345) 评论(0) 推荐(0)

调整图片的大小、在元素周围添加边框、添加圆角边框

摘要： CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做： <style> .larger-image { width: 500px; 阅读全文

posted @ 2021-05-01 07:36 Sai佐为阅读(264) 评论(0) 推荐(0)

更改元素的字体大小、引入谷歌字体、字体如何降级

摘要：字体大小由font-size属性控制，如下所示： h1 { font-size: 30px;} 引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签阅读全文

posted @ 2021-05-01 07:08 Sai佐为阅读(238) 评论(0) 推荐(0)

2021年4月30日

使用 class 选择器设置单、多个元素的样式

摘要： CSS 的class具有可重用性，可应用于各种 HTML 元素。一个 CSSclass声明示例，如下所示： <style> .blue-text { color: blue; }</style> 可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。你阅读全文

posted @ 2021-04-30 11:17 Sai佐为阅读(830) 评论(0) 推荐(0)

更改文本的颜色、使用元素选择器来设置元素的样式

摘要： <h2 style="color: red;">CatPhotoApp</h2> 请注意行内style最好以;来结束。当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。 <h2 style="color: red;"> <st 阅读全文

posted @ 2021-04-30 10:36 Sai佐为阅读(445) 评论(0) 推荐(0)

声明 HTML 文档的文档类型、定义 HTML 文档的标题和正文

摘要：在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，" 阅读全文

posted @ 2021-04-30 10:22 Sai佐为阅读(379) 评论(0) 推荐(0)

创建一组单选按钮、复选框、给选择默认选中项

摘要： radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label（标签）元素中。所有关联的单选按钮应该拥有相同的name属性。下面是一个单选按钮的例子： <label> <input type="r 阅读全文

posted @ 2021-04-30 09:42 Sai佐为阅读(532) 评论(0) 推荐(0)

公告