Text
เราสามารถกำหนดรูปแบบให้ข้อความ เช่น ความสูงของบรรทัด, ตำแหน่งการจัดวางข้อความ, การขีดเส้นใต้, การกำหนดตัวพิมพ์เล็กพิมพ์ใหญ่ และอื่นๆ ผ่าน Property ต่างๆ ดังนี้| Property | Description | Values | |
|---|---|---|---|
| color | ใช้กำหนดสี | สี | red #000099 |
| direction | ใช้กำหนดทิศทางของ text (IE6) | ltr rtl | ซ้ายไปขวา ขวาไปซ้าย |
| line-height | ใช้กำหนดความสูงของบรรทัด ซึ่งจะนับรวมขอบด้านบนและล่างของตัวอักษรด้วย | normal number (pt) % | normal ความสูง 15pt ความสูง 150% |
| letter-spacing | ใช้กำหนดระยะห่าง ระหว่างตัวอักษรแต่ละตัว | normal number (cm) | normal -0.02cm 0.2cm |
| text-align | ใช้กำหนดรูปแบบการจัดคำ | left center right justify |
left
center
right
justify
|
| text-decoration | ใช้กำหนดเส้นให้กับตัวอักษรในลักษณะต่างๆ | none underline overline line-through blink | none ขีดเส้นใต้ เส้นเหนือตัวอักษร เส้นขีดทับตัวอักษร ตัวอักษรกระพริบ *IE ใช้ไม่ได้ |
| text-indent | ใช้กำหนดขนาดของย่อหน้า ในบรรทัดแรกของย่อหน้านั้นๆ | number (in) % |
กำหนดขนาดของย่อหน้า 0.3 นิ้ว
กำหนดขนาดของย่อหน้า 5% (ถ้ากำหนด 50% จะได้กึ่งกลางหน้าจอพอดี )
|
| text-transform | ใช้แปลงตัวอักษรให้เป็นตัวพิมพ์เล็ก หรือ พิมพ์ใหญ่ | uppercase lowercase capitalize | UPPERCASE แปลงเป็นพิมพ์ใหญ่ lowercase แปลงเป็นพิมพ์เล็ก Capitalize แปลงพิมพใหญ่เฉพาะตัวแรกของคำ |
| white-space | ใช้กำหนดให้ หรือ ไม่ให้มีการขึ้นบรรทัดใหม่ | normal nowrap |
ให้มีการตัดคำขึ้นบรรทัดใหม่ตามปกติ
ไม่ให้มีการตัดคำขึ้นบรรทัดใหม่
|
| word-spacing | ใช้กำหนดกำหนดระยะห่าง ระหว่างแต่ละคำ (IE6) | normal number (em) | normal - Happy new year 1em - Happy new year |
จาก Property ต่างๆ ด้านบน ลองนำมาใช้จัดรูปแบบให้กับข้อความกันค่ะ
Example
<p style="color:green; text-indent:1cm; text-align:justify;">
<span style="text-decoration:underline">CSS</span>
ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>
<span style="text-decoration:underline">CSS</span>
ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>
Output
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML
<html>
<head>
<style type="text/css">
.p1 {
color:#FF0033;
line-height:18pt;
letter-spacing:0.05cm;
text-decoration:overline;
text-indent:0.5in;
text-transform:capitalize;
white-space:normal;
word-spacing:0.5em;
}
</style>
</head>
<body>
<p class="p1">good moring teacher, how are you today?</p>
</body>
</html>
Output<head>
<style type="text/css">
.p1 {
color:#FF0033;
line-height:18pt;
letter-spacing:0.05cm;
text-decoration:overline;
text-indent:0.5in;
text-transform:capitalize;
white-space:normal;
word-spacing:0.5em;
}
</style>
</head>
<body>
<p class="p1">good moring teacher, how are you today?</p>
</body>
</html>
Good Moring Teacher, How Are You Today?
CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
- text-shadow
- word-wrap
Browser Support
| Property | Browser Support | ||||
|---|---|---|---|---|---|
| text-shadow | |||||
| word-wrap | |||||
Internet Explorer does not yet support the text-shadow property.
Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
CSS3 Text Shadow
In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:
CSS3 Word Wrapping
If a word is too long to fit within an area, it expands outside:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
The CSS code is as follows:
Example
Allow long words to be able to break and wrap onto the next line:
p {word-wrap:break-word;}
Try it yourself »
New Text Properties
| Property | Description | CSS |
|---|---|---|
| hanging-punctuation | ตัวอักษรวรรคตอนอาจจะอยู่นอกกรอบ | 3 |
| punctuation-trim | ตัดแต่งเครื่องหมายวรรคตอน | 3 |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3 |
| text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text | 3 |
| text-justify | Specifies the justification method used when text-align is "justify" | 3 |
| text-outline | Specifies a text outline | 3 |
| text-overflow | Specifies what should happen when text overflows the containing element | 3 |
| text-shadow | Adds shadow to text | 3 |
| text-wrap | Specifies line breaking rules for text | 3 |
| word-break | Specifies line breaking rules for non-CJK scripts | 3 |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next line |
