2015年3月27日 星期五

快速搞定：中標及內文的文字設定


快速設定大標、中標及內文
文字的設定，是網路文本和讀者打交道過程，最重要的介面。


設定中標：讓讀者更無障礙快速理解大意

這是一段普通的文字。文字會依頁面的寬度而填滿。也就是只有在段落的最後才有<br>。這 是一段普通的文字。文字會依頁面的寬度而填滿。也就 是只有在段落的最後才有<br>。

這是文字，
但有經過斷行的處理，
也就是有加上<br>。
如果你複製，貼上（不含格式）文字，
kompozer也會依段落格式的形式貼上，換言之，分段的形式會被保留。

這是表格裡的文字。你要把 class的名稱，加到TD裡面去，才有用。

教學影音



★★基本文字寫作技巧：把字用DIV包起來。


<style>

.wordtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.38em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
margin-top: 1.5em;
margin-bottom: 0.8em;
background-image: url(https://goo.gl/pbVht0);
background-repeat: no-repeat;
background-position: left center;
background-size: 42px;
padding-left: 2.4em;
border-bottom: 1px solid darkred;
}

.wordmail01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}

.wordmail02 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 2;
text-align: left;
}

.wordmail03 {
font-family: Verdana, '標楷體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
text-align: left;
}
</style>


第二組常用文字 CSS！ see video


<style>

/* 硬陰影大標字 */
硬陰影式的凸顯大標文字
.bigtitle010708 {
font-family: Verdana, '微軟正黑體';
font-size: 3.1em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
text-decoration: underline;
}

/* 大標 */
.bigtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 1.5em;
text-align: center;
border-bottom: 3px solid darkorange;
}

/* 大標:hover */
.bigtitle01:hover {
border-bottom: 3px solid #0080FF;
}

/* 中標 */
.midtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: bold;
line-height: 2.4;
text-align: center;
letter-spacing: 0.03em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
border-top: 1px solid red;
text-align: center;
}

/* 中標:石材字 */
.midtitlesto01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.65em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.1em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px gray;
background-image: url(https://goo.gl/Tes73W);
}

/* 中標:描邊字 */
.midtitlesto0321 {
font-family: Verdana, '微軟正黑體';
font-size: 2em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.05em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: darkred;
-webkit-text-fill-color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

/* 重點強調字:有引號 */
這是前面有引號的重點強調。對文章的重點要特別強調時，可用。
.ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
}

/* 小標 */
.littletitle01 {
width: 65%;
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.06em;
margin-bottom: 0.2em;
border-bottom: 1px solid red;
}

/* 小標:hover */
.littletitle01:hover::after {
content:" /";
}

/* 預設字簡明小標 */
預設字簡明小標字型
.lititlemingbo161014 {
margin: 12px 0px 0px;
line-height: 18px;
color: rgb(0, 0, 0);
font-family: Verdana,Arial;
font-size: 15px;
font-weight: bold;
letter-spacing: normal;
orphans: 2;
text-align: left;
background-color: rgb(249, 249, 249);
}

/* 暈染陰影效果小標 */
暈染陰影效果的吸睛小標字型
.ironlittibo010708 {
font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
text-shadow:0px 0px 15px #FF37FD;
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}

/* 基本內文：走二欄 */
.ironcontent02 {
line-height: 1.8;
letter-spacing: 0.1em;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px outset gray;
}

/* 基本細明體內文 */
.ironcontentmi01 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
}

/* 表格內基本細明體，左右對齊 */
.ironcontentmi010528 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}

/* 基本黑體內文 （粗）*/
.ironcontentbo01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
</style>



我想要立刻、馬上地上手進階使用。

1. 簡單、快速：3秒調出漂 亮文字布局
2. 快速的讓文字變得好看
3. CSS 的文字魔術
4. 讓人「讀得進去」的文字安排
5. 網路新聞文字寫作技巧 #10 Tips
6. 快速、好看的中標版型
7. 布落格寫作05：寫出漂亮的中標和內文。★很常用★


沒有留言:

張貼留言