CSS基本語法和選擇器
阿新 • • 發佈：2018-12-26
CSS是指層疊樣式表（cascading style sheets），樣式定義如何顯示HTML元素，是真正能夠做到網頁表現和內容分類的一種語言。
【1】CSS基本語法
【2】CSS兩種結合方式
【3】幾種選擇器
基本語法
基本語法也就兩種，在head中使用選擇器選擇，然後在body中使用，如下中的樣式屬性鍵：樣式屬性值1 樣式屬性值2...是多個屬性值的連用。
兩種結合方式<!DOCTYPE html> <html> <head> <title>02-結合方式2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 語法1: 選擇器{ 樣式屬性鍵: 樣式屬性值; 樣式屬性鍵:樣式屬性值1 樣式屬性值2 樣式屬性值3...; /* 註釋內容! */ 語法2: style="樣式屬性鍵: 樣式屬性值;" } --> <style type="text/css"> p{ color:red; } </style> </head> <body> <p > This is my HTML page. </p> </body> </html>
<!DOCTYPE html> <html> <head> <title>01-結合方式1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--下面是第二種結合方式--> <style type="text/css"> p{ color:blue; } </style> </head> <body> <p style="color:red;" > 我是在body中直接使用的結合方式 </p> <p> 我是使用表標籤選擇器的結合方式了</p> </body> </html>
標籤選擇器
使用的是html的標籤，比如p、h1、a等，也可以是html
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <title>02-結合方式2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 標籤選擇器: 標籤名稱{ } } --> <style type="text/css"> a{ color:blue; background:red; padding:99; } p{ color:#FFFF00; } </style> </head> <body> <a> This is my HTML page. </a> <p> This is my HTML page. </p> </body> </html> </span>
ID選擇器
以一種獨立於文件元素的方式來指定樣式
<!DOCTYPE html>
<html>
<head>
<title>06-CSS選擇器2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
id選擇器:
#標籤id{
}
注意: 使用id時.要保證id的值在頁面中是唯一的
-->
<style type="text/css">
#one{
color:yellow;
}
#five{
size:88;
}
</style>
</head>
<body>
<a id="one" > This is my HTML page. </a><br>
<a id="five" > This is just a test. </a><br>
<a> This is my HTML page. </a>
</body>
</html>其實類選擇器是和ID選擇器想類似的
<!DOCTYPE html>
<html>
<head>
<title>07-CSS選擇器3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
class選擇器:
.class名稱{
}
注意: 使用class選擇器，前面要有一個.號
-->
<style type="text/css">
.three{
color:green;
}
</style>
</head>
<body>
<p>This is my HTML page.</p>
<p class="three" >This is my HTML page.</p>
<a class="three" > This is my HTML page. </a><br>
<a> This is my HTML page. </a>
</body>
</html>
這個可以控制標籤的的某些狀態，配合其他選擇器來共同使用
<!DOCTYPE html>
<html>
<head>
<title>07-CSS選擇器3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
偽類選擇器:
選擇標籤的某個狀態.需要配合其他選擇器來使用
l link <span style="white-space:pre"> </span>未訪問過
v visited 訪問過
h hover <span style="white-space:pre"> </span>懸浮
a active 啟用,點選
-->
<style type="text/css">
a:link{
color:green;
}
a:visited{
color:black;
}
a:hover{
color:white;
}
a:active{
color:pink;
}
</style>
</head>
<body>
<a href="01-結合方式1.html" >點我，看我的狀態變化</a>
</body>
</html>
將ID、類、元素結合在一起來使用，可以看到在body中是分開使用的，在style中是結合在一起的。
<!DOCTYPE html>
<html>
<head>
<title>09-CSS選擇器5.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#one,.two,font{
color:green;
}
</style>
</head>
<body>
<a id="one" >我是ID選擇器</a><br>
<a class="two" >我是類選擇器</a><br>
<font>我是元素選擇器</font>
</body>
</html>