愛晴狂想曲

          display: flex;         justify-content: center; /* 水平置中 */         align-items: center; /* 垂直置中 */

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

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...

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; /* 用來垂直置中 */ }  

差別1：link屬於XHTML標簽，而@import完全是CSS提供的一種方式。 link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。 差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。 差別3：兼容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。 差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。 標準網頁制作加載CSS文件時，還應該選定要加載的媒體（media），比如screen，print，或者全部all等。 差別5：@import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表，如： main.css ———————- @import “sub.css”; @import “sub1.css”; sub.css ———————- p {color:red;} sub1.css ———————- .myclass {color:blue} 這樣更利於修改和擴展． 提示：這樣做有一個缺點，會對網站服務器產生過多的HTTP請求，以前是一個文件，而現在卻是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站還是謹慎使用。有興趣的可以觀察一下像新浪等網站的首頁或欄目首頁代碼，他們總會把css或js直接寫在html裏，而不用外部文件。 reference web: https://wefollownews.appspot.com/cittopnews201408_70/5270.html http://www.dreamdu.com/blog/2007/05/11/css_link_import/

有時在寫網頁報表時，會有需求為固定幾列資料後，強制自動分頁。 這裡要介紹的方法是使用HTML標籤和CSS就可以達到這個功能。 只要在要分頁的地方，加上下面的語法，就完成囉！ <p style="page-break-after:always"></p> reference web: http://css6.pixnet.net/blog/post/38663328-css%E8%87%AA%E5%8B%95%E5%88%86%E9%A0%81%E5%88%97%E5%8D%B0