פרק 2: התחביר של CSS

בפרק זה נלמד על:

• סלקטורים
• מאפיינים וערכים
• סוגי סלקטורים: אוניברסלי, סוג, כיתה, מזהה

סלקטורים

סלקטורים ב-CSS הם חלק מהתחביר המגדיר אילו אלמנטים ב-HTML יהיו מותאמים אישית על פי כללי CSS. לדוגמה:

          
            /* סלקטור של תג מסוג h1 */
            h1 {
              color: blue;
            }
            
            /* סלקטור של אלמנטים עם כיתה 'highlight' */
            .highlight {
              background-color: yellow;
            }
            
            /* סלקטור של אלמנט עם מזהה 'header' */
            #header {
              font-size: 20px;
            }
          
        

מאפיינים וערכים

מאפיינים הם פרמטרים שניתן להגדיר עבור אלמנטים שונים כמו צבע, גודל וגבולות. הערכים הם התכנים שאנו מגדירים עבור מאפיינים אלה.

          
            /* צבע הטקסט יהיה אדום */
            p {
              color: red;
            }
            
            /* רוחב גבול של 1 פיקסל בצבע שחור */
            .bordered {
              border: 1px solid black;
            }
          
        

סוגי סלקטורים

ישנם מספר סוגי סלקטורים, כל אחד מהם נותן אפשרות לעצב אלמנטים לפי קריטריונים שונים:

• סלקטור אוניברסלי: * - בוחר את כל האלמנטים בעמוד.
• סלקטור סוג: h1 - בוחר את כל התגים מסוג h1.
• סלקטור כיתה: .class-name - בוחר את כל האלמנטים עם הכיתה class-name.
• סלקטור מזהה: #id-name - בוחר את האלמנט עם המזהה id-name.