css3系列 1.css基礎知識入門 1.css 如何引用 內部 外部 內聯 代碼示例 內部css代碼示例 index 外部css代碼示例 index 微信公眾號：全棧學習筆記 css文件裡面的代碼（test.css） h1{ color: red; } 內聯css代碼示例 這裡推薦使用第二種方式， ...
css3系列-1.css基礎知識入門
1.css 如何引用
- 內部
- 外部
- 內聯
代碼示例
內部css代碼示例
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
h1{
color: red;
}
</style>
</head>外部css代碼示例
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>微信公眾號：全棧學習筆記</h1>
</body>css文件裡面的代碼（test.css）
h1{
color: red;
}內聯css代碼示例
<h1 style="color:red">這裡推薦使用第二種方式，儘量不使用其他兩種方式，第二種方式可以是html文件與css文件分離，代碼可閱讀性以及維護性更強
2.css 優先順序
- 內聯style
- id選擇器
- class選擇器
- 標簽
所謂內聯style就是上述的第三種方式，這種方式的css樣式級別是最高的。什麼是優先順序？比如說我在一個標簽裡面，style設置了一個color屬性，然後給這個標簽加上一個class，就是外聯上一個css文件。這個css文件裡面寫上這個class的css樣式，也是一個color屬性，這時，又給這個標簽加上了一個id，然後我在css裡面給對應的id加上一個color樣式，然後再為這個標簽本身寫上一個color屬性，到最後你會發現最後顯示的color是style裡面的color，如果你刪除了style，那麼顯示的就是對應id的color顏色，依次類推，這就是所謂的css優先順序。
3.css 註釋
和很多語言一樣，css也能註釋代碼，格式如下
/* 註釋 */4.css 長度單位
- px 像素
- em 倍數
以上是最常用的單位，還有一些css3新增的長度單位如：vw、vh、vmin、vmax，rem與em
5.css 顏色單位
- red
ff0000
f00
- rgb(255,255,255)
用法 如：color：red
6.css 選擇器
css裡面的選擇器比較多，這裡暫時只介紹部分選擇器，後面會出一期選擇器詳解，點個關註不迷路哦，微信公眾號：全棧學習筆記，正在完善中。很期待你的關註哦！
選擇器的大概分類
- 常用選擇器
- 基本選擇器
- 層級選擇器
- 偽類選擇器
- 屬性選擇器
這裡簡單介紹一下常用的選擇器：
1.html選擇器
*{
color:red;/*設置頁面全部的字體樣式屬性*/
}2.類選擇器
.className{
/*設置某個class=className的全部標簽的樣式屬性*/
color:red;
}3.id選擇器
#id{
/*設置某個id=id的標簽的樣式屬性*/
color:red;
}4.關聯選擇器
關聯選擇器是什麼呢？定義：選擇器中的選擇器
<div class="div">
<h1>這是全棧學習筆記的關聯選擇器</h1>
</div>css代碼
.div h1{
color: red;
}這樣實現的效果就是：在class為div的下麵的h1標簽的color屬性為red
5.組合選擇器
div,h1{
color: red;
}註意與上面代碼的區分，這段代碼實現的功能就是，全部的class為div的標簽以及h1標簽，將他們的color屬性設置為：red。一般來說，color屬性是對文本的顏色進行設置。才疏學淺！
這一期的css教程就到這裡，下一期將對css的各種常見屬性以及屬性的值進行講解！希望點個關註哦！微信公眾號：全棧學習筆記
div的標簽以及h1標簽，將他們的color屬性設置為：red。一般來說，color屬性是對文本的顏色進行設置。才疏學淺！
這一期的css教程就到這裡，下一期將對css的各種常見屬性以及屬性的值進行講解！希望點個關註哦！微信公眾號：全棧學習筆記
