整理:HTML+CSS

1.引用外部字体

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

h2{
  font-family:Lobster;
}

2.字体降级
p {
  font-family: Helvetica, Sans-Serif;//浏览器自动进行字体降级,Helvetica字体不可用时自动降级使用Sans-Serif字体
}

3.alt属性

也被称为alt text, 是当图片无法加载时显示的替代文本。

简而言之,每一张图片都应该有一个alt属性!

4.input的默认值

占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

<input type="text" placeholder="cat photo URL">

5.表单提交

必填项,在元素中加上required属性。用户不填写,就无法提交表单

<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

6.单选按钮

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

注意:所有关联的单选按钮应该使用相同的name属性。

<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>

7.复选框(checkboxes)

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

<label><input type="checkbox" name="personality">1</label>
<label><input type="checkbox" name="personality">2</label>
<label><input type="checkbox" name="personality">3</label>

8.单选框/复选框设置默认选中

使用checked属性,你可以设置复选按钮和单选按钮默认被选中。

为此,只需在input元素中添加属性checked

<input type="radio" name="test-name" checked>

9.div元素

div元素,也被称作division(层)元素,是一个盛装其他元素的通用容器。

所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。

10.id属性

id 属性应该是唯一的,虽然浏览器并不强制唯一,但基于最佳实践,这一点是被广泛认可的,所以请不要给一个以上的元素设置相同的 id 属性。

11.css属性覆盖

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.blue-text{
color:blue;
}
.pink-text {
color: pink;
}
</style>

<h1 class="pink-text blue-text">Hello World!</h1>

注意:在 HTML 中这些 class 如何排序是无所谓的。

在 <style> 部分中 class 声明的顺序却非常重要,第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明,它覆盖了 .pink-text 属性。

12.!important可以覆盖之前的任何样式

color: pink !important;

原文地址:https://www.cnblogs.com/Qian-ManNi/p/11389113.html