Κείμενο CSS

Πίνακας περιεχομένων

Το 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 χρησιμοποιείται για τον ορισμό του χρώματος του κειμένου. Το χρώμα καθορίζεται από:

ένα όνομα χρώματος - όπως "κόκκινο"
μια τιμή 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>

Χρώμα κειμένου και χρώμα φόντου

Σε αυτό το παράδειγμα, ορίζουμε τόσο την ιδιότητα background-color και την ιδιότητα color:

Παράδειγμα

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: Καθορίζει το χρώμα του κειμένου