*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

CSS 創作寫作常用語法


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度的形狀。




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;      //自我垂直靠上、居中、置底










★Kompozer寫作語法專用,請直接copy:★   

<body
style="margin: auto; width: 578px; font-size: 13px; line-height: 1.4;">
<br>
<style>
.divtab1016 {

}

div.divtab1016 >table {
border-collapse: collapse;
}

div.divtab1016 >table >tbody >tr >th {
font-family: Verdana, '新細明體';
font-size: 14px;
}

div.divtab1016 >table >tbody >tr {
border-bottom: 1px solid gray;
}

div.divtab1016 >table >tbody >tr:hover {
background-color: gainsboro;
}

div.divtab1016 >table >tbody >tr >td {
font-family: Verdana, '新細明體';
font-size: 13px;
font-weight: normal;
line-height: 1.6;
text-align: left;
border-left: 1px solid transparent;
padding-top: 7px;
}


div.divtab1016 >table >tbody >tr:hover >td {
border-left: 1px solid gray;
}

.wordmiti1016 {
margin: 12px 0px 0px;
line-height: 18px; color: rgb(0, 0, 0);
font-family: Verdana,Arial;
font-size: 15px;
font-weight: bold;
orphans: 2; text-align: left;
background-color: rgb(249, 249, 249);
}

</style>
<br>

<div class="divtab1016">
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<th style="vertical-align: top; width: 66%;">content: 內容<br>
</th>
<th style="vertical-align: top;">插入、置換內容<br>
</th>
</tr>
<tr>
<td style="vertical-align: top;">h2::before {<br>
content: url(圖片網址);}<br>
<br>
</td>
<td style="vertical-align: top;">在之前置入圖像<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
</div>






沒有留言:

張貼留言