CSS基礎教學之基本選擇器
CSS選擇器
#1、基本選擇器
(1)「*」選擇器:通配符
描述:將會匹配所有的HTML標籤,所有的標籤都會改變的。
語法:*{ color:red; }
# 註:「*」盡量少用,因為IE6不支援。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
(2)標籤選擇器
描述 :將符合指定的HTML標籤。
語法:h1{ color:red; }
#註:CSS標籤選擇器,與HTML標籤的名稱一樣,但不能加尖括號。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> h1{ color:red; } p{ color:blue; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
(3)class選擇器(類別選擇器)-類別選擇器是使用頻率最高的
描述:為一類HTML標籤加上樣式。這裡所指的「一類」是:每個HTML標籤都有一個class屬性,且class的值一樣。 class屬性是公共屬性,每個HTML標籤都有。
類別選擇器的名稱,必須以「.」開頭,後限HTML標籤的class屬性的值。如:.box{ color:red; }
註: HTML標籤的class屬性的值,不能以數字開頭。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .NO1{ color:red; background-color:#88ff66; } </style> </head> <body> <h1 class="NO1">习近平心中的互联网</h1> <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
(4)id選擇器
描述 :為指定id的元素新增樣式。
註:
網頁中HTML標籤的id屬性的值,必須是唯一的。
每一個HTML標籤都有一個id的公共屬性。
id屬性一般是給JS使用的,不是讓你來加樣式的。 class屬性只能給CSS用,不能給JS用的。
id選擇器的名稱,必須以「#」開頭,後面接著HTML標記的id屬性的值。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> #NO1{ color:blue; background-color:#88ff99; } .NO1{ color:red; background-color:#88ff66; } </style> </head> <body> <h1 id="NO1">习近平心中的互联网</h1> <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>