爲什麼會學習CSS
如果你已經看過我的《學習HTML看這個就》這篇文章。
那麼也許你會發現，html只會關注內容的語義，並不會對樣式有大的修改能力。那麼爲了需要讓我們的頁面更加的美觀，所以纔有了CSS的出現，所以CSS的作用就是爲了修改頁面的樣式。
CSS最大的貢獻：結構與樣式相互分離
三種引用方式
行內式（內聯樣式）
- 語法：
<標籤名 style="屬性1：屬性值1；屬性2：屬性值2">內容</標籤名>
任何的HTML標籤都有style屬性
內部樣式表（內嵌樣式）
<head>
<style type="text/css">
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
}
<style>
</head>
- type=“text/css” 在html5可省略
- 一般放在head內
- 只適用於當前頁面
外部樣式表（外鏈式）
新建一個style.css樣式文件
文件結構(無後綴表示文件夾)
|——demo
|———|——css
|———|——style.css
|———|——html
|———|——index.html
標籤 {
屬性1:屬性值2;
屬性2:屬性值2;
}
在html中鏈入
<html>
<head>
<!--最好填相對路徑-->
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
</html>
CSS選擇器
選擇器的作用
找到特定的HTML頁面元素
CSS基礎選擇器
標籤選擇器
標籤 {
屬性1:屬性值1;
屬性2:屬性值2;
}
優點： 全部標籤統一樣式
缺點： 無法設計差異化樣式
類選擇器
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
}
優點： 可以爲元素對象定義單獨或相同的樣式，可以選擇一個或多個標籤
規範：
- 類名自定義
- 長名稱用中橫線來爲選擇器命名
- 不要純數字、中文命名，儘量用英文字母表示
拓展
特殊用法：多類名使用
<標籤 class="類名1 類名2"></標籤>
id選擇器
#ID名 {
屬性1:屬性值1;
屬性2:屬性值2;
}
id選擇器和類選擇器的區別
id是唯一的，類是可以重複使用的。
id映射身份證號，類映射姓名
一般的樣式用類，js用id
通配符選擇器
* 選擇所有標籤
* {
屬性:屬性值;
}
會匹配所有元素，但是會降低響應速度
CSS字體樣式屬性調試工具
font字體
font-size字體大小 一般使用單位：pxfont-family字體p{ font-family ："黑體","微軟雅黑"}順序優先選擇font-weight字體粗細- normal 默認值（不加粗的）
- bold 定義粗體（加粗的）
- 100-900 400=normal 700 = bold
font-style字體樣式- normal 默認值。瀏覽器顯示一個標準的字體樣式。
- italic 瀏覽器會顯示一個斜體的字體樣式。
- oblique 瀏覽器會顯示一個傾斜的字體樣式。
- inherit 規定應該從父元素繼承字體樣式。
CSS Unicode字體
使用原因：CSS設置字體可以使用中文，但爲了預防亂碼，使用unicode編碼
| 字體名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細明體 | MingLiU | \7EC6\660E\4F53 |
| 新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
爲了照顧不同電腦的字體安裝問題，我們儘量只使用宋體和微軟雅黑中文字體
font：綜合設置字體樣式
選擇器{
/*font: font-style font-weight font-size/line height font-family*/
font : italic 700 20px "宋體"
}
順序不能改變 每個屬性用空格隔開
不需要的可以省略，但是font-size 和 font-family不能省略
CSS複合選擇器
後代選擇器（包含選擇器）
父級 子級 { 屬性：屬性值}
<html>
<head>
<title></title>
<style>
/*後代選擇器*/
.nav a {
color:blue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">內部鏈接</a>
<a href="#">內部鏈接</a>
<a href="#">內部鏈接</a>
</div>
<a href="#">外部鏈接</a>
<a href="#">外部鏈接</a>
<a href="#">外部鏈接</a>
</body>
</html>
子元素選擇器
只能選擇某元素的子元素 用>鏈接
<html>
<head>
<title></title>
<style>
/*子元素選擇器*/
div > strong{
屬性:屬性值;
}
</style>
</head>
<body>
<div>
<strong>兒子</strong>
</div>
<div>
<p>
<strong>孫子</strong>
</p>
</div>
</body>
</html>
交集選擇器
<html>
<head>
<title></title>
<style>
/*交集選擇器*/
p.red{
屬性:屬性值;
}
</style>
</head>
<body>
<p class="red">紅色</p>
<p class="red">紅色</p>
<div class="red">紅色</div>
<div class="red">紅色</div>
<p>藍色</p><p>藍色</p>
</body>
</html>
並集選擇器
<html>
<head>
<title></title>
<style>
/*並集選擇器*/
/*p {
color: red;
}
span {
color: red;
}*/
p ,
span{
color: red;
}
</style>
</head>
<body>
<p>紅色</p>
<p >紅色</p>
<div >紅色</div>
<div >紅色</div>
<span>藍色</span>
<span>藍色</span>
<h1>綠色</h1>
<h1>綠色</h1>
</body>
</html>
鏈接僞類選擇器
向某些元素提供特殊效果
a:link未訪問的鏈接
a:visited已訪問的鏈接
a:hover 鼠標移動到鏈接上
a:active 選定的鏈接
<html>
<head>
<style>
/*未訪問的鏈接樣式*/
a:link {
color:red;
/*取消下劃線*/
text-decoration:none;
}
/*訪問過的鏈接*/
a:visited {
color:orange;
}
a:hover {
color:blue;
}
</sytle>
</head>
<body>
<a href="https://liyafei.top">李亞飛的博客</a>
</body>
</html>
常用寫法：
a{ /*a的標籤選擇器*/
}
a:hover{ /*鏈接僞類選擇器，鼠標經過時*/
}
相關推薦：
