写的位置:
<head> <meta charset="UTF-8"> <title>Title</title> <style> css样式所在 </style> </head>
注释:
/* 注释内容 */
id选择器:标签id对应样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1 { background-color: red; height: 48px; } </style> </head> <body> <div id="i1"></div> </body> </html>
class选择器:.样式名称
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1"></div> </body> </html>
标签选择器:所有标签对应的应用样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1"></div> </body> </html>
层级选择器(关联选择器):空格分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span div{ background-color: red; height: 48px; } </style> </head> <body> <span> <div></div> </span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 div{ background-color: red; height: 48px; } </style> </head> <body> <span class="c1"> <div></div> </span> </body> </html>
组合选择器,逗号分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1,.c2,.c3 div{ background-color: red; height: 48px; } </style> </head> <body> <span class="c1"></span> <div class="c2"></div> <div class="c3"></div> </body> </html>
属性选择器:对选择到的标签再通过属性进行一次筛选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type='text']{ width: 100px; height: 200px; } </style> </head> <body> <input type="text" /> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[n='alex']{ width: 100px; height: 200px; } </style> </head> <body> <input type="text" n="alex"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1[n='alex']{ width: 100px; height: 200px; } </style> </head> <body> <input class="c1" type="text" n="alex"/> </body> </html>