Визуелниот стил и распоред на веб страната се диктирани од CSS или Cascading Style Sheets. Ова се документи кои ја обликуваат HTML-ознаката на веб-страницата, обезбедувајќи на веб-прелистувачите инструкции како да се прикажат страниците што произлегуваат од таа ознака. CSS се справува со изгледот на страницата, како и бојата, сликите во позадина, типографијата и многу повеќе.
Ако погледнете во CSS-датотека, ќе видите дека како и секој јазик за кодирање или кодирање, овие датотеки имаат специфична синтакса за нив. Секој стилски лист е составен од голем број CSS правила. Овие правила, кога се преземени во целост, се она што стилови на сајтот.
Делови од Правило за CSS
Правилото CSS се состои од два различни дела - селекторот и декларацијата. Селекторот одредува што е напишано на страницата и декларацијата е како таа треба да биде стилизирана. На пример:
p {
боја: # 000;
}
Ова е правило за CSS. Делот за селекторот е "p", кој е селектор на елементите за "ставовите". Затоа, би избрале СИТЕ ставови на страницата и ќе им дадете со овој стил (освен ако не постојат статии кои се насочени од повеќе специфични стилови на друго место во вашиот CSS документ).
Делот од правилото што вели "боја: # 000;" е она што е познато како декларација. Таа декларација се состои од две парчиња - имотот и вредноста.
Имотот е парче "боја" на оваа декларација. Тоа диктира кој аспект на селекторот ќе се промени визуелно.
Вредноста е она што избраниот имот на CSS ќе се промени. Во нашиот пример, ја користиме вредноста на хексадекот на # 000, што е кратенка за CSS за "црна".
Значи користејќи го ова правило за CSS, нашата страница ќе има ставови прикажани во фонт-боја на црно.
CSS сопственост основите
Кога пишувате својства на CSS, не можете едноставно да ги направите како што ви одговара. За случаи, "бојата" е вистински CSS сопственост, па можете да ја користите. Овој својство е она што ја одредува бојата на текстот на елементот. Ако се обидовте да користите "текст-боја" или "фонт-боја" како својства на CSS, тие ќе пропаднат, бидејќи тие не се вистински делови на јазикот на CSS.
Друг пример е имотот "background-image". Овој својство поставува слика која може да се користи за позадина, како на пример:
.logo {
background-image: url (/ images / comany -logo.png);
}
Ако сте се обиделе да ја искористите "позадината" или "позадината-графиката" како својство, тие ќе пропаднат бидејќи, уште еднаш, тие не се вистински CSS особини.
Некои CSS Properties
Постојат голем број на својства на CSS кои можете да ги користите за да стилизирате страница. Некои примери се:
- Граница (вклучувајќи граница-стил, граница-боја и ширина на границата)
- Облека (вклучувајќи го и горниот дел од подлога, десен-рамка, десна рампа и лева за дополнување)
- Маргини (вклучувајќи маргина-врвот, маргина-десен, маргина-дно, и маргина-лево)
- Фонт-семејство
- Големина на фонтот
- Боја на позадина
- Ширина
- Висина
Овие CSS особини се одлични за употреба како примери, бидејќи тие се многу јасни и, дури и ако не знаете CSS, веројатно може да се погоди што прават според нивните имиња.
Постојат и други CSS особини со кои ќе се сретнете, кои можеби не се толку очигледни како функционираат врз основа на нивните имиња:
- Плови
- Јасно
- Прелевање
- Текст-трансформирај
- Z-индекс
Како што ќе се подлабоко во веб дизајн, ќе се судрите (и ги користите) сите овие својства и многу повеќе!
Својства треба вредности
Секој пат кога користите имот, мора да му дадете вредност - и одредени својства можат да прифатат само одредени вредности.
Во нашиот прв пример за "боја" сопственост, ние треба да користиме вредност на бојата. Ова може да биде хексадечна вредност , RGBA вредност, или дури и клучни зборови во боја . Секоја од овие вредности ќе работи, сепак, ако го употребивте зборот "мрачен" со овој имот, тоа нема да стори ништо бидејќи, како описен како тој збор, не е призната вредност во CSS.
Нашиот втор пример за "позадина-слика" бара да се користи патеката на сликата за да се добие вистинска слика од датотеките на вашиот сајт. Ова е вредноста / синтакса што е потребна.
Сите својства на CSS имаат вредности што ги очекуваат. На пример:
- Граничната боја очекува вредност на боја
- Големината на границата очекува големината, како што се пиксели или проценти
- Граничните стилови очекуваат еден од резервираните стилови што се користат за овој имот, како "цврсти"
Ако одите низ листата на својства на CSS, ќе откриете дека секој од нив има специфични вредности што ќе ги користат за да ги креираат стиловите за кои се наменети.
Уредено од Џереми Жирар