Визуалният стил и оформлението на уебсайта са диктувани от 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 {
фоново изображение: url (/images/company-logo.png);
}
Ако сте се опитали да използвате "фон-картина" или "фон-графика" като собственост, те ще се провалят, защото отново не са действителни свойства на CSS.
Някои CSS свойства
Има няколко CSS свойства, които можете да използвате, за да оформите сайт. Някои примери са:
- Граница (вкл. Граничен стил, граница на цвета и ширина на границата)
- Подплата (включително подложка, подложка-десен, подложка-дъно и подложка-ляво)
- Маржини (включително ръбовете отгоре, марж-надясно, марж на дъното и марж-ляво)
- Шрифтово семейство
- Размер на шрифта
- Цвят на фона
- широчина
- височина
Тези CSS свойства са чудесни такива, които могат да се използват като примери, защото те са много ясни и дори да не знаете CSS, вероятно можете да познаете какво правят въз основа на техните имена.
Има и други CSS свойства, които ще срещнете, които може да не са толкова очевидни как работят въз основа на техните имена:
- поплавък
- ясно
- препълване
- Текст-трансформация
- Z-индекс
Докато се впускате в уеб дизайна, ще срещнете (и използвате) всички тези свойства и още!
Необходимите стойности на имоти
Всеки път, когато използвате собственост, трябва да й дадете стойност - и определени свойства могат да приемат само определени стойности.
В нашия първи пример на свойството "цвят" трябва да използваме цветова стойност. Това може да бъде хекса стойност , RGBA стойност или дори цветни ключови думи . Всяка от тези стойности ще работи, обаче, ако сте използвали думата "мрачен" с тази собственост, тя няма да направи нищо, защото, както е описателна като тази дума, тя не е призната стойност в CSS.
Вторият ни пример за "фоново изображение" изисква да бъде използван маршрут на изображението за извличане на действително изображение от файловете на сайта ви. Това е необходимата стойност / синтаксис.
Всички свойства на CSS имат стойности, които очакват. Например:
- Оцветяването на границата очаква цветна стойност
- Ограничителният размер очаква стойност за оразмеряване, като пиксели или проценти
- Граничните стилове очакват един от запазените стилове, използвани за тази собственост, като "твърди"
Ако прегледате списъка със свойства на CSS, ще откриете, че всеки от тях има конкретни стойности, които ще използва, за да създаде стиловете, за които са предназначени.
Редактиран от Джеръми Жирар