ЧЕК-ЛИСТ

CSS дегеніміз не?

CSS қасиеттері

CSS теория

hikmatkz

INFO TEAM

CSS дегеніміз не?

CSS (Cascading Style Sheet) - HTML, XHTML,
т.б. белгілеу тілдерінде жазылған webбеттердің сыртқы көрінісін безендіретін,
әрлейтін тіл.

Cелектор дегеніміз не?

Cелектор - стильдерде қасиеті-мәні
жұбында көрсетілу ережелерінің
жиынтығы. Элементтің стильдерін (түс,
өлшем, орын) селектор анықтайды.

INFO TEAM

CSS синтаксисі

Cелектор

Қасиеті

Мәні

Қасиеті

Мәні

CSS қасиеттері
Элемент таңдалғаннан кейін қасиеттер оған қолданылатын
стильдерді анықтайды. Қасиет аттары селектордан кейін,
фигуралық жақша ішінде және қос нүкте алдында жүреді.
Мысалы, барлық p элементіне қолданылатын color және font-size
қасиеттерін анықтайық:

INFO TEAM

CSS мәні

Қасиеттін әрекетін мән арқылы орнатуға
болады. Мәндер қос нүктеден және нүктелі
үтір арасында анықталады.
Мысалы

элементіне қызыл түс және
10px өлшемін береміз. Түстің мәнін color
қасиетіне, қаріптің өлшемін font-size
қасиетіне береміз:

INFO TEAM

Селектор түрлері

1. Элемент бойынша селектор
2. Сынып (Класс) бойынша селектор
3. Идентификатор бойынша селектор
4. Контекстік селектор

INFO TEAM

Стиль кестелерін қолдану түрлері:

Браузер стилі - стандартты стиль парағы.
Қолданушы стилі - кез келген қолданушы браузер параметрін өзгерту
арқылы өзінің стиль кестесін жаза алады және
қолдана алады.
Ендірілген стиль - style атрибутын қолдану арқылы анықталады.
Кіріктірілген стиль - HTML құжатының ішінде орналасады.
Байланысқан стиль - құжатпен link элементінің көмегімен байланысады.
Импортталған стиль - стильдерді импорттайды.

INFO TEAM

CSS фон, шегара қасиеттері
background-color - элементті түспен толтырады. Color мәні элемент түсін
орнатады, transparent мәні түссіз фонды орнатады.
background-image - суретті фон ретінде пайдалануға мүмкіндік береді.
border - шегара, параметрлерді біріктіру
border-top - жоғарғы шегара
border-right - оң жақ шегара
border-bottom - төменгі шегара
border-left - сол жақ шегара
border-style - шегаралары үшін стиль орнатуға мүмкіндік береді:
Solid - шегаралар тұтас сызықпен салынады;
Dashed - шегаралар нүктелі сызықпен салынады;
Dotted - шегаралар нүктелер арқылы салынады;
Doublex - шегаралар қос тұтас сызықпен салынады.
border-color - шегара түсін орнатады.
border-width - шегара қалыңдығын орнатады.

INFO TEAM

CSS қаріп, абзац қасиеттері
font-size - мәтіннің қаріптік тобын көрсетеді. (Times New Roman...)
font-weight - қаріп қалыңдығын анықтайды:
lighter - қарапайым, bold - жартылай қалың, bolder - қалың
font-size - қаріп өлшемін анықтайды.
font-style - қаріптің курсивті жазылуын анықтайды (italic - курсив).
text-decoration - астын немесе үстін сызу сияқты қаріпті рәсімдеу.
overline - үстін сызу, underline - астын сызу, line-through - сызып тастау
text-align - абзацты туралайды (left, right, justify, center)
text-indent - бірінші жол үшін шегіністі белгілейді
text-transform - мәтінді түрлендірудің әртүрлі режимдерін анықтайды.
capitalize - әр сөздің бірінші әрпі бас әріп, uppercase - жоғары регистр,
lowercase - кіші регистр
position - элементтің орналасу жолын анықтайды
static - орналасу қолданылмайды
relative - беттегі қалыпты орнына қояды
absolute - абсолютті мәндерде орындалады
fixed - тұрақты позициясын анықтайды
INFO TEAM