מחלקה CSS class
הגדרות CSS מתקדמות
הגדרת מחלקה CSS class
מחלקה נועדה לאפשר הגדרה ספציפית עבור חלק מתגיות מסוג מסוים. לדוגמה אנו נרצה בעת בניית אתר אינטרנט שחלק מהפסקאות באתר האינטרנט יהיו בגודל פונט 50, חלק מהפסקאות באתר יהיו בגודל פונט 70 וחלק יהיו פסקאות רגילות בגודל 25.
כמובן שאנו רוצים לעשות את זה בהגדרה אחת בקובץ CSS. אנו לא רוצים להגדיר שוב ושוב.
לצורך כך נגדיר שלוש מחלקות הקשורות לתגית <p> :
p - תגית רגילה בגודל פונט 25. אנו נשתמש בהגדרות בסיסיות של CSS
p.bigpre - מחלקה בשם bigpre בגודל פונט 50.
p.ugered - מחלקה בשם ugered בגודל פונט 70 בצבע אדום.
קובץ css class8.css
p{color:green;font-size:25px}
p.bigpre {font-size:50px}
p.ugered {font-size:70px;color:red}
.spek {font-family:arial;color:blue}
הפעלת מחלקה מתוך קובץ HTML
אנו נפעיל רגיל את תגית <p>אך עם קריאה למחלקה הנכונה
דוגמה לפקודה בתוך קובץ HTML
<p class="bigpre">אני בצבע ירוק בגודל 50</p>
<p class="ugered"> אני בצבע אדום בגודל 70 </p>
קובץ HTML לדוגמה
קובץ html
<html>
<head>
<meta charset="utf-8">
<link href="/class8.css" rel=stylesheet type="text/css">
</head>
<body class="spek">
<p> אני בצבע ירוק </p>
<p> אני גם בצבע ירוק </p>
<p style="font-size:12px"> מי רואה אותי</p>
<p class="bigpre">אני בצבע ירוק בגודל 50</p>
<p class="ugered"> אני בצבע אדום בגודל 70 </p>
<h2 class="spek">אני מיוחד בצבע כחול</h2>
<p class="spek">גם אני פסקה מיוחדת </p>
<p style="color:yellow"> אני בצבע צהוב </p>
</body>
</html>