ข้อความซีเอสเอส

สารบัญ

    แสดงสารบัญ

CSS มีคุณสมบัติมากมายในการจัดรูปแบบข้อความ

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.


ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid gray;
  padding: 8px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>

สีข้อความ

color คุณสมบัติที่ใช้ในการกำหนดสีของข้อความ สีถูกกำหนดโดย:

  • ชื่อสี - เช่น "red"

  • ค่า HEX - เช่น "ff0000"

  • ค่า RGB - เช่น "rgb(255,0,0)"

ดูค่าสี CSS เพื่อดูรายการค่าสีที่เป็นไปได้ทั้งหมด

สีข้อความเริ่มต้นสำหรับเพจถูกกำหนดไว้ในตัวเลือกเนื้อหา

ตัวอย่าง

body {
  color: blue;
}

h1 {
  color: green;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>

</body>
</html>

สีข้อความและสีพื้นหลัง

ในตัวอย่างนี้ เรากำหนดทั้งคุณสมบัติ สีพื้นหลัง และคุณสมบัติ สี:

ตัวอย่าง

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

  div {
  background-color: blue;
  color: white;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>

</body>
</html>

สำคัญ: คอนทราสต์สูงเป็นสิ่งสำคัญมากสำหรับผู้ที่มี ปัญหาการมองเห็น ดังนั้นควรมั่นใจเสมอว่าคอนทราสต์ ระหว่างสีข้อความกับสีพื้นหลัง (หรือภาพพื้นหลัง) ก็ดี!

คุณสมบัติสีข้อความ CSS

color

ระบุสีของข้อความ