html的选择器使用
生活随笔
收集整理的這篇文章主要介紹了
html的选择器使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果如下圖所示：
代碼如下：
<html>
<head>
<title>選擇器使用</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">
<!-- 一定要在<head></head>標簽中使用<style></style>標簽 -->
<style type="text/css">
/*這是CSS的注釋，用html的注釋會引起瀏覽器的適應問題*/
/*標簽選擇器：針對HTML標簽，直接讓頁面的所有相同標簽具有相同的樣式，
?定義格式：標簽名{ 樣式名：樣式值 使用：直接寫標簽，它會自動找自己的標簽}*/
p {
?color: red;
?font-size: 20pt;
}
/*通用選擇器：直接讓頁面的所有內容，具有相同的樣式，定義格式：*；使用：不管你寫什么，都會被樣式*/
* {
?color: orange;
?font-size: 10pt;
}
/*id選擇器:針對?標簽的id值進行特定的樣式定義 定義格式：#id{}
?使用：標簽的id屬性ID
?注意：一個html頁面最好只定義一個同名的ID的標簽（ID應該唯一）*/
#i {
?color: blue;
?font-size: 16pt;
}
/*類選擇器：針對標簽的class值進行通用的樣式定義 定義格式：類名{}
?使用：標簽的class屬性=類名。*/
.l {
?color: black;
?font-size: 22pt;
}
</style>
</head>
<body>
?<p>這是標簽選擇器的使用效果。</p>
這是通用選擇器使用的效果。
<br>
?<a id="i"> 這是ID選擇器使用的效果。 </a>
<br>
?<a class="l">這是類選擇器的使用效果。</a>
</body>
</html>
代碼如下：
<html>
<head>
<title>選擇器使用</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">
<!-- 一定要在<head></head>標簽中使用<style></style>標簽 -->
<style type="text/css">
/*這是CSS的注釋，用html的注釋會引起瀏覽器的適應問題*/
/*標簽選擇器：針對HTML標簽，直接讓頁面的所有相同標簽具有相同的樣式，
?定義格式：標簽名{ 樣式名：樣式值 使用：直接寫標簽，它會自動找自己的標簽}*/
p {
?color: red;
?font-size: 20pt;
}
/*通用選擇器：直接讓頁面的所有內容，具有相同的樣式，定義格式：*；使用：不管你寫什么，都會被樣式*/
* {
?color: orange;
?font-size: 10pt;
}
/*id選擇器:針對?標簽的id值進行特定的樣式定義 定義格式：#id{}
?使用：標簽的id屬性ID
?注意：一個html頁面最好只定義一個同名的ID的標簽（ID應該唯一）*/
#i {
?color: blue;
?font-size: 16pt;
}
/*類選擇器：針對標簽的class值進行通用的樣式定義 定義格式：類名{}
?使用：標簽的class屬性=類名。*/
.l {
?color: black;
?font-size: 22pt;
}
</style>
</head>
<body>
?<p>這是標簽選擇器的使用效果。</p>
這是通用選擇器使用的效果。
<br>
?<a id="i"> 這是ID選擇器使用的效果。 </a>
<br>
?<a class="l">這是類選擇器的使用效果。</a>
</body>
</html>
總結
以上是生活随笔為你收集整理的html的选择器使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单注册页面
- 下一篇： 使用CSS样式对表格进行美化并对伪类的使