w3cschoolHTML1_html w3cschool 背景颜色-CSDN博客

HTML 更换文本的颜色

现在我们来改变一些文字的颜色。

我们可以通过修改 h2 元素的 style (样式)来做到这一点。

样式的属性有很多，其中color用来指定颜色。

以下是将你的 h2 元素的文本颜色设置为蓝色的示例：

<h2 style=“color: blue”> CatPhotoApp </h2>

使用CSS选择器定义标签

使用CSS，您可以使用数百种CSS属性来更改元素在页面上的显示方式。
当你输入<h2 style=“color: red”>CatPhotoApp</h2>时，你就给h2元素添加了inline style(内联样式)。

这是添加元素的样式的一种方法，但更好的方法是使用CSS，它代表(Cascading Style Sheets)层叠样式表。
在代码的顶端，创建一个如下所示的style元素，：

使用一个CSS Class去给标签定义Style

类是可重用的样式，可以添加到HTML元素。

下面是一个CSS类声明的例子：

你可以将类应用于HTML元素，如下所示：

请注意，在CSS样式元素中，类选择器应该添加.为前缀。而在HTML元素的类声明中，类属性不能添加.为前缀。

HTML 设置标签的字体大小

字体大小由 font-size CSS属性控制，如下所示：

h1 {
font-size: 30px;
}

HTML 设置标签的字体样式

你可以使用 font-family 属性来设置元素的字体。

例如，如果要将 h2 元素的字体设置为 Sans-serif ，则可以使用以下CSS：

h2 {
font-family: Sans-serif;
}

HTML 处理多个字体降级

在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。

当某种字体不可用时，你可以让浏览器将其 “降级” 为另一种字体。

例如，如果你希望元素使用 Helvetica 字体，但是当 Helvetica 不可用时也会降级为Sans-Serif 字体，则可以使用此CSS样式：
p {
font-family: Helvetica, Sans-Serif;
}

HTML 给页面添加图片

你可以使用 img 元素将图片添加到您的网站，并使用 src 属性指向一个图片的具体地址。

例子如下：

img 元素具有 alt 属性。alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示。

让我们在上面的 img 示例中添加一个 alt 属性：

请注意，img 元素是自关闭元素，不需要结束标签。

HTML 调整网页里图片大小

CSS包含一个 width 的属性，用于控制元素的宽度。就像使用字体一样，我们将使用 px（像素）来指定图片的宽度。

例如，如果我们要创建一个名为 larger-image 的CSS类，把HTML元素的宽度设定为500像素，我们将使用：

HTML 给标签增加边框

CSS 边框具有 style(样式)、color(颜色)、width(宽度) 等属性。

例如，如果我们想要设定一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid)，代码如下所示:

HTML 给标签增加圆角边框

猫咪图片的边框目前有尖角。我们可以用一个叫 border-radius（边框半径）的CSS属性来改变它的边框变成圆角。它的值可以为像素（px）也可以为百分比(%)

HTML 设置链接锚元素外部页面

a元素，也叫anchor（锚点）元素，用于链接到当前页面之外的内容。
以下是一个例子：

<p>这是一个a标签 <a href=“https://www.w3cschool.cn”>W3Cschool.cn</a>跳转到W3Cschool.cn</p>
Nesting（嵌套）就是把一个元素放在另一个元素中。

HTML 使用#符合设置固定链接

有时你想要在你的网站上添加一个 a 元素，但你还不知道将它链接到哪里，这时你可以使用固定连接。

当你使用 jQuery 更改链接的行为时，这也很方便，我们稍后将会了解。

把 a 元素的 href 属性的值替换为一个 # （# 也称为哈希符号），将其转换为一个固定链接。

HTML 为图片设置超链接

你可以通过将某元素嵌套在a元素中使其变为一个链接。

把你的图片嵌入到a元素中。例子如下：

HTML 为图片添加alt描述

alt 属性，是当图片无法显示时的替代文本。alt 属性对于盲人或视觉障碍的用户理解图片中的内容非常重要，搜索引擎也会搜索alt 属性来了解图片的内容。

HTML 创建项目符号无序列表

HTML具有用于创建 unordered lists（无序列表），或带项目符号列表的特殊元素。

无序列表以 <ul> 元素开始，并包含一个或多个<li>元素。

例如：
<ul>
<li>milk</li>
<li>cheese</li>
</ul>

HTML 创建有序列表

HTML具有用于创建ordered lists（有序列表）, 或数字编号列表的特殊元素。

有序列表以<ol>元素开始，并包含一个或多个<li>元素。

例如：
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>

HTML 创建文本输入框

现在我们来创建一个Web表单。

文本输入框是获取用户输入的一种方便的方法。

你可以用如下方法创建：

注意，input元素是自关闭的。

HTML 为文本输入框设定预定值

placeholder text（占位符）是用户在 input 框输入任何内容之前放置在 input 框中的预定义文本。

你可以创建如下所示的占位符：

HTML 添加表单

你可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form元素上添加一个action属性来执行此操作。

action属性的值指定了表单提交到服务器的地址。

例如：

HTML 为表单添加提交按钮

我们在form中添加一个 submit (提交)按钮。点击此按钮，表单中的数据将会被发送到你使用表单 action 属性指定的地址上。

以下是一个submit按钮的例子：

<button type=“submit”>this button submits the form</button>

HTML 使用HTML5技术把表单设置为必填

对于表单，你可以指定某些选项为required（必填项），只有当用户填写了该选项后，用户才能够提交表单。

例如，如果你想要一个文本输入框设置为必填项，你可以在 input 元素中加上 required 属性，你可以使用：
<input type=“text” required>

HTML 添加单选框

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

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

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

下面是一个单选按钮的例子：

<label><input type=“radio” name=“indoor-outdoor”> Indoor</label>

HTML 添加复选框

checkboxes（复选按钮）通常用于可能有多个答案的问题的形式。

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

每一个复选按钮都应嵌套在其自己的 label元素中。

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

以下是一个复选按钮的示例：

<label><input type=“checkbox” name=“personality”> Loving</label>

HTML 使用checked属性设置复选框和单选框默认被选中

使用 checked 属性，你可以设置一个单选框和复选框默认被选中。

为此，只需在 input 元素中添加属性checked 。例如：

HTML 在div元素中嵌套多个元素

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

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

你可以使用<div>来标记一个div元素的开始，并使用</div>来标记一个div元素的结束。

HTML 为div元素设置背景颜色

你可以使用 background-color 属性来设置一个元素的背景颜色。

例如，如果你想要设置一个元素的背景颜色为green，你可以将其放在你的 style 元素中：

.green-background {
background-color: green;
}

HTML 为标签添加ID属性

除了 class属性之外，每一个 HTML 元素也可以具有 id 属性。
id 属性应该是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。所以请不要给一个以上的元素相同的 id 属性。

以下是一个例子，说明如何设置h2 元素的id属性为cat-photo-app。

HTML 使用ID属性设置标签样式

关于id属性的一个很酷的事情是，像类选择器一样，你可以使用CSS来设计样式。

以下是一个示例，说明如何使用 cat-photo-element 的id属性来获取元素，并设置背景颜色为绿色。在你的style 元素中：

#cat-photo-element {
background-color: green;
}
请注意，在你的 style 元素中，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。

HTML 使用padding布局页面标签

有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素与其边框 border 之间的距离。

HTML 使用margin布局页面标签

元素的 margin （外边距）控制元素 border （边框）和周围元素实际所占空间的距离。

HTML 使用负值设置页面元素的margin属性

元素的 margin （外边距）控制元素的 border（边框）和周围元素实际所占空间的距离。
如果将一个元素的 margin 设置为负值，则元素将会变大。

HTML 为不同方向padding设置不同的值

有时你将需要自定义一个元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。
如:
.red-box {
background-color: red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

HTML 为不同方向margin设置不同的值

同上，只是改个单词

HTML CSS中padding简写

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，如下所示：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

HTML CSS中margin简写

同上

CSS 样式的继承

每一个 HTML 页面都有一个 body 元素。
如下例子所示，通过用空格分隔多个 class 属性，可让 HTML 元素应用多个 class 属性：

class=“class1 class2”

注意：在 HTML元素中列出这些 class 的顺序并不重要。

然而，<style> 部分中的 class 声明的顺序是重要的，第二个声明将始终优先于第一个声明。因为 .blue-text 是第二个声明，它会覆盖 .pink-text 的属性。但是，id属性始终是具有更高的优先级。而内联样式又比id更加高级。
当然，还有一个最强大的方法
!important
举例如下：

color: pink !important;