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=https://www.cnblogs.com/swzx-1213/p/"test.css">

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/58531.html

標籤：Html/Css

上一篇：CSS position元素定位屬性

下一篇：前端自定義彈出框-提示框（一）

css3筆記系列-1.css基礎知識入門