使用一个CSS Class去给标签定义Style
类是可重用的样式,可以添加到HTML元素。
下面是一个CSS类声明的例子:
<style>
.blue-text {
color: blue;
}
</style>
你可以看到我们已经在 <style>
标签中创建了一个名为 blue-text
的CSS类。
你可以将类应用于HTML元素,如下所示:
<h2 class="blue-text">CatPhotoApp</h2>
注意,在CSS样式元素中,类选择器应该添加.
为前缀。而在HTML元素的类声明中,类属性不能添加.
为前缀。
在你的style
元素中,将h2
选择器修改为.red-text
选择器,并将颜色值从blue
修改为red
。
最后,给你的 h2
元素的 class
属性的值为.red-text
。
HTML 给标签增加边框
CSS 边框具有 style(样式)
、color(颜色)
、width(宽度)
等属性。
例如,如果我们想要设定一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid),代码如下所示:
<style>
.thin-red-border {
border-color: red;
border- 5px;
border-style: solid;
}
</style>
任务:创建一个叫 thick-green-border
的class,设定它的边框宽度为10px、边框样式为solid、边框颜色为绿色,并将该class应用于你的猫咪照片上。
请记住,你可以应用多个class到一个元素,只需要在多个class之间用空格分开即可。例如:
<img class="class1 class2">
<style>
.thick-grenn-border{border-10px;
border-style:solid;
border-color:green;}
</style>
</style>
HTML 创建文本输入框
现在我们来创建一个Web表单。
文本输入框是获取用户输入的一种方便的方法。
你可以用如下方法创建:
<input type="text">
注意,input
元素是自关闭的。
任务:在列表下创建一个type(类型)为 text
的input
元素。
<input type="text">
添加文本框设定预定值(占位符)属性placeholder
用法<input type="text" placceholder="预设文本">
效果
HTML 添加表单
你可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form
元素上添加一个action
属性来执行此操作。
action
属性的值指定了表单提交到服务器的地址。
例如:
<form action="/url-where-you-want-to-submit-form-data"></form>
把你的文本输入框嵌套到form
元素中。并为此form
元素添加action="/submit-cat-photo"
。
<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
HTML 为表单添加提交按钮
我们在form中添加一个 submit
(提交)按钮。点击此按钮,表单中的数据将会被发送到你使用表单 action
属性指定的地址上。
以下是一个submit按钮的例子:
<button type="submit">this button submits the form</button>
在你的 form
元素中添加一个提交按钮,并以类型为 submit
, "Submit"为按钮文本。
<form action="/submit-cat-photo">
<button type="submit">Submit</button>
<input type="text" placeholder="cat photo URL">
</form>
效果
HTML 添加单选框
你可以使用单选按钮来解决你希望用户只给出一个答案的问题。
单选按钮是 input
输入框的一种类型。
每个单选按钮都应该嵌套在自己的 label(标签)
元素中。
所有关联的单选按钮应具有相同的 name
属性。
下面是一个单选按钮的例子:
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
在你的表单中添加两个单选按钮,一个叫 indoor
,另一个叫 outdoor
。
<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>
HTML 添加复选框
checkboxes(复选按钮)
通常用于可能有多个答案的问题的形式。
复选按钮是 input
的输入框的一种类型。
每一个复选按钮都应嵌套在其自己的 label
元素中。
所有关联的复选按钮输入应该具有相同的 name
属性。
以下是一个复选按钮的示例:
<label><input type="checkbox" name="personality"> Loving</label>
任务:为你的表单添加三个复选按钮,每个复选按钮都应嵌套在其自己的 label
元素,所有复选按钮的name
属性必须为personality
。
<label><input type="checkbox" name="personality">Loving</label>
<label><input type="checkbox" name="personality">like</label>
<label><input type="checkbox" name="personality">hate</label>
效果
HTML 在div元素中嵌套多个元素
div
元素,也被称作division(层)元素,是一个盛装其他元素的通用容器。
div
元素是最常用的HTML元素。所以可以利用CSS的继承关系把 div
上的CSS传递给它所有子元素。
你可以使用<div>
来标记一个div元素的开始,并使用</div>
来标记一个div元素的结束。