w3cschoolHTML1

HTML 更换文本的颜色

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

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

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

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

CatPhotoApp

使用CSS选择器定义标签

使用CSS，您可以使用数百种CSS属性来更改元素在页面上的显示方式。
当你输入

CatPhotoApp

时，你就给h2元素添加了inline style(内联样式)。

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

在这个style元素的内部, 你可以为所有h2元素创建一个CSS选择器。例如，如果你希望所有的h2元素都设置为红色, 则你的样式元素将如下所示：

请注意，围绕每个元素的样式，打开和关闭花括号 ({ 和}) 很重要。您还需要确保元素的样式位于开始和结束样式标签之间。最后，请确保将分号添加到每个元素样式的末尾。

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

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

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

你可以看到我们已经在

HTML 给标签增加边框

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

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

HTML 给标签增加圆角边框

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

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

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

这是一个a标签 W3Cschool.cn跳转到W3Cschool.cn

Nesting（嵌套）就是把一个元素放在另一个元素中。

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

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

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

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

HTML 为图片设置超链接

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

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

HTML 为图片添加alt描述

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

HTML 创建项目符号无序列表

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

无序列表以

元素开始，并包含一个或多个
• 元素。

  例如：
  

  
  
  • milk
  
  
  • cheese
  
  

  HTML 创建有序列表

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

  有序列表以

  元素开始，并包含一个或多个
  1. 元素。

     例如：
     

     
     
     1. Garfield
     
     
     2. Sylvester
     
     

     HTML 创建文本输入框

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

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

     你可以用如下方法创建：

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

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

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

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

     HTML 添加表单

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

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

     例如：

     HTML 为表单添加提交按钮

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

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

     this button submits the form

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

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

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

     HTML 添加单选框

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

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

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

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

     Indoor

     HTML 添加复选框

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

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

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

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

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

     Loving

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

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

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

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

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

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

     你可以使用

     来标记一个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 的顺序并不重要。

     然而，