| 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>
<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>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น