本文出自   http://blog.csdn.net/shuangde800

[Codecademy] HTML && CSS课程学习目录

------------------------------------------------------------------------------------------------


Introduction

 
在这节课中，我们要进入下一阶段：
a. 制作排序列表的和不排序列表
b. 改变字体大小，颜色和类型
c. 改变背景颜色
d. 字体对齐




Ordered lists(排序列表)


 排序列表就是在每一行内容的前面有编号，效果如下：

1. 有序列表以<ol>标签开头</ol>结尾。（ol = ordered lists）
2. 有序列表里面的每一项，用<li> </li>括起来。 (li = list item)
3. 有序列表的每一项占一行，所以一般我们把一项的所有内容放在一行里。
   
<!DOCTYPE html>

<html>

	<head>

		<title>Lists</title>

	</head>

	<body>

		<h1>List of my favorite things</h1>

			<ol>

				<li>raindrops on roses</li>

				<li>whiskas on kittens</li>

				<li>call of duty: modern warfare</li>

			</ol>

	</body>

</html>

效果图：




Unordered Lists（不排序列表）




我们已经学了排序列表，对于要编号排序的东西很适合使用它。但是如果我们不需要排序编号呢？我们可以使用unordered lists（不排序列表）。
不排序列表的使用方式和排序列表一样，不过它的标签是<ul></ul>。（ul = unordered lists）。不排序列表的列表项也是用<li></li>标签 
<!DOCTYPE html>

<html>

     <head>

          <title>Unordered Lists</title>

     </head>

     <body>

         <h1>Some random thoughts</h1>

         <p>hahahahaahaha!</p>

         <ul>

             <li>first line</li>

             <li>second line</li>

             <li>third line</li>

             <li>alksdf</li>

         </ul>

     </body>

</html>

效果图：







Lists inside a list（嵌套列表）

我们已经学会了ordered lists 和unordered lists。非常棒！
如果我们想要一个排序列表，但是如果列表项里还嵌套这一个不排序列表怎么办呢？效果图如下： 
<!DOCTYPE html>

<html>

	<head>

		<title>Nested lists</title>

	</head>

	<body>

	    <ul>

	        <li>Boys Names.</li>

	            <ol>

	                <li>Daming</li>

	                <li>Lihua</li>

	                <li>Bob</li>

	            </ol>

	        <li>Girls Names.</li>

	            <ol>

	                <li>Alice</li>

	                <li>Lina</li>

	                <li>Lily</li>

	            </ol>

	    </ul>	

	</body>

</html>

效果图：

Making comments(注释)
我们已经学习了关于列表的大部分内容，是时候换种口味了！
如果html是网页的骨架，那么css是骨架的皮肤和漂亮的衣服。
在学css之前，我们要先学习inline css(内联css)，使用inline css意味着我们可以装饰html页面，而不需要单独创建一个css文件！我们先学这个，是因为这样可以让后面的css学习更加容易！
在学习fonts(字体)之前，先学习comments(注释)是很重要的，你可以使用注释来标记html文件的代码，这样可以帮助你在以后回忆起这段代码的功能。
注释以<!-- 开头，-->结尾，<!-- This is an example of a comment! -->

 


Font size（字体尺寸）

在开口标签处，我们可以使用attributes（属性）来让这个标签实现更多的功能！
一个attributes是一个characteristic (特征)或者一些对内容的描述，在之前已经使用过了<img>中的src和<a>中的href
使用style 属性可以改变字体的尺寸：
<p style="font-size: 12px">
          <p style="font-size: 10px"> Some text for you to make tiny! </p>
          <p style="font-size: 20px"> Some text for you to make normal size!</p>
          <p style="font-size: 40px"> Some text for you to make super big!</p>



Font color（字体颜色）

除了字体大小，还有很多其他属性，比如可以改变字体颜色：
<h2 style="color:red">
如果既要改变颜色，又要改变大小，那么两个都加上去：
<h2 style="color: green; font-size:12px">

代码： 
<!DOCTYPE html>

<html>

	<head>

		<title>Changing the colors!</title>

	</head>

	<body>

		<h1 style="color:green;font-size:16px">Big Heading</h1>

			<p style="color:violet">A giant bear and a little duck were friends.</p>

			<p style="color:red;font-size:10px">But the bear got hungry and ate the duck.</p>

	</body>

</html>

效果：




有各种颜色的网址：
打开


Font family(字体家族)
除了改变字体的大小和颜色，还可以改变字体类型！
只需要在style属性里添加font-family:Helvetica即可，例如
<h2 style="font-family:Garamond">
 

Background color背景颜色


同样，只要在style属性里添加一句background-color:read即可

例如： 

<!DOCTYPE html>

<html>

     <head>

          <title>Sexy background color!</title>

     </head>

     <body style="background-color:brown">

          <h3>Favorite Football Teams</h3>

               <ol style="background-color:yellow">

                    <li>The Hawthorn Football Club</li>

                    <li>San Franscisco 49ers</li>

                    <li>Barcelona FC</li>

               </ol>

     </body>

</html>

效果：



Aligning the text(对齐文字)


可以设置一行字的对齐方式：向左对齐，居中，向右对齐等
同样是在style属性里添加text-align:center 

<!DOCTYPE html>

<html>

     <head>

          <title>Sexy background color!</title>

     </head>

     <body>

          <h3 style="text-align:center">Favorite Football Teams</h3>

               <ol>

                    <li style="text-align:left">The Hawthorn Football Club</li>

                    <li style="text-align:center">San Franscisco 49ers</li>

                    <li style="text-align:right">Barcelona FC</li>

               </ol>

     </body>

</html>


效果：




Strong words!（粗体）
怎样把字变成粗体呢？意外的是，这并不是在style上动手脚，而是使用<strong>标签：
把要变成粗体字的部分，包围<strong></strong>中
例如，把hello world!变成粗体：
<strong>hello world!</strong>


Emphasize words!(斜体)
除了粗体字，我们还会经常使用italicize（斜体）
和设置粗体一样，设置斜体也不是在style里设置的，而是使用<em>标签
例如，把hello world!变成斜体：
<em>hello world!</em>


Summary（小结）

1. 设置排序列表和不排序列表
2. 改变字体的颜色，尺寸，字体类型
3. 在html中添加注释
4. 改变背景颜色
5. 文本对齐
6. 粗体和斜体



 

[Codecademy] HTML&CSS 第三课：HTML Basic II的更多相关文章

  1. [Codecademy] HTML&CSS第八课：Design a Button for Your Webwite

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  2. [Codecademy] HTML&CSS 第七课：CSS: An Overview

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  3. 妙味课堂——HTML+CSS(第三课)

    常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...

  4. 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...

  5. CSS前5课总结

    CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹 第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...

  6. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  7. 【Web探索之旅】第三部分第三课：协议

    内容简介 1.第三部分第三课:协议 2.第四部分预告:Web程序员 第三部分第三课:协议 之前的课,我们学习了Client-Server模型的客户端语言和服务器语言. 客户端语言有HTML,CSS和J ...

  8. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  9. 【JavaScript从入门到精通】第三课

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

随机推荐

  1. mysql函数操作(2)

    <?php $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); $dbh->s ...

  2. Qt中各个widget前后位置的设定（在Qt中，所有问题都要一分为二，QWidget体系和QGraphicsWidget体系）

    这两天在总结一些以往project中遇到的问题,正好别组有同事问我关于Qt中各个widget窗口的前后位置是如何定义的,这里就总结一下: 在Qt中,所有问题都要一分为二,讨论两种不同的情况:一个是最常 ...

  3. 在 Windows Azure 虚拟机中如何备份和还原 Windows 系统磁盘

    备份和还原对于操作真实的系统来说至关重要.对于 Windows Azure 虚拟机环境中的 Windows Server,可以根据自身的需求选择多种不同的工具或将这些工具结合使用来实现备份.下面将对这 ...

  4. Vxlan 原理

    https://www.gitbook.com/book/yeasy/openstack_understand_neutron/details 自己总结一下: 分析 VTEP的情况, 即Vxlan跟V ...

  5. thanks使用注意事项；

    router.get('/api/users/search/:key/:page', function(req, res) { if(_.isEmpty(req.params.key)) { res. ...

  6. python SyntaxError: Non-ASCII character '\xd5' in file

    我使用的是python2.7, 在pycharm想运行程序,但是却报出了SyntaxError: Non-ASCII character '\xd5' in file 原因是因为源码中包含了中文注释, ...

  7. Effective Objective-C 读书笔记

    一本不错的书,给出了52条建议来优化程序的性能,对初学者有不错的指导作用,但是对高级阶段的程序员可能帮助不是很大.这里贴出部分笔记: 第2条: 使用#improt导入头文件会把头文件的内容全部暴露到目 ...

  8. 【MongoDB数据库】MongoDB 命令入门初探

    MongoDB是一款NoSql数据库,使用了"面向集合"(Collection-Oriented)原理,意思是数据被分组存储在数据集中,被称为一个集合(Collection).每一 ...

  9. linux下查看文件内容cat,more,less

    1. 查看文件内容经常使用的命令 cat : 由第一行显示文件内容 tac:  从最后一行開始显示.与cat相反 nl :  文件内容和行号一起输出 more: 一页一页显示 less: 与more类 ...

  10. HTML之学习笔记（九）表单

    html的表单标签是一个系列,用开闭的<form>标签包裹起来的组合.表单的作用是将我们要向服务器提交数据的数据包含起来,然后提交到服务器处理.(使用表单是浏览器提交客户端数据到服务端的方 ...