Say Hello to HTML Element Incomplete
1 <h1>Hello</h1>
1就是一个HTML元素,h1是header1的简写,意思是一级标题。
大部分元素都有一个开始标记和一个结束标记。
开始标记像这样:< h1>
结束标记像这样:< /h1>
Headline with the h2 Element Incomplete
h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT等。h1是主标题,h2是副标题,h3、h4、h5、h6依次递减字体的大小。
在主标题下面创建一个副标题,标题内容是:CatPhotoApp
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
Inform with the Paragraph Element Incomplete
p是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样。
任务:在副标题下面新增一个段落,段落内容是:Hello Paragraph。
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
Uncomment HTML Incomplete
注释有两个功能:
1、想让某一段代码不起作用,但你又不想删除这一段代码。
2、就是给代码添加一些说明,方便团队合作或日后自己查看,但又不想影响代码本身。
我们先学习如何删除注释,再学习如何添加注释。
提示:可以通过删除< !–和–>来删除注释。
任务:试着先把一级标题、二级标题、段落的注释都删除掉。
<!--
<h1>Hello World</h1>
<h2>我家的猫咪</h2>
<p>Hello Paragraph</p>
-->
Comment out HTML Incomplete
注释的开始标记是< !–
结束标记是–>
任务:把主标题和段落都注释掉,但把副标题留着。
<!--h1>Hello World</h1-->
<h2>我家的猫咪</h2>
<!--p>Hello Paragraph</p-->
Fill in the Blank with Placeholder Text Incomplete
Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义。
为什么叫lorem ipsum text呢?
是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。
从公元16世纪开始lorem ipsum text就被当做占位符了,这种传统延续到了互联网时代。
于此同时,孙悟空也在五指山下压了500年,然后就进化成程序猿了,是不是很巧合,哈哈。
任务:把段落中的文本替换为:Monkey code 猴哥猴哥,你真了不得,金箍棒在手,问世间谁是英雄。
<h1>西游记</h1>
<h2>齐天大圣</h2>
<h2>孙悟空</h2>
<p>Monkey code 猴哥猴哥,你真了不得,金箍棒在手,问世间谁是英雄</p>
Delete HTML Elements Incomplete
手机的屏幕空间是有限的。
让我们删除不必要的元素,开始设计我们的CatPhotoApp。
任务:删除你的h1元素以简化视图。
<h1>Hello cat!</h1>
<h2>我家的猫咪</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>
Change the Color of Text Incomplete
现在让我们来改变某些文本的颜色。
我们可以通过修改h2元素的style(样式)来达到目的。
样式的属性有很多,其中color用来指定颜色。
以下是将你的h2元素的文本颜色设置为蓝色的示例代码:
< h2 style=”color: blue”>CatPhotoApp< /h2>
任务:修改你的h2元素的style,让文本的颜色变为红色。
<h2 style="color:red">我家的猫咪</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>
Use CSS Selectors to Style Elements Incomplete
样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它。
当你键入<h2 style="color: red">CatPhotoApp</h2>
,你就给h2元素添加了inline style(内联样式)。
内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表CSS(Cascading Style Sheets)。
在代码的最顶端,创建一个如下的style元素:
<style>
</style>
在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如,如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样:
<style>
选择器 {属性名称: 属性值;}
h2 {color: red;}
</style>
注意:一定要在属性值的后面加上分号;。
任务:删除你的h2元素的内联样式,然后创建一个style元素。添加必要的CSS,使所有h2元素变为蓝色。
<style>
h2{color:blue}
</style>
<h2 >我家的猫咪</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>
Use a CSS Class to Style an Element Incomplete
上节课我们学习了元素选择器,这节课我们学习类选择器。
我们先声明一个类选择器:
<style>
.blue-text {
color: blue;
}
</style>
上面的代码在 <style>
标记中声明了一个叫做 blue-text 的类样式。
然后在h2元素上应用我们声明的类选择器:
<h2 class="blue-text">CatPhotoApp</h2>
注意:在CSS中,类选择器应该添加.为前缀。
而在HTML中,class属性不能添加.为前缀。
这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。
任务:在你的style元素中,修改h2选择器为.red-text选择器,并把颜色值从blue修改为red。
最后在h2元素上应用我们声明的.red-text选择器。
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">我家的猫咪</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>
Style Multiple Elements with a CSS Class Incomplete
你可以在 HTML 元素的开始标记中通过使用class=”your-class-here”来将 class 附加到相关元素中。
CSS 类选择器必须添加.为前缀,如下:
.blue-text {
color: blue;
}
但在HTML中class属性的值不需要添加.为前缀,如下:
<h2 class="blue-text">CatPhotoApp</h2>
将red-text类应用到h2和p元素中。
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">我家的猫咪</h2>
<p class="red-text">在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>
Change the Font Size of an Element Incomplete
字号是由样式属性font-size来控制的, 如下:
h1 {
font-size: 30px;
}
用下面的文本来创建第二个p元素:
养动物有的时候,就是介于爱与恨之间,当你钦羡别人萌宠这么可爱的时候,你一定没有想过,狗狗和猫猫会到处拉屎,甚至会屯老鼠,啃鞋子,用爪子爬门,你不理它,它就挠你,你要对它发脾气,它会比你更来劲。所以,狗猫慎入,没有一定的准备,切勿随便去侍养动物。它们一旦认定你了,你就是它们的主人,如果你抛弃它们,它们必定心中重创。
任务:让第一个段落和第二个段落的font-size都为16px。
请不要为第二个段落添加 class 属性
<style>
.red-text {
color: red;
}
P{
font-size:16px;
}
</style>
<h2 class="red-text">我家的猫咪</h2>
<p class="red-text">在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>
<p>养动物有的时候,就是介于爱与恨之间,当你钦羡别人萌宠这么可爱的时候,你一定没有想过,狗狗和猫猫会到处拉屎,甚至会屯老鼠,啃鞋子,用爪子爬门,你不理它,它就挠你,你要对它发脾气,它会比你更来劲。所以,狗猫慎入,没有一定的准备,切勿随便去侍养动物。它们一旦认定你了,你就是它们的主人,如果你抛弃它们,它们必定心中重创</p>
Set the Font Family of an Element Incomplete
Import a Google Font Incomplete
Specify How Fonts Should Degrade Incomplete
Add Images to your Website
Size your Images
CSS包含一个控制元素宽度的width属性。像控制字体一样,我们使用px(像素)来指定图片的宽度。
例如,如果我们想要创建一个名为larger-image的类选择器,把HTML元素的宽度设定为500像素,我们使用:
<style>
.larger-image {
width: 500px;
}
</style>
任务:创建一个名为smaller-image的类选择器,然后用它来改变图片尺寸,使图片仅有100像素宽。
<style>
.smaller-image{
width: 100px;
</style>
<img class="smaller-image" src="/images/relaxing-cat.jpg">