CSS:層疊樣式表,Cascading Style Sheets 層疊樣式表
內容和樣式分離解耦,便于修改樣式。
特殊說明:
- 最后一條聲明可以沒有分號,但是為了以后修改方便,一般也加上分號
- 為了使用樣式更加容易閱讀,可以將每條代碼寫在一個新行內
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS概述</title>
<!--外鏈的css可以可以影響多個html影響多個頁面起作用,作用域大優先級低--><link rel="stylesheet" href="css/style.css">
<!-- style就是css樣式的設置,這是內嵌樣式,對當前頁面的html的結構發生變化--><style>p {font-size: 24px;color: cornflowerblue;font-weight: bolder;}</style>
</head>
<body>
<!--行內css標簽優先級 > 內嵌css樣式 > 外鏈css樣式 --><p style="color: darkgreen">天使投資早期投資,尤其指的是個人早期投資</p><p>VC:VC是一種將資本投入高成長型企業的私募股權基金。VC往往在創業公司的早期階段進行投資,同時提供戰略和管理方面的支持</p><p>PE:PE是指利用私募基金投資于不公開交易的公司或不上市公司的股權</p>
</body>
</html>
外鏈代碼
p {font-size: 24px;color: red;font-weight: bolder;}
執行結果
標簽選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>標簽選擇器</title><style>body{background-color: white;text-align: center;font-size: 12px;}p{font-family: Arial;font-size: 18px;}h1{font-family: '宋體';font-size: 30px;}hr{width: 100px;}</style>
</head>
<body><h1>標題</h1><hr/><p>正文的段落</p>版權所有
</body>
</html>
類選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>類選擇器</title>
</head><!--類選擇器和其他標簽不一樣的是,需要用.開頭表示一個類--><style>.one {font-size: 18px;color: darkred;}.two {font-size: 28px;color: aquamarine;}</style>
<body><p class="one">類別1</p><p class="one">類別2</p><p class="two">類別3</p><p class="two">類別4</p>
</body>
</html>
id選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!-- 使用id選擇器的原因是為了保證唯一性,它的特點是id不重復,style用#開頭--><title>id選擇器</title><style>#one {font-size: 26px;color: darkgreen;}#two {font-size: 18px;color: darkred;}</style>
</head><body><p id="one">文字1</p><p id="two">文字2</p>
</body>
</html>
執行結果