Python全棧工程師學習筆記 | CSS常用屬性

1.6.1 color顏色屬性

 1a.HSL顏色:通過對色調(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色. 2background-color:hsl(240,100%,50%);color:white； 3b.HSLA顏色:色調(H)、飽和度(S)、亮度(L)、透明度(A)； 4background-color:hsla(0,100%,50%,0.2); 5*c.RGB顏色:紅(R)、綠(G)、藍(B)三個顏色通道的變化 6background-color:rgba(200,100,0); 7d.RGBA顏色:紅(R)、綠(G)、藍(B)、透明度(A) 8background-color:rgba(0,0,0,0.5); 9*e.圖片透明度的設置img.opacity{opacity:0.25;}10兼容IE8filter:alpha(opacity=100);

1.6.2 字體屬性：font

1font:2*font-size:字體大小：20px，60%基於父對象的百分比取值3*font-family：字體：宋體，Arial4font-style：normal正常；italic斜體；oblique傾斜的字體5*font-weight：字體加粗：bold6font-variant:small-caps小型的大寫字母字體7font-stretch:[了解]文字的拉伸是相對於瀏覽器顯示的字體的正常寬度（大部分瀏覽器不支持）。

1.6.3 文本屬性

 1text-indent:首行縮進：text-indent:30px; 2text-overflow：文本的溢出是否使用省略標記（...）。clip|ellipsis（顯示省略標記） 3*text-align:文本的位置：leftcenterright 4text-transform：對象中的文本的大小寫：capitalize(首字母)|uppercase大寫|lowercase小寫 5*text-decoration:字體畫線：none無、underline下畫線，line-through貫穿線 6text-decoration-line：[了解]文本裝飾線條的位置（瀏覽器不兼容） 7 8*text-shadow:文本的文字是否有陰影及模糊效果 9vertical-align:文本的垂直對齊方式10direction：文字流方向。ltr|rtl1112white-space:nowrap;/*強制在同一行內顯示所有文本*/1314*letter-spacing:文字或字母的間距15word-spacing：單詞間距16*line-height：行高17*color：字體顏色

1.6.4 背景屬性：background

 1*background-color:背景顏色 2*background-image:背景圖片 3*background-repeat：是否重復，如何重復?(平鋪) 4*background-position：定位 5background-attachment：是否固定背景， 6scroll:默認值。背景圖像是隨對象內容滾動 7fixed:背景圖像固定 8css3的屬性: 9*background-size:背景大小，如background-size:100px140px;10多層背景：11background:url(test1.jpg)no-repeatscroll10px20px,url(test2.jpg)no-repeatscroll50px60px,url(test3.jpg)no-repeatscroll90px100px;12background-origin:content-box,content-box,content-box;13background-clip:padding-box,padding-box,padding-box;14background-size:50px60px,50px60px,50px60px;

1.6.5 *邊框：

盒子模型：

 1border:寬度樣式顏色; 2border-color; 3border-style;邊框樣式：solid做到，dotted點狀線，dashed虛線 4border-width: 5border-left-color; 6border-left-style; 7border-left-width: 8... 9CSS3的樣式10border-radius：圓角處理11box-shadow:設置或檢索對象陰影

1.6.6 *內補白（內補丁）

1padding：檢索或設置對象四邊的內部邊距,如padding:10px;padding:5px10px;2padding-top：檢索或設置對象頂邊的內部邊距3padding-right：檢索或設置對象右邊的內部邊距4padding-bottom：檢索或設置對象下邊的內部邊距5padding-left：檢索或設置對象左邊的內部邊距

1.6.7 *外補白（外補丁）

1margin：檢索或設置對象四邊的外延邊距,如margin:10px;margin:5pxauto;2margin-top：檢索或設置對象頂邊的外延邊距3margin-right：檢索或設置對象右邊的外延邊距4margin-bottom：檢索或設置對象下邊的外延邊距5margin-left：檢索或設置對象左邊的外延邊距

1.6.8 Position定位

1*position:定位方式：absolute(絕對定位)、fixed(固定)（relative定位參考，可對內部相對absolute定位）2*z-index:層疊順序，值越大越在上方。3*top:檢索或設置對象與其最近一個定位的父對象頂部相關的位置4right:檢索或設置對象與其最近一個定位的父對象右邊相關的位置5bottom:檢索或設置對象與其最近一個定位的父對象下邊相關的位置6*left:檢索或設置對象與其最近一個定位的父對象左邊相關的位置

1.6.9. Layout布局

 1*display：是否及如何顯示：none隱藏，block塊狀顯示... 2*float:指出了對象是否及如何浮動:值none|left|right 3*clear：清除浮動：none|left|right|both兩側 4visibility：設置或檢索是否顯示對象。visible|hidden|collapse。 5與display屬性不同，此屬性為隱藏的對象保留其占據的物理空間 6clip:檢索或設置對象的可視區域。區域外的部分是透明的。rect(上-右-下-左) 7如：clip:rect(auto50px20pxauto);上和左不裁剪，右50，下20. 8*overflow:超出隱藏：hidden，visible：不剪切內容 9overflow-x：內容超過其指定寬度時如何管理內容:visible|hidden|scroll|auto10overflow-y：內容超過其指定高度時如何管理內容

1.6.10 Flexible Box 彈性盒子

1box-orient:設置或檢索彈性盒模型對象的子元素的排列方式。horizontal(水平)|vertical(縱向)2box-pack設置或檢索彈性盒模型對象的子元素的對齊方式。3box-align設置或檢索彈性盒模型對象的子元素的對齊方式。4box-flex設置或檢索彈性盒模型對象的子元素如何分配其剩餘空間。5box-flex-group設置或檢索彈性盒模型對象的子元素的所屬組。6box-ordinal-group設置或檢索彈性盒模型對象的子元素的顯示順序。7box-direction設置或檢索彈性盒模型對象的子元素的排列順序是否反轉。8box-lines設置或檢索彈性盒模型對象的子元素是否可以換行顯示。

1.6.11. 用戶界面 User Interface

 1*cursor滑鼠指針採用何種系統預定義的光標形狀。pointer小手，url自定義 2zoom設置或檢索對象的縮放比例：normal|5倍|200%百分比 3box-sizing設置或檢索對象的盒模型組成模式。content-box|border-box 4content-box：padding和border不被包含在定義的width和height之內。 5border-box：padding和border被包含在定義的width和height之內。 6 7resize設置或檢索對象的區域是否允許用戶縮放，調節元素尺寸大小。 8none：不允許用戶調整元素大小。 9both：用戶可以調節元素的寬度和高度。10horizontal：用戶可以調節元素的寬度11vertical：用戶可以調節元素的高度。1213outline復合屬性：設置或檢索對象外的線條輪廓14outline-width設置或檢索對象外的線條輪廓的寬度15outline-style設置或檢索對象外的線條輪廓的樣式16outline-color設置或檢索對象外的線條輪廓的顏色17outline-offset設置或檢索對象外的線條輪廓偏移位置的數值18nav-index設置或檢索對象的導航順序。19nav-up設置或檢索對象的導航方向。20nav-right設置或檢索對象的導航方向。

1.6.12 多欄 Multi-column

 1columns設置或檢索對象的列數和每列的寬度 2column-width設置或檢索對象每列的寬度 3column-count設置或檢索對象的列數 4column-gap設置或檢索對象的列與列之間的間隙 5column-rule設置或檢索對象的列與列之間的邊框 6column-rule-width設置或檢索對象的列與列之間的邊框厚度 7column-rule-style設置或檢索對象的列與列之間的邊框樣式 8column-rule-color對象的列與列之間的邊框顏色 9column-span象元素是否橫跨所有列10column-fill對象所有列的高度是否統一11column-break-before對象之前是否斷行12column-break-after對象之後是否斷行13column-break-inside對象內部是否斷行

1.6.13 表格相關屬性

1table-layout設置或檢索表格的布局算法2border-collapse設置或檢索表格的行和單元格的邊是合併在一起還是按照標準的HTML樣式分開separate|collapse3border-spacing設置或檢索當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距4caption-side設置或檢索表格的caption對象是在表格的那一邊top|right|bottom|left5empty-cell設置或檢索當表格的單元格無內容時，是否顯示該單元格的邊框hide|show

1.6.14 過渡 Transition

1transition檢索或設置對象變換時的過渡效果2transition-property檢索或設置對象中的參與過渡的屬性3transition-duration檢索或設置對象過渡的持續時間4transition-timing-function檢索或設置對象中過渡的類型5transition-delay檢索或設置對象延遲過渡的時間

1.6.15. 動畫 Animation

1animation檢索或設置對象所應用的動畫特效2animation-name檢索或設置對象所應用的動畫名稱3animation-duration檢索或設置對象動畫的持續時間4animation-timing-function檢索或設置對象動畫的過渡類型5animation-delay檢索或設置對象動畫延遲的時間6animation-iteration-count檢索或設置對象動畫的循環次數7animation-direction檢索或設置對象動畫在循環中是否反向運動8animation-play-state檢索或設置對象動畫的狀態9animation-fill-mode檢索或設置對象動畫時間之外的狀態

1.6.16. 2D變換 2D Transform

1transform檢索或設置對象的變換2transform-origin檢索或設置對象中的變換所參照的原點

1.6.17. Media Queries Properties媒體查詢

 1width定義輸出設備中的頁面可見區域寬度 2height定義輸出設備中的頁面可見區域高度 3device-width定義輸出設備的螢幕可見寬度 4device-height定義輸出設備的螢幕可見高度 5orientation定義'height'是否大於或等於'width'。值portrait代表是，landscape代表否 6aspect-ratio定義'width'與'height'的比率 7device-aspect-ratio定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3,16/9,16/10 8 9device-aspect-ratio定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3,16/9,16/1010color定義每一組輸出設備的彩色原件個數。如果不是彩色設備，則值等於011color-index定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於012monochrome定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等於013resolution定義設備的分辨率。如：96dpi,300dpi,118dpcm14scan定義電視類設備的掃描工序15grid用來查詢輸出設備是否使用柵格或點陣。只有1和0才是有效值，1代表是，0代表否