本篇文章為大家展示了CSS有什么樣式類，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一個
HTML 標簽原本被設計為用于定義文檔內容。通過使用 <h2>、<div>、<table> 這樣的標簽，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔布局由瀏覽器來完成，而不使用任何的格式化標簽。
所有的主流瀏覽器均支持層疊樣式表
div和span的理解
div是一個html標簽, 一個塊級元素(單獨顯示一行), 單獨使用沒有任何意義, 必須結合CSS來使用, 主要用于頁面的布局;
span是一個html標簽, 一個內聯元素(顯示一行), 它單獨使用沒有任何意義, 必須結合css使用, 主要對括起來的內容進行樣式的修飾;
類選擇器
使用類選擇器前要對世紀文檔做標記，才能發揮類選擇器作用。
.name{text-align:center}在文檔后面的部分，通過包含與樣式相關的'class'屬性，且將其中一個預定義的樣式指定為'name'值，就一塊明確選擇要對該標簽的特定情況用何種樣式
<p class=name>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.sheen{font-size: large;color: salmon}
</style>
</head>
<body>
<div>
Sie sprechen gut Deutsch.
</div>
<div>
Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
Nein,ich studiere.
</div>
</body>
</html>
ID選擇器
ID 選擇器類似于類選擇器，ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。與類選擇器一樣，ID 選擇器中可以忽略通配選擇器。
ID是唯一標識，只能被使用一次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID選擇器</title>
<style>
#sheen{font-size: x-large;color: rosybrown}
#star{font-size: large;color: #c0ffff}
#clotho{font-size: xx-large;color: darkgreen}
</style>
</head>
<body>
<div id="sheen">
Sheen:Sie sprechen gut Deutsch.
</div>
<div id="star">
Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div id="clotho">
Clotho:Nein,ich studiere.
</div>
</body>
</html>
標簽選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標簽選擇器</title>
<style>
div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}
</style>
</head>
<body>
<h4>使用CSS</h4>
<div>
類選擇器
</div>
<div>ID選擇器</div>
<div>標簽選擇器</div>
</body>
</html>
設置鏈接的樣式
能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。
鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。
鏈接的四種狀態：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
CSS樣式的引入
引入方式:
1). 行內引入: <a style="行內引入的樣式">
2). 內部引入: 寫在head標簽里面的style標簽里面的樣式;
3). 外部引入: 將css樣式獨立成一個文件， 通過<link rel="stylesheet" href="css/main.css">與當前html文件鏈接在一起.
三種引入方式的優先級: 就近原則
//CSS文件
div {
width: 80%;
margin: 0 auto;
padding: 0;
}
ul {
list-style-type: none
}
li {
display: inline-block;
width: 20%;
background: snow;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}<!--HTML文件-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
background: red;
}
</style>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<ul>
<li style="background: blue">
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
</body>
</html>
上述內容就是CSS有什么樣式類，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
