本文出自   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. 19.java.lang.NoClassDefFoundException

    java.lang.NoClassDefFoundException未找到类定义错误 当Java虚拟机或者类装载器试图实例化某个类,而找不到该类的定义时抛出该错误. 违背安全原则异常:Secturit ...

  2. 影响世界的IT

    MIT BBS上说微软电话面试的一道题就是"Who do you think is the best coder,and why?”.我觉得挺有意思的,也来凑个热闹.排名不分先后. 1.Bi ...

  3. QCA4002/QCA4004 为主流家电和消费电子产品推出低功耗Wi-Fi平台

    美国高通公司日前宣布,其子公司高通创锐讯推出全新芯片系列,这是低功耗Wi-Fi解决方案系列的一部分,可连接组成物联网的各种设备.QCA4002和QCA4004网络平台在芯片上纳入IP堆栈及完整的网络服 ...

  4. delphi 实现vip126发邮件

    本例是 TSimpleThread , TSimpleList, IdhttpEx 网页模拟(POST)的综合运用. Demo只写了发送,但亦可收取,详见源码. (此源码写于2年前,那时还写得不好,请 ...

  5. 使用gSoap做一个简单的CS系统

    首先介绍一下gSoap,这是一个非常厉害的网络库,封装程度非常高而且跨平台. 支持SSL链接,数据格式为XML. 介绍地址: http://sourceforge.net/projects/gsoap ...

  6. 继承ViewGroup研究(汇总) 一、二、三

    转载过来:为一.二.三版本. 仅供参考: 继承ViewGroup研究(1) --简介和一个小Demo 又翻开一个新篇章了,哈哈,上一回学习的是继承View,关于继承View个人感觉不是那么完美,做技术 ...

  7. drupal7中CKEditor开启上传图片功能

    在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...

  8. Dynamics CRM 2013 初体验(1):系统的安装

    最近收到Microsoft的Dynamics CRM 2013 beta测试邀请,终于让我掀开了它神秘的面纱.自从去年的Dynamics CRM 2012 December补丁包发布后,系统就添加了很 ...

  9. SQL学习之用通配符进行数据过滤

    一.Like操作符 之前介绍的所有的操作符都是针对已知值进行过滤.不管匹配一个值还是多个值,检验大于还是小于已知值,或者检查某个范围的值,其共同点是过滤中使用的值都是已知的. 但是这种方法并不是任何时 ...

  10. ASP.NET动态生成图片样式的验证码

    我们在设计用户登录模块时,经常会用到验证码,可以有效地防止黑客软件的恶意破解. 在此我就直接放置一个网页链接,以后用的时候可以当做备忘! 此连接中有多种验证码图片的样式可供参考. http://www ...