众人好，我是幻想国。
本课程针对零根基门生，学完以后，也许自力编写H5程序。本课程免费，想要报名的门生也许戳《等候已久的编程熏陶开课了》。
学完本课须要
10分钟达成功课仅需2分钟
一、回头上堂课
《零根基学编程第7课：用class写Html元素的名目属性》
上堂课讲了class与padding，特别详细，同砚们也许点击上头的链接去复习下。
功课：写代码体现出上面的图形
参考谜底下列：
在HTML(Body)框中写入
spanclass="black"
spanclass="rd"1/span
spanclass="rd"2/span
spanclass="rd"3/span
spanclass="yllow"4/span
spanclass="yllow"5/span
spanclass="yllow"6/span
spanclass="blu"7/span
spanclass="blu"8/span
spanclass="blu"9/span
span
在CSS框中写入
.rd{
background-color:rd;
font-siz:20px;
font-wight:;
padding-top:10px;
padding-bottom:10px;
padding-lft:10px;
padding-right:10px;
color:#fff;
}
.yllow{
background-color:yllow;
font-siz:20px;
font-wight:;
padding-top:10px;
padding-bottom:10px;
padding-lft:10px;
padding-right:10px;
color:#fff;
}
.blu{
background-color:blu;
font-siz:20px;
font-wight:;
padding-top:10px;
padding-bottom:10px;
padding-lft:10px;
padding-right:10px;
color:#fff;
}
.black{
display:block;
background-color:black;
padding-top:20px;
padding-bottom:20px;
padding-lft:20px;
padding-right:20px;
}
就也许获得下列截图的成效。
这个功课是视察同砚们对padding的领会，以及对styl写在css与class的运用。
简捷来说，也许用下列环节来达成：
在元素中写一个class，而且赠给一个名字，比方spanclass="grn"。
对应的，咱们须要在css中创造一个.grn{}。（不要遗漏grn前方的点“.”）
咱们在.grn背面的{}中写入名目属性，比方.grn{background-color:grn;}。
而在领会何如把红黄蓝的方格放入黑色方格中，咱们也许云云领会：
把红黄蓝方格视为一个总体，而且他是黑色方格中的一个部份。
黑色方格就像枕头套，红黄蓝方格就像枕头。
枕头套太大，枕头过小，以是枕头套与枕头间有闲暇。
看完功课诠释后仍然不能领会的话，请在群里发问哦。
二、正式引见下class
class翻译成班级，咱们先看上面的例子去领会：
pclass="on"/p
pclass="two"/p
pclass="on"/p
咱们把上头的p/p元素比方成同砚，以是上头一国有3位同砚。既然是同砚，就要有班级吧，咱们怎样晓得上头3位同砚都是哪个班级的？那便是看class了。第一个和第三个同砚的class是on，那他们便是1班的，第二个同砚的class是two，那他便是2班的。有点物以类聚的感触，class雷同的元素，体现出来的名目也是雷同。
咱们用专科术语引见下class。
class属性规矩元素的类名（classnam）：
class翻译成专科术语，叫做类名。
元素的类属性，例子：pclass="on"/p，p/p是元素，class="on"是类属性。
class属性大普遍时刻用于指向名目表中的类（class）:
名目表：css
css中的类，例子：.on{background-color:rd}
三、元素也许有多个class
咱们来看看上面的例子：
HTML(Body)中：
pclass="ontwothr"Giant/p
CSS中：
.on{background-color:rd;}
.two{padding-top:5px;padding-bottom:5px;}
.thr{font-siz:36px;}
.on.two.thr{color:whit;}
在这个例子中，咱们也许看到p中的class内部有三个单词，别离是：
on
two
thr
这三个单词是用空格去远隔的。
而在css中，又有相对应的ontwothr名目，而后尚有一个.on.two.thr。
究竟p在页面上显示出来的名目是甚么样的呢？是只显示ontwothr此中的一个名目呢？仍然三个名目都显示出来？要解开这个谜题，咱们把代码复制粘贴到咱们“浏览原文”的编纂器里，获得上面的截图。
咱们也许看到，Giant这个文字：
赤色的布景颜色
上头上面的间隔为5px
字体巨细是36px
以是，元素是也许有多个class的，而且会有多个class叠加起来的成效。
诠释：class属性不能在下列HTML元素中运用：bas,had,html,mta,param,script,styl以及titl。
提醒：也许给HTML元素赋与多个class，比如：spanclass="lft_mnuimportant"。这么做也许把几多个CSS类兼并到一个HTML元素。
提醒：类名不能以数字发轫！惟有IntrntExplorr支撑这类做法。
四、功课
功课一：
上面这段代码在网页上体现出来，字领悟是赤色的，仍然绿色的？为甚么？
HTML(Body)
pclass="rdgrn"目前是牛市仍然熊市？/p
CSS
.rd{color:rd;}
.grn{color:grn;}
功课二：
上面这段代码在网页上体现出来，字领悟是赤色的，仍然绿色的？为甚么？
HTML(Body)
pclass="rdgrn"华夏的股市高涨是赤色的仍然绿色的？/p
CSS
.grn{color:grn;}
.rd{color:rd;}
功课三：
上面这段代码在网页上体现出来，字领悟是赤色的，仍然绿色的？为甚么？
HTML(Body)
pclass="rdgrn"落日无尽好，可是近傍晚/p
CSS
.grn{color:grn;}
.rd{color:rd;}
.grn.rd{color:whit;}
五、探望
近来这几堂课，同砚们感觉进度是快了仍然慢了？投个票，我会遵循投票的终于去调换进度。
感觉本文还也许的话，
也许给幻想国打赏0.99元。
让幻想国跟家人好嘱托，
幻想国的时候花去哪儿了。
下列是往期教室索引：
零根基学编程第1课：必需晓得自身学的有没实用
零根基学编程第2课：Html标签的准确写法
零根基学编程第3课：Html标签严谨的是门当户对
零根基学编程第4课：Html的读法是从内到外
零根基学编程第1周之你问我答
零根基学编程第5课：Html元素的名目属性
零根基学编程第6课：Html中span的用法
零根基学编程第7课：用class写Html元素的名目属性
幻想国