Веб-сайттың визуалды стилі мен орналасуы CSS немесе Cascading Style Sheets арқылы белгіленеді. Бұл веб-беттің HTML түзетулерін қалыптастыратын және веб-браузерлерді осы түзетулерден туындайтын беттерді қалай көрсету туралы нұсқаулармен қамтамасыз ететін құжаттар. CSS беттің орналасуын, сондай-ақ түс, өңдік кескіндерді, типографияны және тағы басқаларды өңдейді.
Егер сіз CSS файлына қарасаңыз, кез-келген түзету немесе кодтау тілі сияқты бұл файлдарға нақты синтаксис бар екенін көресіз. Әр стиль парағы CSS ережелерінің бірқатардан тұрады. Бұл ереже толығымен қабылданған кезде, сайтта қандай стильдер бар.
CSS ережесінің бөліктері
CSS ережесі екі бөліктен тұрады - селектор және декларация. Селектор беттегі стильдің нені білдіретінін анықтайды және декларация - бұл қалай стильде болу керек. Мысалға:
p {
түсі: # 000;
}
Бұл CSS ережесі. Селектордың бөлігі - «тармақтар» үшін элементтің селекторы болып табылатын «p». Осыған байланысты сайттың барлық параграфтарын таңдап, оларды осы стильмен қамтамасыз етуге болады (егер сіздің CSS құжатыңызда басқаша стилдермен ерекшеленетін параграфтар болмаса).
Ереженің «түс: # 000» деп жазылған бөлігі; бұл декларация ретінде белгілі. Бұл мәлімдеме екі бөліктен тұрады - мүлік және құндылық.
Сипат - осы декларацияның «түсі». Бұл селектордың қай аспектісін көрнекі түрде өзгертетінін көрсетеді.
Таңдалған CSS сипаты өзгеретін мән болып табылады. Біздің мысалда # 000-нің hex мәнін қолданамыз, бұл «қара» CSS-нің стенограммасы.
Осылайша, осы CSS ережесін пайдалану арқылы біздің парақта қаріптің түсінде көрінетін парақтары болады.
CSS сипаттары негіздері
CSS қасиеттерін жазғанда, сіз оларды дұрыс көрген кезде ғана жасай аласыз. Мысалдар үшін «color» - бұл нақты CSS сипаты, сондықтан оны пайдалануға болады. Бұл сипат элементтің мәтін түсінін анықтайды. CSS сипаттары ретінде «мәтін түсі» немесе «қаріп-түс» функциясын қолдануға тырыссаңыз, бұлар сәтсіздікке ұшырайды, себебі олар CSS тілінің нақты бөліктері емес.
Тағы бір мысал - «background-image» сипаты. Бұл сипат фондық режимде пайдаланылуы мүмкін суретті орнатады:
.logo {
background-image: url (/images/company-logo.png);
}
Егер «background-picture» немесе «background-graphic» сипатын қолдануға тырыссаңыз, олар қайтадан сәтсіздікке ұшырады, өйткені бұл тағы да олардың нақты CSS сипаттары емес.
Кейбір CSS сипаттары
Сайтты мәнерлеу үшін пайдалануға болатын CSS сипаттары бар. Кейбір мысалдар:
- Шекара (шекаралық стильді, шекара түсі мен шекара енін қоса)
- Толтырма (толтырғыш-үстіңгі, толтырғыш-оң, толтырғыш-төменгі және толтырғыш-сол жақта)
- Маржалар (margin-top, margin-right, margin-bottom және margin-left)
- Қаріп-отбасы
- Қаріп өлшемі
- Фонды-түс
- Ені
- Биіктігі
Бұл CSS сипаттары мысалдар ретінде пайдаланылатын керемет болып табылады, себебі олар өте қарапайым және тіпті сіз CSS-ны білмесеңіз де, олардың аттарына негізделген нәрселерді болжай аласыз.
Сізге кездесетін басқа CSS сипаттары да бар, олар өздерінің аттарына негізделген қалай жұмыс істейтіні анық болмауы мүмкін:
- Флоат
- Таза
- Көтеру
- Мәтін трансформациясы
- Z-индексі
Веб-дизайнға тереңірек енген сайын, осы қасиеттердің барлығын және басқаларын кездестіресіз (және қолданасыз)!
Міндеттері қасиеттері қажет
Мүлікті әр пайдаланған кезде, оған мән беру керек, ал белгілі бір қасиеттер тек белгілі бір мәндерді қабылдай алады.
«Түсті» сипатымыздың бірінші мысалында түс мәнін пайдалану керек. Бұл Hex мәні , RGBA мәні немесе тіпті түсті кілт сөздері болуы мүмкін . Алайда, осы мәндердің кез-келгені жұмыс істейтін болса, егер сіз осы сипатпен «мылтық» сөзін қолдансаңыз, онда ол ештеңе жасамайды, себебі бұл сөз мүмкін болса, бұл CSS-де танылған құндылық емес.
«Background-image» -нің екінші мысалы біздің сайттың файлдарынан нақты кескінді алу үшін сурет жолын пайдалануды талап етеді. Бұл талап етілетін мән / синтаксис.
CSS-дің барлық қасиеттері олар күтетін мәндері бар. Мысалға:
- Шек-түс түс мәнін күтеді
- Шекара өлшемі пиксел немесе пайыз сияқты пішімдеу мәнін күтеді
- Шек стильдері осы сипатта пайдаланылған сақталған мәнерлердің біреуін «қатты»
CSS сипаттарының тізімінен өтсеңіз, олардың әрқайсысында өздері үшін жасалған мәнерлерді жасау үшін пайдаланатын нақты мәндері бар екенін білесіз.
Jeremy Girard өңдейді