CSS 創作寫作的使用操作
content: 內容 |
插入、置換內容 |
---|---|
h2::before { content: url(圖片網址);} h2::after { content: "NEW!"; color: red; font-size: 20px; margin-right: 10px;} content: none; h2::before { content: url() "NEW!"; color: red;} |
在之前置入圖像 在之後置入文字 置入空的內容 多種內容組合 |
table: 格表相關 |
|
---|---|
table-layout: auto / fixed; display: table-cell; .divtd { text-align: left /center /right; vertical-align: top /middle /bottom;} border-collapse: separate /collapse; table { border-collapse: collapse;} td { border: none /hidden;} |
auto是自動計算。 fixed,以第一行儲存格決定各欄的寬度。 若是圖片寬度大於格寬,則會破格而出。 若沒有指定寬度,則為各格平均寬。 顯示結果與以<td>/ <th>包圍時相同。 設在table。框線顯示方法:不重疊;重疊。 若要設定tr的框線,則一定要設定collapse。 格線顯示為隱藏/消失。 |
counter: 計數器 |
|
---|---|
<p> <div>xxx</div> <div>xxx</div> <div>xxx</div> </p> div::before { content: counter(mycount01); color: red;} div {counter-increment: mycount01 2;} p {counter-reset: mycount 3} |
範例 mycounter01是計數器名稱,可自行設置。 預計從0,以1開始。此例,依2的倍數,如246。 如有重設,若是3,則從4開始。 |
box-sizing: 計算box大小方法 |
排版 |
---|---|
box-sizing: content-box; box-sizing: border-box; div { float: left; width: 50%; box-sizing: border-box; } |
以content來計算長寬 以border來計算長寬; 可以防止box水平並排時排版錯亂。 |
@keyframes: 動畫 |
animation 屬性 |
---|---|
animation: 關鍵影格名稱
播放時間 補間方法 延遲 重複 方向 h2 { color: gray; -webkit-animation: myanim01 5s; } @-webkit-keyframes myanim01 { 0% {background-color: skyblue;} 50% {background-color: pink;} 100% {background-color: yellow;} } ex: h2 {background-color: gray;} h2:hover {-webkit-animation: myanim01 5s;} animation-timing-function: ease /linear /ease-in /ease-out /cubic-bezier() ex: 0% {background-color: skyblue; opacity: 0;} ex: h2 {-webkit-animation: myanim01 5s 10s;} ex: h2 {-webkit-animation: myanim01 5s 3(or infinite);} ex: h2 {-webkit-animation: myanim01 5s linear infinite, myanim02 10s 1;} animation-play-state: paused /running h2{ -webkit-animation: myanim01 5s; animation-play-state: paused;} h2:hover { animation-play-state: running;} -webkit-animation-fill-mode: none /forwards /backwards /both; |
屬性排列 使用方法 使用hover 補間方法 改變多重屬性 延遲 重覆 套用多個關鍵影格 暫停/播放 播放後顯示狀態:無/最後一格/第一格/延遲中第一格完最後一格 |
transition: 轉換 |
說明 |
---|---|
transition: 播放時間 屬性 補間方法 延遲 ex: transition: 2s background-color ease 5s; transition-duration: 播放時間 transition-property: 屬性 transition-timing-function: 補間方法 transition-delay: 延遲 h2 { font-size: 24px; background-color: skyblue; -webkit-transition: 1s background-color; -moz-transition: 1s background-color; -o-transition: 1s background-color; -ms-transition: 1s background-color; transition: 1s background-color; } h2:hover { font-size: 36px; background-color: yellow; } 多重套用: transition: 1s font-size, 1s background-color 1s; |
預設值:0 all ease 0 2s 屬性名稱 ease/ linear/ ease-in/ ease-out/ ease-in-out 2s 範例: 1秒 屬性; 只有background-color產生作用,字體大小有作用,不轉換 多重套用範例 |
transform: 2D變形效果 |
說明內容 |
---|---|
rotate(); translate() /translateX()/ translateY(); scale() /scaleX()/ scaleY(); skew()/ skewX()/ skewY(); matrix(); none ex: div { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -0-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } ex: div { -webkit-transform: rotate(10deg) scale(0.5, 2); -moz-transform: rotate(10deg) scale(0.5, 2); -0-transform: rotate(10deg) scale(0.5, 2); -ms-transform: rotate(10deg) scale(0.5, 2); transform: rotate(10deg) scale(0.5, 2); } ex: div { -webkit-transform: translate(100px, 100px); -moz-transform: translate(100px, 100px); -0-transform: translate(100px, 100px); -ms-transform: translate(100px, 100px); transform: translate(100px, 100px); } ex: div { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -0-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; } ex: div { -webkit-transform: skewX(30deg); -moz-transform: skewX(30deg); -0-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); } |
旋轉 移動 縮放 傾斜 變換行列 不執行 旋轉10度。 可以是負數。 一旦套用transform,同時就改變了transform-orgin的預設值為「50% 50%」。 縮放 此例是旋轉和縮放同時作用 移動 2D變形效果原點 x軸:left / 0%, center /50%, right /100%; Y軸: top /0%, center /50%, bottom / 100%; 傾斜 指定x軸,x不動,效果: y軸往x軸方向以逆時方向傾斜30度的形狀。 指定y軸,y不動,效果: x軸往Y軸方向以順時方向傾斜30度的形狀。 |
合併使用
transform: rotate(360deg) scale(2,2) skew(10deg,5deg);
CSS Flexbox
基本HTML結構:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
flex-container 的 CSS:
display: flex; //啟動 flex模式
flex-wrap: nowrap; //warp; //不換行(d)、換行
justify-content: flex-start; //center; flex-end; space-around; space-between //靠左(d)、居中、靠右、平均、間隔
align-items: flex-start; //center; flex-end; stretch; baseline; //垂直靠上、居中、置底、拉齊(d)、文字線
items CSS:
order: 3; //0(d) //依數字順序排列
flex-grow: 1; //0(d) //數字比例字延伸
flex-shrink: 0; //1(d) //數字比例減縮
flex-basis: 200px; //預設開始的寬度
flex: 0 0 200px; //合寫
align-self: flex-start; //center; flex-end; //自我垂直靠上、居中、置底
對齊方式:
justify-content: center ; //左右對齊
align-content: flex-start ; //上下對齊
align-items: flex-end; //項目自身對齊
grid常用語法
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto 200px 25%;
grid-gap: 5px 100px;
padding: 10px;
align-items: end; /* 靠底對齊 */
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
align-items: center; /* 靠中對齊 */
align-items: start; /* 靠上對齊 */
align-items: end; /* 靠底對齊 */
★Kompozer寫作語法專用,請直接copy:★
沒有留言:
張貼留言