Каскадты стиль кестелерінің қалай жұмыс істейтінін толық түсіндіру үшін төменде оқыңыз. Қолданбаларымызды табу және пайдалану оңай болуы үшін беттің жоғарғы жағында көрсетеміз. Егер сіз осы мақаланы электрондық пошта немесе арна арқылы оқып жатсаңыз, мына сілтемені басыңыз CSS-ті қысыңыз.
Сайттарды нақты дамытпасаңыз, каскадты стиль кестелерін толық түсінбеуіңіз мүмкін (CSS). CSS - жазылған құжаттың сыртқы түрін және пішімделуін сипаттау үшін қолданылатын стильдер кестесінің тілі HTML or XML. CSS шрифт, түс, интервал және орналасу сияқты әртүрлі элементтердің стильдерін анықтау үшін пайдаланылуы мүмкін. CSS сіздің HTML құжатыңыздың көрсетілімін оның мазмұнынан бөлуге мүмкіндік береді, бұл веб-сайтыңыздың көрнекі стилін сақтауды және жаңартуды жеңілдетеді.
CSS тіл құрылымы
The селектор мәнерлендіргіңіз келетін HTML элементі және меншік және құн осы элементке қолданғыңыз келетін стильдерді анықтаңыз:
selector {
property: value;
}Мысалы, келесі CSS барлығын жасайды <h1> беттегі элементтердің қызыл түсі және 32px қаріп өлшемі бар:
CSS
h1 {
color: red;
font-size: 32px;
}шығыс
тақырып
Сондай-ақ элементтегі бірегей идентификатор үшін CSS-ті көрсетуге болады:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}шығыс
Немесе классты бірнеше элементтерге қолданыңыз:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}шығыс
Мен тілеймін бөлектеңіз span тегіндегі сөз.
HTML құжатыңызға CSS-ті үш жолмен қосуға болады:
- Inline CSS көмегімен
styleHTML элементіндегі төлсипат - Ішкі CSS, a
<style>ішіндегі элемент<head>HTML құжатыңыздың - HTML құжатымен байланыстырылған бөлек .css файлын пайдалану арқылы сыртқы CSS
<link>ішіндегі элемент<head>HTML құжатыңыздың
Жауапты CSS
CSS керемет икемді және экран ажыратымдылығына негізделген элементтердің дисплейін реттеу үшін пайдаланылуы мүмкін, сондықтан сізде бірдей HTML болуы мүмкін, бірақ оны құрастыра аласыз. сезімтал құрылғының ажыратымдылығына:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS қысу
Жоғарыдағы мысалда CSS көрінісін ұйымдастыру үшін бос орындар мен жол арналарын пайдаланатын түсініктеме, медиа сұрау және бірнеше мәнерлер бар екенін көре аласыз. Файл өлшемдерін және кейіннен стильді сұрауға және көрсетуге кететін уақытты азайту үшін сайтыңыздағы CSS-ті кішірейту немесе қысу тамаша тәжірибе. Бұл аз емес... жоғарыдағы мысалдардың кейбірінде 50%-дан астам үнемдеуді көруге болады.
Көптеген сервер конфигурациялары CSS-ті жылдам қысатын және қолмен жасаудың қажеті болмас үшін кішірейтілген файлды кэштейтін құралдарды ұсынады.
SCSS дегеніміз не?
Sassy CSS (SCSS) — CSS тіліне қосымша функционалдылық пен синтаксисті қосатын CSS препроцессоры. Ол стандартты CSS-те жоқ айнымалыларды, араластырғыштарды, функцияларды және басқа мүмкіндіктерді пайдалануға рұқсат беру арқылы CSS мүмкіндіктерін кеңейтеді.
SCSS артықшылықтары
- Жақсартылған техникалық қызмет көрсету: айнымалы мәндерді пайдалану арқылы мәндерді бір жерде сақтауға және оларды стильдер кестесінде қайта пайдалануға болады, осылайша мәнерлеріңізді сақтау және жаңарту оңайырақ болады.
- Жақсырақ ұйымдастыру: Микстердің көмегімен стильдер жиынын топтап, қайта пайдалануға болады, осылайша стильдер кестесін реттелген және оқуды жеңілдетуге болады.
- Қосымша функциялар: SCSS стандартты CSS жүйесінде жоқ функциялар, басқару құрылымдары (мысалы, if/else) және арифметикалық операциялар сияқты көптеген мүмкіндіктерді қамтиды. Бұл динамикалық және мәнерлі сәндеуге мүмкіндік береді.
- Жақсырақ өнімділік: SCSS файлдары CSS-ге жинақталған, ол браузер талдайтын код көлемін азайту арқылы өнімділікті жақсартады.
SCSS кемшіліктері
- Оқу қисығы: SCSS стандартты CSS-тен басқа синтаксиске ие және оны тиімді пайдалану үшін осы жаңа синтаксисті үйрену керек.
- Қосымша күрделілік: SCSS стильдер кестесін ұйымдастыруды және күтуді жеңілдететініне қарамастан, ол сонымен қатар код базасына қосымша күрделілік енгізе алады, әсіресе жаңа мүмкіндіктер мен синтаксиспен таныс болмасаңыз.
- Құралдар: SCSS пайдалану үшін сізге SCSS кодын CSS-ге аудару үшін компилятор қажет. Бұл қосымша орнату мен құралдарды қажет етеді, бұл кейбір әзірлеушілер үшін кіруге кедергі болуы мүмкін.
Төмендегі осы мысалда SCSS коды мәндерді сақтау үшін айнымалы мәндерді пайдаланады ($primary-color және $font-size) барлық стильдер кестесінде қайта пайдалануға болады. Осы SCSS кодынан жасалған CSS коды баламалы, бірақ ол айнымалыларды қамтымайды. Оның орнына айнымалылардың мәндері тікелей CSS-де пайдаланылады.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Осы мысалда көрсетілген SCSS тағы бір ерекшелігі кірістірілген стильдер болып табылады. SCSS кодында h1 стильдер ішінде кірістірілген body стильдер, бұл стандартты CSS-те мүмкін емес. SCSS коды құрастырылған кезде кірістірілген стильдер CSS кодындағы бөлек стильдерге кеңейтіледі.
Жалпы алғанда, SCSS стандартты CSS-ге қарағанда көптеген артықшылықтарды қамтамасыз етеді, бірақ келіссөздерді қарастыру және қажеттіліктеріңіз бен шектеулеріңізге негізделген жобаңызға дұрыс құралды таңдау маңызды.
-
-
-
-
