CSS-ті бастау
CSS құжатта қандай элемент қолданылатындығын анықтау үшін үлгіні сәйкестендіру ережелеріне сүйенеді. Бұл үлгілер селекторлар деп аталады және олар тег атауларынан (мысалы, параграф тегтеріне сәйкестендіру үшін) құжаттың ерекше бөліктеріне сәйкес келетін өте күрделі үлгілерге (мысалы, p # myid> b.highlight кез келген б тегіне (Iid) элементімен параграфтың баласы болып табылатын бөлектеу класы).
CSS таңдаушысы - веб-беттің қандай бөлігін стильдендіру керектігін анықтайтын CSS стилінің қоңырау бөлігі. Таңдауышта таңдалған HTML қалай жасалатынын анықтайтын бір немесе бірнеше қасиеттер бар.
CSS селекторлары
Селекторлардың бірнеше түрі бар:
- белгілі бір элементке сәйкес келетін селекторларды теріңіз
- класс таңдаушылары - нақты сыныппен сәйкес элементтер
- ID селекторлары - элементті нақты идентификатормен сәйкестендіреді
- ұрпақ селекторлары - белгілі бір элементтің ұрпақтары болып табылатын элементтерді жинау
- бала селекторлары - нақты элементтің еншілес элементі
- әмбебап селекторлар - кез-келген элементке сәйкес келеді
- іргелес аға ұрпақ селекторлары - белгілі бір элемент алдында тікелей сәйкестендіретін элементтер
- атрибуттарды сәйкестендіретін элементтерді атрибут немесе төлсипат мәнімен салыстырыңыз
- жалған сынып селекторлары - жалған псевдалық сыныпқа сәйкес келетін элементтер
- жалған элементтің селекторлары - нақты псевдомерлі қасиеттері бар сәйкес элементтер
CSS стилі мен CSS селекторларын пішімдеу
CSS стилінің форматы келесідей:
селектор {стиль сипаты: стиль; }
Бірдей мәнерді үтірлермен бөлетін бірнеше селекторларды бөліңіз. Бұл селекторлық топтама деп аталады. Мысалға:
selector1 , selector2 {style сипаты: style; }
Селекторларды топтау - CSS стилдер жинағын сақтаудың стенографиялық механизмі.
Жоғарыда айтылған топтау келесідей әсерге ие болады:
selector1 {style сипаты: style; }
selector2 {style сипаты: style; }
Әрқашан CSS селекторларын тексеріңіз
Барлық браузерлер барлық CSS селекторларын қолдамайды. Мәселен, селекторларыңызды көптеген операциялық жүйелердегі барынша браузерлерде сынап көріңіз. Бірақ CSS 1 немесе CSS2 селекторларын қолдансаңыз, сіз жақсы боласыз.