Әр элемент үшін бір CSS сыныбымен шектелмейсіз.
Каскадты стиль кестелері (CSS) сіз сол элементке қолданылатын атрибуттарға ілу арқылы элементтің көрінісін анықтауға мүмкіндік береді. Бұл атрибуттар идентификатор немесе класс болуы мүмкін, және барлық атрибуттар сияқты, оларға тіркелген элементтерге пайдалы ақпарат қосады. Элементке қандай атрибут қосылатынына қарай, сіз сол элементке және бүкіл веб-сайтқа көзқарас пен сезімге жету үшін қажетті визуалды мәнерлерді қолдану үшін CSS селекторын жаза аласыз.
Кез келген идентификаторлар немесе сыныптар CSS ережелерімен оларға қосылу үшін жұмыс істеген кезде, заманауи веб-дизайн әдістері идентификаторлар бойынша сыныптарды артықшылығын арттырады, себебі олар жалпыға ортақ жұмыс істеуді азырақ және оңайырақ етеді. Ия, идентификаторларды қолданатын көптеген сайттарды таба аласыз, бірақ бұл атрибуттар сабақтар қазіргі заманғы веб-парақтарды қабылдаған кезде өткенге қарағанда әлдеқайда аз қолданылады.
CSS-де бір немесе бірнеше сыныптар бар ма?
Көп жағдайда элементтерге бір сынып төлсипатын тағайындайсыз, бірақ шын мәнісінде бір сыныппен шектеліп қана қоймайсыз. Элемент тек бір ID атрибутына ие болғанымен, элементті бірнеше сыныптармен толықтай бере аласыз және кейбір жағдайларда бұл сіздің бетіңіздің стилі оңайырақ болады және әлдеқайда икемді болады!
Егер элементке бірнеше сыныпты тағайындау қажет болса, сіз қосымша сыныптарды қоса аласыз және оларды атрибутыңыздағы бос орынмен бөлуге болады.
Мысалы, осы параграфта үш сынып бар:
pullquote left left »> Бұл параграфтың мәтіні
Бұл тармақ тегінде келесі үш сыныпты орнатады:
- Пулкуот
- Таңдамалы
- Сол
Осы класс құндылықтарының әрқайсысы арасындағы бос орындарға назар аударыңыз. Бұл кеңістік оларды әр түрлі, жеке сыныптар ретінде белгілейді. Сонымен қатар, сынып атауларында оларда бос орын болмайды, себебі мұны оларды бөлек сыныптар ретінде орнатуға болады.
Мысалы, егер сіз «pullquote-featured-left» бос орынсыз пайдалансаңыз, бұл бір сыныпты құндылық еді, бірақ осы үш сөздің бос орынмен бөлетін жоғарыдағы мысал оларды жеке мәндер ретінде орнатады. Бұл тұжырымдаманы түсіну маңызды, сіз өзіңіздің веб-парақтарыңызда қандай класс құндылықтарын пайдалану керектігін шешесіз.
HTML-де класс құндылықтары бар болғаннан кейін, оларды CSS-де сабақ ретінде тағайындай аласыз және қосқыңыз келетін стильдерді қолдана аласыз. Мысалға.
.pullquote {...}
.featured {...}
p.left {...}
Бұл мысалдарда CSS декларациялары мен мәндер жұптары бұйра жақтауларда болады, бұл мәнерлер тиісті селекторға қолданылады.
Ескерту - сыныпты белгілі бір элементке орнатсаңыз (мысалы, p.left), оны оны әлі де сыныптар тізімінің бөлігі ретінде пайдалана аласыз; алайда, ол CSS-да көрсетілген элементтерге ғана әсер ететінін ескеріңіз. Басқаша айтқанда, p.left стилі тек осы кластағы параграфтарға қолданылады, себебі селектор оны «сол жақта» сынып мәнімен параграфтарға қолдануға шақырады. Керісінше, мысалдағы басқа екі селектор белгілі бір элементті көрсетпейді, сондықтан олар сол класс мәндерін қолданатын кез келген элементке қолданылады.
Бірнеше сыныптың артықшылықтары
Көптеген сыныптар сол элементке мүлдем жаңа мәнер жасамай, элементтерге арнайы әсерлерді қосуды жеңілдетеді.
Мысалы, элементтерді солға немесе оңға жылдам айналдыру мүмкіндігі болуы мүмкін. Сол жақта және сол жақта екі класс жазуға болады: float: left; және float: оң; оларда. Одан кейін, сізде элемент болған кезде, сіз солға қарай жылжуыңыз керек, тек өзіңіздің класс тізіміне «сол» класс қосуыңыз керек.
Алайда осы жерде серуендеуге болатын тамаша сызық бар. Веб стандарттары стиль мен құрылымды бөлуді талап етеді. Құрылым HTML арқылы өңделеді, ал стиль CSS-де.
Егер сіздің HTML құжатыңызда «қызыл» немесе «сол» сияқты сынып атаулары бар элементтер толтырылса, олар элементтердің қалай көрінетінін көрсететін атаулар болып табылады, сіз құрылымды және стиль арасындағы бұл сызықты қиып өтесіз. Мен осы себептен мүмкін емес семантикалық емес сынып атауларын шектеуге тырысамын.
Бірнеше сынып, семантика және JavaScript
Бірнеше сыныпты қолданудың тағы бір артықшылығы - бұл сізге көп интерактивтік мүмкіндіктер береді.
Жаңа кластарды кез-келген бастауыш сыныптардан шығармай-ақ, JavaScript-ды қолданатын элементтерге қолдануға болады. Сондай-ақ , элементтердің семантикасын анықтау үшін сабақтарды пайдалануға болады. Бұл дегеніміз, бұл элемент семантикалық мәнді анықтау үшін қосымша сыныптарға қосуға болады. Микроформаттар жұмыс істейді.
Көптеген сыныптардың кемшіліктері
Сіздің элементтеріңізде бірнеше сыныпты қолданудың ең үлкен кемшілігі, оларды уақытты қарауға және басқаруға біршама беймәлім етеді. Элементке қандай стильдер әсер ететінін және қандай да бір сценарийлер оған әсер ететінін анықтау қиын болуы мүмкін. Бүгінде Bootstrap сияқты қолжетімді шеңберлердің көпшілігі көптеген сыныптарда элементтерді ауыр пайдалануды жүзеге асырады. Егер сіз абай болмасаңыз, бұл код өте тез жұмыс істей алады.
Бірнеше сыныпты пайдаланған кезде, сіз де осы мақсатқа жете алмасаңыз да, бір класстың стилін басқа біреудің стилін елемеу тәуекелін іске қосасыз. Сонда сіздің стильдеріңіз неге керек болса да қолданылмайтынын анықтау қиынға түседі.
Өзіңіздің ерекшелігіңіз туралы білуіңіз керек, тіпті бір элементке қолданылған атрибуттармен де!
Chrome веб-шеберінің құралдары сияқты құралды пайдалану арқылы сыныптарыңыздың мәнерлеріңізге қалай әсер ететінін және қайшылықты стильдер мен атрибуттардан аулақ болуды оңайырақ көре аласыз.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard, 8/7/17 жылы өңдеген