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的各種常見屬性以及屬性的值進行講解！希望點個關注哦！微信公衆號：全棧學習筆記
