Независимо дали го знаете или не, вие се възползвате от CSS почти всеки път, когато отворите уеб браузър. Това е шаблонната система, използвана от почти всеки съвременен уебсайт, за да даде страници на тяхното оформление и външен вид. Някои от вас може да мислят, че "преди това съм направил уебсайтове и е било лесно, никога не съм имал нужда от CSS. "И това е вярно. Не е нужно CSS да създава хубав изглеждащ и функционален сайт, но шансовете са добри, че сайтът Ви може да е по-малък, по-чист, по-последователен и по-добре изглеждащ, ако сте избрали CSS от самото начало. Днес ще ви покажем основите на това, което CSS може да направи. Това ръководство няма да ви донесе от начинаещия до наградения уеб дизайн дизайнер, но ще ви помогне да разберете как CSS работи и как може да ви съчетае много време и усилия.

Бърз Преглед

CSS (Cascading Style Sheet) има за цел да направи едно нещо: да управлява представянето на вашия сайт. Това може да звучи просто, но имайте предвид, докато продължаваме. Важно нещо, което трябва да отнеме от този факт, е, че представянето не е работа на HTML. HTML дефинира структурата на вашата страница (какво е заглавие, какво е фоайе и т.н.). CSS поема тази структура и извършва цялата работа по представянето на тази структура.

Грешен път

За да ви дадем представа за това, какво трябва да поправи CSS, разгледайте този HTML код:

 Моята начална страница 
Най-големият уеб сайт в момента се разработва.


Чужденците са нахлули също.


Което се показва в браузъра ви като нещо подобно:

Тук има редица потенциални проблеми. За начало, това е поставяне на информация за шрифта и цвета всеки път, когато се изчертава нов заглавие или абзац. Всеки нов елемент на сайта ще се нуждае от идентични дефиниции на шрифтове и цветове, въпреки че те са еднакви за всеки заглавие и абзац. Това се равнява на натоварени загуби на честотна лента, ако имате много записи.

Следва проблемът с мащабируемостта. Ако имате 100 записа в тази страница с новини и вие решите, че заглавията трябва да са червени, има много работа пред вас, за да промените всеки заглавен маркер, за да покажете новия цвят.

Трето, и това е въпрос на "правилна процедура", тази страница съдържа няколко елемента, които са "представящи", а не "структурни". Шрифтовете, цветовете и маркерите на линейния маркер се отнасят до това как е представена страницата и нямат нищо общо със структурата на страницата. HTML е слабо подходящ за представяне, тази работа е най-добре да бъде оставена на CSS, както ще покажем по-долу.

Проектиране с CSS

Е, как можем да премахнем всички тези допълнителни етикети? Как можем да намалим размера на страницата, като запазим цветовете и оформлението? Е, изображение, което бихте могли да определите на едно място какво трябва да изглеждат всички заглавия (да речем, голям зелен текст). След това не е необходимо да дефинирате цвета за всяко уникално заглавие. Същото важи и за параграфите. Ако искате целият текст на параграфа да бъде синьо, просто го зададете като правило за CSS за маркера "p". Всички следващи абзаци ще имат син текст, без да е необходимо да го посочвате всеки път.

CSS се преподава най-добре чрез пример. Нека започнем, като определим точно правилата, описани по-горе - всички заглавия трябва да са зелени и всички параграфи трябва да са сини. С помощта на текстовия редактор по ваш избор, стартирайте нов файл с име style.css и добавете следния текст:

 h1 {цвят: зелен;} p {цвят: син;}

Това определя всички h1 тагове като зелен текст и всички p тагове като със син текст.

Всичко, което трябва да направите сега, е да го свържете с HTML с маркера на връзката и след това да премахнете всички ненужни маркери на шрифтове от HTML. Когато свършите, трябва да изглежда по следния начин:

 Моята начална страница 
Най-големият уеб сайт в момента се разработва.
Чужденците са нахлули също.

Малко по-чист ли е, а? Вече сме намалили общия размер на нашия сайт и това беше само с 2 записа в нашия "блог".

CSS за оформление

Разбира се, тя може да направи вашите шрифтове последователни, но това само по себе си със сигурност не е достатъчно, за да направи CSS пълния инструмент за представяне на уебсайтове. За да направите това, трябва да бъде в състояние да повлияе на оформлението на вашия сайт, като ви дава контрол не само как изглежда нещата, но и къде отиват. Пълната мощ на CSS над оформлението на сайта е далеч извън обхвата на това ръководство, така че ще въведем концепцията чрез един общ сценарий - навигационна лента.

Създаването на нещо подобно е учудващо проста в CSS. Върнете се към файла style.css и добавете следната секция:

 #sidebar {width: 100px; височина: 200px; граница в стил: твърда; плаваш: ляв; марж-надясно: 15px; }

Обърнете внимание на # в началото на страничната лента на името. Накратко - това казва на CSS, че работим с ново уникално име, което сме съставили, за разлика от вграден маркер като h1 или p . Дългото обяснение включва разликата между идентификатор и клас и е обяснено подробно тук.

Трябва да можете да видите няколко важни бита тук. Първо създадохме нов идентификационен номер, наречен sidebar, който му даде определена височина и широчина, твърда граница и уточни, че той трябва да има 15px марж от дясната страна. Казахме му да се движи от лявата страна на екрана, като други елементи на страницата (като вашия текст) се носят около него. Можете да активирате този елемент, като добавите маркера на страничната лента към тялото на вашия HTML, нещо подобно.

  • Точка 1
  • Точка 2
  • Точка 3

И сега, когато отворите страницата си, има новата ви странична лента!

заключение

Очевидно сме започнали само да надраскаме повърхността на възможностите на CSS, но се надяваме, че трябва да е ясно, че тези основни принципи могат да бъдат приложени към много повече от това, което сме направили тук. Текстовите манипулации могат да се използват за форматиране на текст по безброй начини и чрез промяна на концепцията на страничната лента можете да създавате безкрайни вариации на оформлението на сайта. За по-нататъшно проучване този автор силно препоръчва секцията CSS на W3Schools.com.

Кредит на изображението: geirarne