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

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:寫出漂亮的中標和內文★很常用★



沒有留言:

張貼留言