愛晴狂想曲

CSS重置所有屬性值 CSS 簡寫屬性all可用於將這些繼承值之一一次套用於（幾乎）所有屬性。它的值可以是任何一個繼承值（inherit、initial、revert、revert-layer或unset）。這是撤銷對樣式所做的變更的便捷方法，以便您可以在開始新的變更之前返回已知的起點。 <style> blockquote { background-color: orange; border: 2px solid blue; } .fix-this { all: unset; } </style> <blockquote> <p>This blockquote is styled</p> </blockquote> <blockquote class="fix-this"> <p>This blockquote is not styled</p> </blockquote> 第2個blockquote會移除所有CSS Style。  

CSS控制繼承 CSS 提供了五個特殊的通用屬性值來控制繼承。每個 CSS 屬性都會接受這些值。 inherit : 將套用於所選元素的屬性值設定為與其父元素的屬性值相同。實際上，這「開啟了繼承」。 .parent { font-size: 16px; } .child { font-size: inherit; /* 子元素繼承父元素的字體大小 */ } initial : 將套用於選定元素的屬性值設定為該屬性的初始值。 .element { font-size: initial; /* 字體大小被重置為預設值 */ } revert : 將套用於選取元素的屬性值重設為瀏覽器的預設樣式，而不是套用於該屬性的預設樣式。這個值unset在很多情況下都是一樣的。 .element { font-size: revert; /* 恢復字體大小為預設值，並應用樣式表中的其他樣式 */ } revert-layer : 將套用於選取元素的屬性值重設為在前一個級聯層中建立的值。 .parent { font-size: 18px; } .child { font-size: revert-layer; /* 子元素恢復為父元素的字體大小，並在樣式表中覆蓋其他樣式 */ } unset : 將屬性重設為其自然值，這意味著如果該屬性是自然繼承的inherit，則其行為類似於 ，否則行為類似於initial。 .element { font-size: unset; /* 重置字體大小為其初始值或 initial（視屬性而定） */ }      

CSS執行優先順序 在 CSS 中，選擇器和連結器用於定義樣式的應用範圍和規則。在 HTML 中，你可以使用不同的方法引用 CSS 檔案，將樣式應用到 HTML 標記中。在設計網頁時，CSS 的執行優先順序很重要，以確保正確的樣式應用到正確的元素上。 以下是一些關於 CSS 選擇器及連結器、引用 CSS 檔案以及執行優先順序的重要概念： 選擇器和連結器： 選擇器（Selectors）： 選擇器用於選擇要應用樣式的 HTML 元素。例如，div、.class、#id 都是選擇器。 連結器（Combinators）： 連結器用於組合選擇器，以定義元素之間的關係。例如，空格表示後代選擇器，">" 表示子代選擇器，"+" 表示相鄰兄弟選擇器。 引用 CSS 檔案： 外部樣式表： 透過 < link > 標籤在 HTML 文件中引用外部 CSS 檔案。這是最常見的方式，有助於分離 HTML 結構和樣式定義。 <link rel="stylesheet" type="text/css" href="styles.css"> 內部樣式表： 在 HTML 文件的 < head > 元素中使用 < style > 標籤定義樣式。 <style> /* CSS 樣式定義 */ </style> 內聯樣式： 直接在 HTML 元素的 style 屬性中定義樣式。 <div style="color: red;">這是紅色的文字。</div> 執行優先順序： 內聯樣式 > 內部樣式表 > 外部樣式表： 如果相同的屬性在不同的位置進行定義，則內聯樣式（直接在 HTML 元素上定義）的優先順序最高，其次是內部樣式表，最後是外部樣式表。 特殊性（Specificity）： 如果有多個選擇器都適用於同一元素，則通過特殊性來確定樣式的優先順序。特殊性是由選擇器的不同部分（元素、類別、ID等）組成的。 後來者優先（!important）： 如果在樣式規則中使用了 !important，則該規則將優先應用，即使它的特殊性

CSS屬性區分為繼承屬性及非繼承屬性 以下為不會繼承的屬性 display margin border padding background height width border-radius border-spacing float clear position top right bottom left z-index vertical-align page-break-before page-break-after page-break-inside columns column-gap column-rule column-count column-fill column-span orphans widows

C# 從網頁下載檔案到指定路徑 using (WebClient webClient = new WebClient()) { string FileOutput = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "abc.txt"); webClient.DownloadFile("http://abc/abc.txt", FileOutput); //儲存路徑一定要加完整路徑 }  

在 Microsoft SQL Server 中，Collation（定序）是指定字符串比較和排序的規則。Chinese_Taiwan_Stroke_CI_AS 和 Chinese_Taiwan_Stroke_BIN 是兩種不同的排序規則，它們之間的主要差異在於大小寫敏感性和二進制排序的方式。 Chinese_Taiwan_Stroke_CI_AS (Case-Insensitive, Accent-Sensitive): Case-Insensitive (CI): 表示不區分大小寫，即大寫和小寫字母視為相等。 Accent-Sensitive (AS): 表示區分重音符號，即具有不同重音符號的字符被視為不同。 這種排序規則通常用於執行對中文文本進行排序和比較的操作，同時保留對大小寫和重音符號的敏感性。 Chinese_Taiwan_Stroke_BIN (Binary, Case-Sensitive, Accent-Sensitive): Binary (BIN): 表示使用二進制排序，即按字符的二進制值進行比較。 Case-Sensitive (CS): 表示區分大小寫，即大寫和小寫字母被視為不同。 Accent-Sensitive (AS): 表示區分重音符號，即具有不同重音符號的字符被視為不同。 這種排序規則將字符串視為二進制值，不區分中文字符的拼音，而是按照其二進制表示進行排序。 總的來說，如果您需要進行中文文本的排序和比較操作，通常建議使用 Chinese_Taiwan_Stroke_CI_AS，因為它在保留大小寫和重音符號敏感性的同時，提供了比較的彈性。如果您需要按照二進制方式進行排序，並且大小寫和重音符號敏感，那麼可以使用 Chinese_Taiwan_Stroke_BIN。選擇排序規則取決於您的應用需求和預期的比較行為。

CSS 選擇器及連結器 練習  https://jsfiddle.net/ 引用CSS檔案 <link rel="stylesheet" href="styles.css" /> 一個選擇器套用CSS p { color: green; } 一次選擇多個選擇器 p, li { color: green; } 移除< ul >前的清單符號 li { list-style-type: none; } 變更指定Class的元素 <style> .special { color: orange; font-weight: bold; } </style> <ul> <li>Item one</li> <li class="special">Item two</li> <li>Item <em>three</em></li> </ul> 指定特殊元素下的CLASS樣式 只有li下Class才會套用, 但div下Class不會套用 <style> li.special { color: orange; font-weight: bold; } </style> <ul> <li>Item one</li> <li class="special">Item two</li> <li>Item <em>three</em></li> </ul> <div class="special"> aaaaaaaaaaaaaaaaaaaaaaaaaa </div> 如果也希望div下Class套用 <style> li.special, div.special { color: orange; font-weight: bold; } </s

C# LINQ Lambda disinct 若List< Class > 為多屬性的Class的LIST, 若對List直接下Distinct(), 無法取得預期去除重覆資料的結果。(即使所有欄位有重覆值, 也無效果) 若先select new 欄位屬性, 欄位數與原始相同也可, 再下Distinct(), 就可以達到去除重覆資料結果。 以下為範例程式, 資料結構 public class MyClass2 { public string A { get; set; } public string E { get; set; } public string F { get; set; } } List<MyClass2> list_myClass2 = new List<UserQuery.MyClass2>(); list_myClass2.Add(new MyClass2() { A = "A1", E = "E1", F = "F1" }); list_myClass2.Add(new MyClass2() { A = "A2", E = "E2", F = "F2" }); list_myClass2.Add(new MyClass2() { A = "A2", E = "E2", F = "F2" }); list_myClass2.Add(new MyClass2() { A = "A3", E = "E4", F = "F4" }); list_myClass2.Add(new MyClass2() { A = "A3", E = "E4", F = "F4" }); list_myClass2.Add(new MyClass2() { A = "A4", E = "E6", F = "F6" }); CASE-1 var query1

Table TD裡有多個元件, 要顯示同一行 HTML <table class="xTableStyle"> <tr> <th>Inspected</th> <td>@Html.TextBox("txtABC", "90", new { @class = "form-control", style = "width:50px;" }) <span>%</span></td> </tr> </table> CSS .xTableStyle input { display: inline-block; /* 或者使用 inline-flex */ vertical-align: middle; /* 用來垂直置中 */ }  

Edge開發人員工具 #2 - Javascript偵錯 console.log()偵錯此類問題的常用方法是在程式碼中插入多個語句，然後在腳本執行時檢查值 function updateLabel() { var addend1 = getNumber1(); console.log('addend1:', addend1); var addend2 = getNumber2(); console.log('addend2:', addend2); var sum = addend1 + addend2; console.log('sum:', sum); label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; } 利用來源右方功能debug 利用[來源>右方[事件接聽程式中斷點]>Mouse>Click], 可以在任何一個滑鼠Click事件發生時自動中斷點。或依需求勾選其他事件。 在範圍(Scope)可以看到區域變數的資料內容 新增監看, 可以帶出變數類型   ref web: https://learn.microsoft.com/zh-tw/microsoft-edge/devtools-guide-chromium/javascript/

Edge開發人員工具 #1 在頁面上執行F12開啟開發人員工具。 根據預設， 活動列 包含下列工具： 檢查 工具 (切換按鈕) 。 裝置模擬 工具 ( ) 按鈕。 歡迎 使用工具 ( ) 。 專案 工具 ( ) 。 主控台 工具 ( ) 。 來源 工具 ( ) 。 網路 工具 ( ) 。 效 能工具 (效能 ) 。 記憶體 工具 ( ) 。 應用程式 工具 (應用程式 ) 。 根據預設， [快速檢視] 工具列包含下列工具： 主控台 工具 ( ) 。 問題 工具 ( ) 。 活動列和快速檢視工具列 有兩個工具列：DevTools 頂端的活動 列 ，以及您按 下 Esc 時底部的 [快速檢視 ] 工具列。 活動列 包含下列功能： 圖示工具： 檢查工具 (切換按鈕) 。 裝置模擬 ( ) 按鈕。 工具索引標籤： 歡迎 使用工具。 專案 工具。 永久。 主控台 工具。 永久。 來源 工具。 永久。 網路 工具。 效能 工具。 記憶體 工具。 應用程式 工具。 圖示： 將活動列向左移動 ( ) 按鈕。 [更多工具 ] ( ![其他工具] 圖示 ) 按鈕。 自訂和控制 DevTools ( ) 功能表按鈕。 [說明 ] ( ) 按鈕。 關閉 DevTools ( ) 按鈕。 ref web: https://learn.microsoft.com/zh-tw/microsoft-edge/devtools-guide-chromium/overview

C# 引用DLL的3種方式 C#引用DLL的方式有 靜態連結(Static Linking) 動態連結(Dynamic Linking) 專案參考(Project Reference) 以下將說明運作原理、優/缺點... 靜態連結 運作原理, 靜態連結是將DLL編譯進應用程式的執行檔，使得應用程式與DLL的程式碼合併在一個執行檔中 優點： 執行速度較快，無需額外的DLL檔案 缺點： 更新DLL時，必須重新編譯應用程式 編譯時整合： DLL的程式碼在編譯時期被整合進入應用程式的執行檔 執行檔： 應用程式執行檔包含了所有必要的程式碼，無需額外的DLL檔案 應用範圍： 適用於相對較小且不經常更新的專案。若DLL需要更新，則必須重新編譯整個應用程式 部署方式： 部署時只需將單一執行檔複製到目標機器上，不需要額外的DLL // 使用DllImportAttribute進行靜態連結 using System.Runtime.InteropServices; class Program { // 声明 DLL 文件的路径 const string dllPath = "YourDll.dll"; // 声明 DLL 中的函数 [DllImport(dllPath)] public static extern int YourFunction(); static void Main() { // 调用 DLL 中的函数 int result = YourFunction(); Console.WriteLine($"Result from DLL: {result}"); } }   動態連結 運作原理, 在執行時期，應用程式會動態載入DLL，並使用其功能, 使用 System.Reflection 或其他方法動態調用 DLL 中的函數 優點： 更新DLL不需要重新編譯應用程式 缺點： 需要確保DLL存在於執行目錄或系統路徑 編譯時整合： DLL的程式碼在編譯時期並未整合進應用程式，僅在執行時期動態載入 執行檔： 應用程式執行檔不包含DLL程式碼，需要確保DLL存在

ASP.NET MVC 使用Ajax Post 檔案到Controller HTML CODE: <form id="myForm"> <!-- 資料列1 --> <input type="text" name="formDataList[0].Field1" value="Value1A" /> <!-- 為了讓Controller接值可以對應, 一定要相同參數名稱[formDataList]及流水號, 且流水號一定要由0開始 --> <input type="text" name="formDataList[0].Field2" value="Value1B" /> <input type="file" name="formDataList[0].File" /> <!-- 資料列2 --> <input type="text" name="formDataList[1].Field1" value="Value2A" /> <input type="text" name="formDataList[1].Field2" value="Value2B" /> <!-- 沒有檔案 --> <!-- 資料列3 --> <input type="text" name="formDataList[2].Field1" value="Value3A" /> <input type="text" name="formDataList[2].Field2" value="Value3B" /> <inp

ASP.NET MVC Partial View用法 當你想在ASP.NET MVC應用程序中重複使用某個視圖的一部分時，你可以使用Partial View。Partial View允許你將視圖分割為多個可重用的部分，這樣你就可以在應用程序的多個地方使用它。 以下是一個簡單的Partial View使用方法範例： 假設你有一個名為"_UserDetails.cshtml"的Partial View，它顯示用戶的詳細信息。首先，讓我們創建這個Partial View： <!-- _UserDetails.cshtml --> @model YourNamespace.Models.User <div> <h3>@Model.UserName</h3> <p>Email: @Model.Email</p> <p>Age: @Model.Age</p> <!-- 其他用戶詳細信息... --> </div> 現在，假設你有一個名為"UserController"的控制器，你想在不同的視圖中顯示用戶的詳細信息。首先，在你的控制器中獲取用戶數據，然後在視圖中呼叫Partial View： // UserController.cs using System.Web.Mvc; using YourNamespace.Models; public class UserController : Controller { public ActionResult UserDetails(int userId) { // 假設這裡有一些代碼來檢索用戶數據 User user = GetUserById(userId); // 將用戶數據傳遞給Partial View return PartialView("_UserDetails", user); } private User GetUserById(int userId) { // 實現