整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 有哪些用途？
CSS 可以用來修飾靜態網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。下面我們就從幾個方面來講解 CSS。
01
CSS簡介
●CSS 指層疊樣式表 (Cascading Style Sheets)
● 樣式定義如何顯示 HTML 元素
● 樣式通常存儲在樣式表中
● 把樣式添加到 HTML 中，是為了解決內容與表現分離的問題
● 外部樣式表可以極大提高工作效率
● 外部樣式表通常存儲在 CSS 文件中
● 多個樣式定義可層疊為一
樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
瀏覽器缺省設置（沒有定義樣式表，引用瀏覽器樣式）
外部樣式表（.css文件）
內部樣式表（位于 <head> 標簽內部）
內聯樣式（在 HTML 元素內部）
多重樣式將層疊為一個元素舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/a.css"> <!--.yang_shi{background:yellow;} -->
<link rel="stylesheet" href="css/b.css"> <!--.yang_shi{background:green;} -->
<style>
.yang_shi{background:red;}
</style>
</head>
<body>
<div class=“yang_shi” style=“background:black;”></div>
</body>
<／html>
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先于以下的樣式聲明：<head> 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
02
CSS語法
CSS 語法規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:
● 選擇器通常是你需要改變樣式的 HTML 元素。
● 每條聲明由一個屬性和一個值組成。
屬性（property）是你希望設置的樣式屬性（style attribute）。每個屬性有一個值，屬性和值被冒號分開，聲明組以大括號{}括起來。
03
CSS選擇器
?? 類選擇器：類選擇器以一個點號顯示。如：.center{color:red;}
?? Id選擇器：id選擇器以#來定義，id 屬性只能在每個 HTML 文檔中出現一次。
?? 屬性選擇器：帶有指定屬性的選擇器。如：[title]{color:#999}或者[title=hello]{color:red;}
?? 元素選擇器：HTML 標簽元素作為選擇器。如：a{color:#999}
?? 派生選擇器：根據元素在其位置的上下文關系定義樣式，派生選擇器包括后代選擇器、子元素選擇器、相鄰兄弟選擇器。
?? 偽類、偽元素
?? 選擇器分組、結合選擇器
CSS 選擇器——屬性選擇器
CSS 選擇器——派生選擇器
后代選擇器、子元素選擇器、相鄰兄弟選擇器。
CSS 選擇器——偽類與偽元素
偽類：包含兩種狀態，偽類和結構性偽類。狀態偽類是基于元素當前狀態進行選擇的，在與用戶的交互過程中元素根據動態變化的，展示相對應狀態下的樣式。
常見的狀態偽類主要包括：
結構性偽類是 css3 新增選擇器，利用 dom 樹進行元素過濾，通過文檔結構的互相關系來匹配元素，能夠減少 class 和 id 屬性的定義，使文檔結構更簡潔。
常見的結構性偽類主要包括：
偽元素是對元素中的特定內容進行操作，而不是元素本身。它的操作層次比偽類更深一層并不存在于文檔結構中。實際上，偽元素就是選取某些元素前面或后面這種普通選擇器無法完成的工作。
常見的偽元素主要包括：
注意：
有時你會發現偽類元素使用了兩個冒號(::) 而不是一個冒號 (:)，這是 css3 規范中的一部分要求，目的是為了區分偽類和偽元素，大多數瀏覽器都支持這兩種表示方式。單冒號(:)用于 css3 偽類，雙冒號(::)用于 css3 偽元素。對于 css2 中已經有的偽元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。
CSS 選擇器——選擇器分組、結合選擇器
1.選擇器分組
假設我們有以下樣式
2.結合選擇器
span.class2 {color：red；}
<div>
<span>11111</span>
<span class=“class2”>2222</span>
<p class=“class2”>3333</span>
</div>
04
CSS常用屬性
?? Calc()
此 calc()函數用一個表達式作為它的參數，用這個表達式的結果作為值。
支持加減乘除括號等。
如：width:calc(100% - 80px);
?? Display
visibility：hidden 隱藏元素，但是元素仍然占據空間并影響布局。
display：none 隱藏元素，并從布局中刪除元素。
display：block（塊）塊元素嘗試獲取整個寬度，并在布局中開始新行。
display：inline-block（內聯塊）內聯元素塊與其他內聯元素保持在同一行中，并且不會開始新行。
display：box 盒模型。
?? Background
background-size 設置背景圖片大小，支持百分比、像素單位等。
background-position 定位背景圖。
如：background-position：20px 100px
?? Border-sizing:border-box;
為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
?? 盒模型 display:box; 的使用
使用盒模型必須給父容器定義 css 屬性 display:box 其子容器才可以進行劃分(如果定了 display:box 則該容器則定義為了內聯元素，使用 margin:0px auto 讓其居中是無效的，要想使其居中只能通過它的父容器的 text-align:center);
HTML代碼：
<article>
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>
box-orient 用來確定父容器里子容器的排列方式，是水平還是垂直。(horizontal水平排列)
box-orient:vertical;//垂直排列
盒模型 display:box; 的使用
box-align 表示父容器里面子容器的垂直對齊方式，可選參數如下所示：
start | end | center | stretch
相信小伙伴們對 CSS 有了大概的了解，它既簡化了網頁的格式代碼、加快了下載顯示的速度，又減少了需要上傳的代碼數量。可以說，CSS 是 web 的造型師，快和小象一起學起來，有不懂的問題記得私信小象哦～
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
生命不必每時每刻都要沖刺
低沉時
就當給自己放了一個悠長假期
- 2024.04.26 -
在編程的世界里，數據是構建一切的基礎。就像建筑師需要了解不同材料的強度和特性一樣，程序員也必須熟悉各種數據類型。
今天，我們就來深入探討JavaScript中的數據類型，看看它們如何塑造我們的代碼世界。
數據類型是計算機語言的基礎知識，數據類型廣泛用于變量、函數參數、表達式、函數返回值等場合。JavaScript語言的每一個值，都屬于某一種數據類型。
JavaScript的數據類型主要分為兩大類：基本數據類型和引用數據類型。下面就來詳細介紹這兩類數據類型中都包含哪些及如何使用它們。
首先，讓我們從最基本的數據類型開始。JavaScript的基本數據類型包括：字符串（String）、數字(Number)、布爾(Boolean)、空（Null）、未定義（Undefined）、符號（Symbol）。
1、字符串（String）
tring類型用于表示由零或多個16位的Unicode字符組成的字符序列，即字符串。至于用單引號，還是雙引號，在js中還是沒有差別的。記得成對出現。
let name1='張三'
let name2="李四"
let name3=`王五`
1.轉換為字符串有2個方法：toString()、String()
let n=100
n.toString() // '100' 數值類型轉換為字符串類型
String(200) // '200' 數值類型轉換為字符串類型
2.模板字符串相當于加強版的字符串，可以定義多行字符串。還可以利用${}在字符串中插入變量和表達式
let name='張三豐'
let age=180
`我叫${name}，今年${age}歲啦!` // 我叫張三豐，今年180歲啦!2、數字(Number)
該類型的表示方法有兩種形式，第一種是整數，第二種為浮點數。整數：可以通過十進制，八進制，十六進制的字面值來表示。浮點數：就是該數值中必須包含一個小數點，且小數點后必須有一位數字。
let num=100 // 整數
let floatNum=3.14 // 浮點數
// toFixed() 方法可以對計算結果進行四舍五入
let pi=Math.PI // 3.141592653589793
pi.toFixed(2) // 3.14 保留2位小數
// 八進制的值第一位必須是零0，后面每一位數的范圍在0~7。如果某一位數超出范圍，首位的0會被忽略，后面的數值會按照十進制來解析
let octalNum1=076 // 八進制的 63
let octalNum2=083 // 八進制 83
let octalNum3=06 // 八進制 6
// 十六進制的值前兩位必須是0x，后面每一位十六進制數字的范圍在0~9及A~F，字母A~F可以大寫也可以小寫。
let hexNum1=0xA // 十六進制 10
let hexNum2=0x3f // 十六進制 63
// 數值轉換的三個方法 Number()、parseInt()、parseFloat()
1.Number() // 可以將字符串、布爾值、null、undefined 等轉換為對應的數值，如果無法轉換返回NaN
Number("123") // 輸出123
Number("hello") // 輸出NaN
2.parseInt() // 可以將字符串轉換為整數，如果無法轉換返回NaN
parseInt("123") // 輸出123
parseInt("123.45") // 輸出：123
parseInt("hello") // 輸出NaN
3.parseFloat() // 可以將字符串轉換為浮點數，如果無法轉換返回NaN
parseFloat("123.45") // 輸出123.45
parseFloat("hello") // 輸出NaN
3、布爾(Boolean)
Boolean 數據類型只有兩個值：true 和 false，分別代表真和假。很多時候我們需要將各種表達式和變量轉換成 Boolean 數據類型來當作判斷條件。
示例：
1.數值運算判斷
1 + 2===3 // true
1 + 1 > 3 // false
2.數值類型轉換
let bool1=Boolean(0); // 數值轉換為布爾值
let bool2=Boolean(""); // 字符串轉換為布爾值
let bool3=Boolean(null); // null 轉換為布爾值
let bool4=Boolean(undefined); // undefined 轉換為布爾值
let bool5=Boolean(NaN); // NaN 轉換為布爾值
let bool6=Boolean([]); // 空數組轉換為布爾值
let bool7=Boolean({}); // 空對象轉換為布爾值ECMAScript 類型的值都有與布爾值等價的形式。可以調用 Boolean() 函數來將其他類型轉換為布爾值。不同類型轉換為布爾值的規則如下表
4、未定義（Undefined）
在 JavaScript 中，undefined 是一個特殊的值和數據類型。當一個變量聲明但未賦值時，該變量的值就是 undefined。它表示一個未定義或未初始化的值。
1.聲明但未賦值的變量
// 當使用 var、let 或 const 聲明一個變量但未對其賦值時，該變量的初始值為 undefined。
let n;
console.log(n) // 輸出 undefined
2.未定義的屬性
// 當訪問一個不存在的屬性時，該屬性的值為undefined
let obj={ name: '張三豐' }
console.log(obj.age) // 輸出 undefined
3.函數沒有返回值
// 如果函數沒有明確返回值或者使用 return 語句返回一個未定義的值，函數的返回值將是 undefined
function getName() {
// 沒有返回值
}
console.log(foo()) // 輸出 undefined
4.函數參數未傳遞
// 如果函數定義了參數但未傳遞相應的值，那么該參數的值將是 undefined
function getName(name) {
console.log("Hello, " + name)
}
getName() // 輸出：Hello, undefined
5、空（Null）
在 JavaScript 中，null 是一個特殊的值和數據類型。它表示一個空值或者不存在的對象。
與undefined不同，null是JavaScript 保留關鍵字，而 undefined 只是一個常量。也就是說可以聲明名稱為 undefined 的變量，但將 null 作為變量使用時則會報錯。
1.空值
// null 表示一個空值，用于表示變量的值為空
let name=null
console.log(name) // 輸出 null
2.不存在的對象
// 當使用 typeof 運算符檢測一個值為 null 的對象時，會返回 "object"
let obj=null
console.log(typeof obj) // 輸出：objectnull 與 undefined 區別
let x;
let y=null;
console.log(x===undefined) // 輸出：true
console.log(x===null) // 輸出：false
console.log(y===null) // 輸出：true
console.log(y===undefined) // 輸出：false6、符號（Symbol）
符號 (Symbols) 是 ECMAScript 第 6 版新定義的。符號類型是唯一的并且是不可修改的。
1.創建Symbol
// 使用全局函數 Symbol() 可以創建一個唯一的 Symbol 值
let s=Symbol()
console.log(typeof s) // 輸出 symbol
2.唯一性
// 每個通過 Symbol() 創建的 Symbol 值都是唯一的，不會與其他 Symbol 值相等，即使它們的描述相同
let s1=Symbol()
let s2=Symbol()
console.log(s1==s2) // 輸出 false
let s3=Symbol('hello')
let s4=Symbol('hello')
console.log(s3==s4) // 輸出 false
3.Symbol 常量
// 通過 Symbol.for() 方法可以創建全局共享的 Symbol 值，稱為 Symbol 常量
let s5=Symbol.for('key')
let s6=Symbol.for('key')
console.log(s5===s6) // 輸出 trueSymbol 的主要作用是創建獨一無二的標識符，用于定義對象的屬性名或者作為一些特殊的標記。它在一些特定的應用場景中非常有用，如在迭代器和生成器中使用 Symbol.iterator 標識可迭代對象。
除了基本數據類型，JavaScript還有引用數據類型：對象（Object）、數組（Array）和函數（Function）
1、對象（Object）
Object 是一個內置的基本數據類型和構造函數。是一組由鍵、值組成的無序集合，定義對象類型需要使用花括號{ }，它是 JavaScript 中最基本的對象類型，也是其他對象類型的基礎。
1.創建對象
// Object 類型可以用于創建新的對象。可以使用對象字面量 {} 或者通過調用 Object() 構造函數來創建對象
let obj1={} // 使用對象字面量創建空對象
let obj2=new Object() // 使用 Object() 構造函數創建空對象
2.添加、修改、刪除屬性
let obj={}
obj.name='張三豐' // 添加屬性
obj.age=30 // 添加屬性
obj.name='張無忌' // 修改屬性
delete obj.age // 刪除屬性2、數組（Array）
JavaScript 中，數組（Array）是一組按順序排列的數據的集合，數組中的每個值都稱為元素，而且數組中可以包含任意類型的數據。
在 JavaScript 中定義數組需要使用方括號[ ]，數組中的每個元素使用逗號進行分隔。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想-程序員必看的精品課程
1、有序集合：數組是一種有序的數據集合，每個元素在數組中都有一個對應的索引，通過索引可以訪問和操作數組中的元素。
2、可變長度：數組的長度是可變的，可以根據需要動態添加或刪除元素，或者修改數組的長度。
可以使用 push()、pop()、shift()、unshift() 等方法來添加或刪除元素，也可以直接修改數組的 length 屬性來改變數組的長度。
3、存儲不同類型的值：數組可以存儲任意類型的值，包括基本類型和對象類型。同一個數組中可以混合存儲不同類型的值。
4、索引訪問：通過索引來訪問數組中的元素，索引從 0 開始。可以使用方括號語法 [] 或者點號語法 . 來訪問數組的元素。
5、內置方法：數組提供了許多內置的方法，用于對數組進行常見的操作和處理，如添加、刪除、查找、排序、遍歷等。
常用的數組方法包括 push()、pop()、shift()、unshift()、concat()、slice()、splice()、indexOf()、forEach()、map()、filter()、reduce() 等。
6、可迭代性：數組是可迭代的，可以使用 for...of 循環或者 forEach() 方法遍歷數組中的元素。
1.創建數組
// 可以使用數組字面量 [] 或者通過調用 Array() 構造函數來創建數組。
let arr1=[] // 使用數組字面量創建空數組
let arr2=new Array() // 使用 Array() 構造函數創建空數組
let arr3=[1, 2, 3] // 使用數組字面量創建包含初始值的數組
2.訪問和修改數組元素
// 數組的元素通過索引訪問，索引從 0 開始。可以使用索引來讀取或修改數組的元素。
let arr=[1, 2, 3]
console.log(arr[0]) // 訪問數組的第一個元素，輸出：1
arr[1]=5 // 修改數組的第二個元素
arr.length // 獲取數組長度，輸出：33、函數（Function）
ECMAScript中的函數是對象，與其他引用類型一樣具有屬性和方法。因此，函數名實際是一個指向函數對象的指針。
1.創建函數
// 可以使用函數聲明或函數表達式來創建函數。函數聲明使用 function 關鍵字，后面跟著函數名稱和函數體，而函數表達式將函數賦值給一個變量。
// 函數聲明
function add(a, b) {
return a + b
}
// 函數表達式
let multiply=function(a, b) {
return a * b
}
2.函數調用
// 函數可以通過函數名后面加括號 () 進行調用。調用函數時，可以傳遞參數給函數，函數可以接收參數并進行相應的處理。
let result=add(3, 5) // 調用 add 函數并傳遞參數
console.log(result) // 輸出：8
3.函數返回值
// 函數可以使用 return 語句返回一個值，也可以不返回任何值。當函數執行到 return 語句時，會立即停止執行，并將返回值傳遞給函數調用者。
function calculateSum(a, b) {
return a + b
}
let result=calculateSum(2, 3)
console.log(result) // 輸出：5
4.函數作用域
// 函數作用域是指函數內部聲明的變量在函數內部有效，外部無法訪問。函數內部定義的變量只能在函數內部被訪問和使用，在函數外部是不可見的。
function myFunction() {
var x=10 // 局部變量
console.log(x) // 在函數內部可見
}
myFunction() // 輸出：10
console.log(x) // 報錯：x is not defined此外，JavaScript還有一些特殊的數據類型，如Date（表示日期和時間）、RegExp（表示正則表達式），以及ES6新增的Map、Set、WeakMap和WeakSet，用于存儲特定類型的數據。
檢測數據類型可以使用typeof操作符，它可以檢測基本數據類型和function，但無法區分不同的引用數據類型。
var arr=[
null, // object
undefined, // undefined
true, // boolean
12, // number
'haha', // string
Symbol(), // symbol
20n, // bigint
function(){}, // function
{}, // object
[], // object
]
for (let i=0; i < arr.length; i++) {
console.log(typeof arr[i])
}掌握JavaScript數據類型是成為一名高效開發者的關鍵。它們是構建程序的磚石，理解它們的用法和限制將使你能夠構建更穩健、更可維護的代碼。
現在，你已經了解了JavaScript的數據類型，是時候在你的代碼中運用這些知識了。記住，實踐是學習的最佳方式，所以動手嘗試吧！
如果覺得本文對你有所幫助，別忘了點贊和分享哦！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
CSS中，類選擇器用點號表示。
實際項目中一個div元素為了能被多個樣式表匹配到（樣式復用），通常div的class中由好幾段組成，如<div class="user login">能被.user和.login兩個選擇器選中。
如果這兩個選擇器中有相同的屬性值，則該屬性值先被改為.user中的值，再被改為.login中的值，即重復的屬性以最后一個選擇器中的屬性值為準。
測試代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
.user
{
font-size: 30px;
background-color:red;
}
.login
{
background-color:blue;
}
</style>
</head>
<body>
</head>
<body>
<div class="user">你好。這是一個 DIV 元素，class='user'。</div>
<div class="login">你好。這是一個 DIV 元素，class='login'。</div>
<div class="user login">你好。這是一個 DIV 元素，class='user login'。</div>
</body>
</body>
</html>效果如下圖：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
