CSS要點例子

該筆記僅用于溫習用

cascade and inheritance

1、當樣式沖突的時，css後邊代碼的語句樣式優先應用

2、類選擇器優先于元素選擇器

3、子元素會繼承父元素的樣式

css selectors選擇器

1、類選擇器

2、元素選擇器

類選擇器與元素選擇器相結合，如 p.left{}将會作用于有.left class的p标簽

3、id選擇器#

4、屬性選擇器。例子：

　　a[title]{ }

　　指定值 a[href="https://www.baidu.com/"]{ }

　　li[class^="a"]{}會作用于所有class屬性以a字母開頭的li标簽

5、包含選擇器。例子：

　　div em{} 所有在div中的em（包括孫子）都作用。

6、相鄰選擇符 如h1+p{}會作用于緊跟着h1的第一個p标簽

7、兄弟選擇符 如h1~p{}會作用于和h1之後同級的所有p标簽

8、pseudo-classes 如 a:hover { }

9、pseudo-elements 如 p::first-line { }

10、combinator 如 artticle > p { } 就選擇了article元素内所有的p元素

将兩個選擇器用逗号連接配接，這樣就作用于兩個，省代碼

Block and inline boxes

Block boxes 會到下一新行，寬度擴充到100%，可以指定width和height。padding、margin 和 border都會推開其他box

<h1><p>這些會預設使用block boxes

inline boxes 不會到下一行，width和height不能指定，水準的padding、magin和border會推開其他inline boxes，垂直則不會。

<a><span><em><strong>這些都是inlilne boxes

上面兩種boxes算是outer display type，boxes也有inner display type，如flex、grid。

還有 inline-flex

CSS box model

block box由下列組成：

Content box:可以使用width和height來改變大小

Padding box:可以使用padding來改變大小

Border box:可以使用border屬性來改變

Margin box:可以使用margin屬性來改變

box的大小由content box、padding和margin的大小相加而得。

The alternative CSS box model

要使用這個model，就要設定屬性box-sizing: border-box，這樣width就是包括border和padding的大小。

要應用到整個頁面，用以下css設定：

html {

box-sizing: border-box;

}

*, *::before, *::after {

box-sizing: inherit;

margin外邊距

margin可以是負值

四面的設定：

margin-top

margin-right

margin-bottom

margin-left

margin collapsing:兩個element接觸，中間的margin取決與最大的那個的margin大小，另一個是負值的話，還會縮小margin。（左右好像不行）

border邊框

border有四面可以設定:

border-top

border-right

border-bottom

border-left

設定border的寬度,樣式和顔色：

border-width

border-style

border-color

設定單面的屬性：

border-top-width

border-top-style

border-top-color

border-right-width

border-right-style

border-right-color

border-bottom-width

border-bottom-style

border-bottom-color

border-left-width

border-left-style

border-left-color

padding内邊距

padding不能為負值

四面設定：

padding-top

padding-right

padding-bottom

padding-left

The box model and inline boxes

像span這樣的inline boxes，設定padding和margin之後，會水準推開其他元素，垂直則不會。

Using display: inline-block

介于inline和block之間的特性，就是既不會換行，width和height又有效果，而且水準垂直的padding和margin都會推開其他元素。

Background and borders 背景和邊框

設定背景顔色：

background-color: #559900;

background-color: red;

background-color: rgba(255,255,255,.5);

設定背景圖檔：

background-image: url(star.jpg);

設定背景圖檔鋪展重複方式：

例子: background-repeat: repeat; //預設重複鋪展

可選值：no-repeat（不重複鋪展）、repeat-x（水準重複鋪展）、repeat-y（垂直重複鋪展）。

設定背景圖檔大小：

background-size: 50px 20em;

background-size: cover; //覆寫整個box但保持原始圖檔比例，有時圖檔内容會超出box

background-size: contain; //顯示整張圖檔并且保持原始圖檔比例，box有時會出現空白部分。

設定背景圖檔位置：

（位置系統以左上角為起始點）

background-position: top center; //圖檔放到頂邊中心

background-position: 20px 10%; //放到水準離左邊20px，垂直離頂邊10%比例的位置

background-position: top 20px;

background-position: top 20px right 10px; //放到離頂邊20px，離右邊10px的位置

可以單獨使用background-position-x和background-position-y屬性

Gradient backgrounds 漸進背景

background-image: linear-gradient(45deg, rgba(200,29 55,1) 49% rgba(2,255,200,1) 86%);

還有radial-gradient（圓）、repeating-linear-gradient（線性多層）、repeating-radial-gradient（圓多層）、conic-gradient（圓錐）。

詳細用法：https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

漸進代碼生成器：https://cssgradient.io/

Multiple background images 多背景圖檔

一個box可以有多個背景圖檔，屬性用逗号隔開，設定各自的大小位置等也是用逗号隔開，如果設定屬性少于背景圖檔，設定的屬性會循環重複。

background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);

background-repeat: no-repeat, repeat-x, repeat; //image4會使用第一個屬性no-repeat，以此類推。

background-position: 10px 20px, top right; //image3、image4會依次使用這兩個屬性。

Background attachment 背景依附

background-attachment: scroll; //當整個頁面滾動，背景也會跟着滾動，當背景中的内容滾動，背景不會滾動。

background-attachment: fixed; //當整個頁面滾動，背景固定不動，當背景中的内容滾動，背景不會滾動。

background-attachment: local; //當整個頁面滾動，背景也會跟着滾動，當背景中的内容滾動，背景跟着滾動。

快捷使用背景方式：

background:

linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) top right / 200px 200px repeat, //大小要緊接在位置和/後邊

url(big-star.png) center no-repeat,

rebeccapurple; //背景顔色必須在最後設定

//設定多張圖檔，必須先設定完第一張圖檔的全部屬性，然後逗号後邊再設定第二張

提醒：主要在背景上的文字要確定背景消失了，字的顔色一樣能看到，重要的字還是作為html标簽裡面，因為朗讀器讀不出背景中的文字。

Borders

border-top: 2px dotted rebeccapurple; //設定頂邊

border-bottom: 1em double rgb(24, 163, 78); //設定底邊

Rounded corners圓角

border-radius: 10px; //四個角都是10px的圓角，或者可以是em值。

border-top-right-radius: 1em 10%; //右上角為水準1em，垂直10%的圓角

overflow溢出

overflow:hidden; //溢出box的部分會隐藏掉

overflow:visible; //預設，溢出box的部分會顯示出來

overflow:scroll; //用滾動條解決溢出問題

overflow-y:scroll; //縱向滾動條

overflow-x:scroll; //橫向滾動條

overflow:auto; //不溢出的時候就隐藏滾動條

scroll和auto屬性建立了一個Block Formatting Context

min-height: 150px; //當box沒内容時，最小高度也是150px,當有内容且超出150px，box高度自适應增大。

width:50vw; //設定寬度為viewport的50%；

height:100vh; //設定高度為viewport的100%;

當image、video、iframe等元素溢出方框時，可以使用max-width:100%;來使其在方框内。

object-fit屬性可以設定cover,contain和fill，效果像background-size一樣，fill屬性是忽略原始比例，鋪滿box。

styling table