官方资料
鱼C课程案例库:/html5/
html5速查手册:/html5/
css速查手册:/css3/
学习正文
通用选择器,用 * 匹配,样式辐射到全部范围:
<!DOCTYPE html><html><head><title>通用选择器</title><meta charset="utf-8"><style type="text/css">* {padding: 10px;background-color: #d1feef;}</style></head><body><h1>通用选择器</h1><p>“妈,三年之期到了,这三年里,我都按照您的遗言去做了,现在整个苏家乃至半个江城,没有谁不知道那从林家入赘过来的弃少就是个废物!”</p><p>“妈,我知道,你之所以要我隐忍三年,是担心我会遭受家族人的迫害,你说过,我天赋异禀,将来必是人中龙凤,但出身不好,无权无势,争不过那些人,一旦展露出一些天赋,必会招来杀身之祸,所以你逼我装成一个废物。” </p><p>“可是…妈,您并不知道,您错了,大错特错,林家在我林阳的眼里,只是一群土鸡瓦狗!我林阳何惧一群土鸡瓦狗?”</p><p>“林家抛弃了我,您也不希望我再回林家,我跟林家已经没有关系。今天来看您,是想告诉您,三年之期结束,我…林阳!不想再当废物了!”</p></body></html>
元素选择器,通过元素匹配样式:
<!DOCTYPE html><html><head><title>元素选择器</title><meta charset="utf-8"><style type="text/css">* {padding: 10px;background-color: #d1feef;}h1 {text-align: center;}p {text-indent: 2em;}span {color: grey;padding: 0px;}img {width: 212px;}</style></head><body><h1>元素选择器</h1><p>“妈,<span>三年之期</span>到了,这三年里,我都按照您的遗言去做了,现在整个苏家乃至半个江城,没有谁不知道那从林家入赘过来的弃少就是个废物!”</p><p>“妈,我知道,你之所以要我隐忍三年,是担心我会遭受家族人的迫害,你说过,我天赋异禀,将来必是人中龙凤,但出身不好,无权无势,争不过那些人,一旦展露出一些天赋,必会招来杀身之祸,所以你逼我装成一个废物。” </p><p>“可是…妈,您并不知道,您错了,大错特错,林家在我林阳的眼里,只是一群土鸡瓦狗!我林阳何惧一群土鸡瓦狗?”</p><p>“林家抛弃了我,您也不希望我再回林家,我跟林家已经没有关系。今天来看您,是想告诉您,三年之期结束,我…林阳!不想再当废物了!”</p><img src="Pig.png"></body></html>
类选择器,采用全局属性 class 进行匹配:
<!DOCTYPE html><html><head><title>类选择器</title><meta charset="utf-8"><style type="text/css">* {padding: 10px;background-color: #d1feef;}h1 {text-align: center;}span {color: grey;padding: 0px;}img {width: 212px;}.slogan {text-align: center;color:#2eeb96;}.content {text-indent: 2em;}</style></head><body><h1>类选择器</h1><p class="slogan">这是类选择器的使用</p><p class="content">“妈,<span>三年之期</span>到了,这三年里,我都按照您的遗言去做了,现在整个苏家乃至半个江城,没有谁不知道那从林家入赘过来的弃少就是个废物!”</p><p class="content">“妈,我知道,你之所以要我隐忍三年,是担心我会遭受家族人的迫害,你说过,我天赋异禀,将来必是人中龙凤,但出身不好,无权无势,争不过那些人,一旦展露出一些天赋,必会招来杀身之祸,所以你逼我装成一个废物。” </p><p class="content">“可是…妈,您并不知道,您错了,大错特错,林家在我林阳的眼里,只是一群土鸡瓦狗!我林阳何惧一群土鸡瓦狗?”</p><p class="content">“林家抛弃了我,您也不希望我再回林家,我跟林家已经没有关系。今天来看您,是想告诉您,三年之期结束,我…林阳!不想再当废物了!”</p><img src="Pig.png"></body></html>
id 选择器,通过 HTML 的 id 进行匹配,id 值必须唯一:
<!DOCTYPE html><html><head><title>类选择器</title><meta charset="utf-8"><style type="text/css">* {padding: 10px;background-color: #d1feef;}h1 {text-align: center;}span {color: grey;padding: 0px;}img {width: 212px;}.slogan {text-align: center;color:#2eeb96;}.content {text-indent: 2em;}#ol {color: red;}</style></head><body><h1>类选择器</h1><p class="slogan">这是类选择器的使用</p><p class="content">“妈,<span id="ol">三年之期</span>到了,这三年里,我都按照您的遗言去做了,现在整个苏家乃至半个江城,没有谁不知道那从林家入赘过来的弃少就是个废物!”</p><p class="content">“妈,我知道,你之所以要我隐忍三年,是担心我会遭受家族人的迫害,你说过,我天赋异禀,将来必是人中龙凤,但出身不好,无权无势,争不过那些人,一旦展露出一些天赋,必会招来杀身之祸,所以你逼我装成一个废物。” </p><p class="content">“可是…妈,您并不知道,您错了,大错特错,林家在我林阳的眼里,只是一群土鸡瓦狗!我林阳何惧一群土鸡瓦狗?”</p><p class="content">“林家抛弃了我,您也不希望我再回林家,我跟林家已经没有关系。今天来看您,是想告诉您,三年之期结束,我…林阳!不想再当废物了!”</p><img src="Pig.png"></body></html>