Σε αυτό το τρίτο μέρος της εισαγωγής στα CSS θα δούμε όλες τις ιδιότητες και επιλόγές για τα κείμενα και τις γραμματοσειρές.
Ιδιότητες Κειμένου του CSS
Οι ιδιότητες κειμένου (text properties) του CSS ορίζουν την εμφάνιση του κειμένου.
Ακολουθούν μερικά παραδείγματα
Ορισμός του Χρώματος Κειμένου
<html>
<head>
<style>
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1> This is header 1 </h1>
<h2> This is header 2 </h2>
<p> This is a paragraph </p>
</body>
</html>
Καθορισμός της Απόστασης των Χαρακτήρων
<html>
<head>
<style>
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<p>
<b> Note: </b> Netscape 4 does not support the "letter-spacing" property.
</p>
<h1> This is header 1 </h1>
<h4> This is header 4 </h4>
</body>
</html>
Ευθυγράμμιση Κειμένου
<html>
<head>
<style>
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1> This is header 1 </h1>
<h2> This is header 2 </h2>
<h3> This is header 3 </h3>
</body>
</html>
Διακόσμηση Κειμένου
<html>
<head>
<style>
h2 {text-decoration: overline}
h4 {text-decoration: line-through}
p {text-decoration: underline}
a {text-decoration: none}
</style>
</head>
<body>
<h2>This is header 2</h2>
<h4>This is header 4</h4>
<p> This is some text in a paragraph </p>
<p>
<a href="http://www.w3schools.com"> This is a link </a>
</p>
</body>
</html>
Εσοχή Πρώτης Γραμμής Παραγράφου
<html>
<head>
<style>
p {text-indent: 1cm}
</style>
</head>
<body>
<p> This is some text in a paragraph </p>
</body>
</html>
Έλεγχος των Γραμμάτων Κειμένου
<html>
<head>
<style>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<p class="uppercase"> This is some text in a paragraph </p>
<p class="lowercase"> This is some text in a paragraph </p>
<p class="capitalize"> This is some text in a paragraph </p>
</body>
</html>
Ιδιότητες Γραμματοσειράς του CSS
Οι ιδιότητες γραμματοσειράς (font properties) του CSS ορίζουν τη γραμματοσειρά ενός κειμένου.
Ακολουθούν μερικά παραδείγματα
Ορισμός της Γραμματοσειράς Κειμένου
<html>
<head>
<style>
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: "sans-serif"}
</style>
</head>
<body>
<h3> This is header 3 </h3>
<p> This is a paragraph </p>
<p class="sansserif"> This is a paragraph </p>
</body>
</html>
Ορισμός του Μεγέθους Γραμματοσειράς
<html>
<head>
<style>
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
</style>
</head>
<body>
<h1> This is header 1 </h1>
<h2> This is header 2 </h2>
<p> This is a paragraph </p>
</body>
</html>
Ορισμός του Στυλ Γραμματοσειράς
<html>
<head>
<style>
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body>
<h1> This is header 1 </h1>
<h2> This is header 2 </h2>
<p> This is a paragraph </p>
</body>
</html>
Ορισμός του Variant Γραμματοσειράς
<html>
<head>
<style>
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p>
<b> Note: </b> Netscape 4 does not support the "font-variant" property.
</p>
<p class="normal"> This is a paragraph </p>
<p class="small"> This is a paragraph </p>
</body>
</html>
Ορισμός του Boldness Γραμματοσειράς
<html>
<head>
<style>
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>
<body>
<p class="normal"> This is a paragraph </p>
<p class="thick"> This is a paragraph </p>
<p class="thicker"> This is a paragraph </p>
</body>
</html>
Όλες οι Ιδιότητες Γραμματοσειράς σε μια Δήλωση
<html>
<head>
<style>
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p> This is a paragraph </p>
</body>
</html>
Trackbacks - Pingbacks