4月3日
创建不同样式
1.前景色样式
<style>.man{color:red;}.b{color:blue;}.c{color: yellow;}.d{color:orange;}.e{color:gray;}.f{color:tan;}.g{color:indigo;}</style>
2.背景色样式
<style>.man{background:red;}.b{background:blue;}.c{background: yellow;}.d{background:orange;}.e{background:gray;}.f{background:tan;}.g{background:indigo;}</style>
.对应class
样式
display: none;/隐藏/
display: block;/块元素/
display: inline;/行元素/
display: inline-block;/行内块元素/
七种不同颜色样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.man{color:red;}.b{color:blue;}.c{color: yellow;}.d{color:orange;}.e{color:gray;}.f{color:tan;}.g{color:indigo;}</style></head><body><h1><a href="#" class="man">红色</a></h1><h1><a href="#"class="b">蓝色</a></h1><h1><a href="#"class="c">黄色</a></h1><h1><a href="#"class="d">橘色</a></h1><h1><a href="#"class="e">灰色</a></h1><h1><a href="#"class="f">tan</a></h1><h1><a href="#"class="g">紫色</a></h1></body>
</html>
一三样式相同，二四样式相同
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.a{color:palegreen;}.b{color:gold;}</style></head><body><h1><a href="#" class="a">标题一</a></h1><h1><a href="#" class="b">标题二</a></h1><h1><a href="#" class="a">标题三</a></h1><h1><a href="#" class="b">标题四</a></h1></body>
</html>
第二种方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.c,.a{color:palegreen;}.d,.b{color:gold;}</style></head><body><h1><a href="#" class="a">标题一</a></h1><h1><a href="#" class="b">标题二</a></h1><h1><a href="#" class="c">标题三</a></h1><h1><a href="#" class="d">标题四</a></h1></body>
</html>空链接的作用 占位 触发交互 保留链接样式 返回顶部