一、CSS
rgb颜色对照表：https://www.114la.com/other/rgb.htm
1、在标签上设置style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: #2459a2; height: 45px" >ff</div> <div>2</div> <div>3</div> </body> </html>
2、编写css样式
- 标签的style属性；
- 写在head里面，style标签中写样式；
id选择器
class选择器
标签选择器
层级选择器
组合选择器
属性选择器
id选择器:
#id选择器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ #此处的#的值，与下面标签中的id相对应，为标签赋予样式； background-color: #2459a2; height: 45px; } </style> </head> <body> <div id="i1" >ff</div> #此处就有了样式 <div >2</div> <div>3</div> </body> </html>
class选择器:
##class选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .i1{ #此处点后的值，与下面标签class的值相对应，为标签赋予样式； background-color: #2459a2; height: 45px; } </style> </head> <body> <div class="i1" >ff</div> #此处就有了样式 <div >2</div> <div>3</div> </body> </html>
标签选择器:
##注释 /* .i1{ background-color: #2459a2; height: 45px; } */ #标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ #下面标签中的所有div设置上此样式 background-color: #2459a2; height: 45px; } </style> </head> <body> <div class="i1" >ff</div> <div >2</div> <div>3</div> </body> </html>
层级选择器 :
##层级选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span div{ #span标签下的div标签拥有此样式； background-color: #dddddd; height: 45px; } </style> </head> <body> <div class="i1" >ff</div> <span>this is span <div >2</div> </span> <div>3</div> </body> </html> ##层级选择器扩展 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 div p{ #此处可以写多层，但是不要写太多，太多的时候，直接定义一个.xx即可； background-color: #dddddd; height: 45px; } </style> </head> <body> <div class="i1" >ff</div> <span class="c1">this is span <div >2 <P>p标签</P> </div> </span> <div>3</div> </body> </html>
组合选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2,#i3{ #与id选择器类似，可以用都好分隔，写多个 background-color: #dddddd; height: 25px; } </style> </head> <body> <div id="i1" >ff</div> <div id="i2" >ff</div> <div id="i3" >ff</div> </body> </html>
属性选择器：
##对选择到的标签再通过属性再进行一次筛选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type='text']{width: 100px; height: 200px} #中括号前面是一个选择器 input[n='w']{width: 100px; height: 200px} .c1[n='m']{width: 100px; height: 200px} #先选择具有c1的，然后在筛选n=m的 </style> </head> <body> <input type="text"> <input type="password" n="w"> <input class="c1" type="password" n="m"> </body> </html>