Синтаксис на CSS
В първата глава научихте, че дизайнът на уебсайт се създава с помощта на CSS. За по-добро разбиране какво и какво да използваме, нека разгледаме един добър пример. Представете си, че HTML е черно-бялата структурирана телена рамка на къща без декорации, а CSS е това, което използваме, за да създадем уникален външен вид.
Както можете да видите, къщата вдясно вече има цветове, материали и допълнителни декорации. Същото се случва и на уеб страница: с помощта на CSS правила върху нея се появяват цветове, отстъпи, стилът на шрифта и размерите на елементите се променят, създава се цялостен, завършен стил.
Прост стилов лист
Нека да разгледаме как изглежда най-елементарният стилов лист и от какви елементи се състои. Това е примерен CSS стил за всички тагове
които са на уеб страницата:
Как ще изглежда текстът сега?
в браузъра и какво означава всеки ред? Много е просто: шрифтът ще бъде получер и цвят #1E824C (шестнадесетичен цветен код) и ще се показва с размер 1em (относителна единица, равна на размера на шрифта по подразбиране на браузъра).
Синтаксис на CSS
Горният стил, както всеки друг, включва набор от елементи, които имат свои имена. Запомнете ги, така че когато прочетете следващите глави, да разберете какво е заложено.
Например теглото на шрифта се определя от ключовите думи bold, bolder и т.н., цветът се определя от шестнадесетична стойност, RGB(A), HSL(A) или ключовите думи red, orange, white и т.н., размерът на шрифта се определя от CSS единици (% %, пиксели px, pt, височина на шрифта em) иликонстанти малки, средни, големи и т.н. След стойността на свойството се поставя точка и запетая.
Това също работи, но лесно ли е за разбиране? Особено когато CSS кодът е доста дълъг. Разбира се, няма да е зле да го отделите поне с интервали. Има няколко правила за добри маниери и ако ги научите веднага, ще кажете „благодаря“ на себе си в бъдеще.
Много често, когато се описва стил, се използва компактна нотация, в която всички свойства за един селектор са посочени в един блок:
И тази форма на писане е много тромава, въпреки че работи:
За да улесните навигацията в кода, се препоръчва всяко свойство да се записва на нов ред и да се използват раздели или интервали, когато се изброяват свойствата. Понякога има интервал между двоеточието и стойността на свойството, но тук можете да решите кое е по-удобно за вас.
Вътрешни и външни стилови листове
След като създадете своя лист със стилове, можете да изберете как да го прикачите към вашата уеб страница. Има два варианта за таблици – вътрешни, които се добавят директно към страницата и външни, които са в отделен файл с разширение .css и се свързват към страницата чрез линк.
Вътрешните стилови таблици са написани в HTML документ между таговете. Трябва да добавите стилов лист към всяка уеб страница. Ако сайтът има голям брой страници, които се нуждаят от еднакъв дизайн, тогава добавянето и редактирането на стилове се превръща в неблагодарна работа - процесът ще отнеме много време. Следователно вътрешните стилови таблици се считат за неудобни.
Външните стилови таблици са много по-често срещани. Трябва само да свържете таблицата с всички необходими уеб страници, като използвате маркера на атрибута rel (дефинира връзкатамежду страницата и включения файл) и стойността на стиловия лист, което означава, че включеният файл съдържа стилов лист. Атрибутът href е пътят (URL) към вашия .css файл:
Като редактирате само един файл, можете да промените стила на целия сайт наведнъж, без значение колко страници има. Това е много удобно, особено за големи ресурси.
Урок: Създаване на стилов лист
Тъй като външните стилови таблици са най-удобните и широко използвани при разработването на дизайна, ще научим как да ги създаваме. Можете да изтеглите архива с файлове за този урок на тази страница.
В папката ще намерите HTML документ с проста примерна страница и изображение (което ще се използва в урока). Отворете HTML документа в браузър. Ще видите, че страницата изглежда напълно нормално. За да й придадем по-привлекателен вид, нека напишем стил за нея.
Засега не е нужно да навлизате твърде дълбоко в значението на тази или онази част от кода. Сега трябва да разберете самия принцип на работа. Да започваме.
Свързване на CSS към HTML
Обобщение на това, което току-що направихте. Като поставите този код в HTML документ, вие:
- предостави връзка към шрифт, наречен Roboto Condensed, който ще бъде взет от сървъра на Google (ще говорим повече за шрифтовете на Google по-късно);
- включи нашата външна стилова таблица style.css (засега празна).
Писане на CSS стил
Запазете промените си в HTML документа и отидете до празния .css файл, който сте създали. Нека стилизираме страницата:
Запазете промените си. Поздравления, написахте първото правило - то се отнася до етикета. Първото свойство, padding-top, ще добави подложка отгоре между прозореца на браузъра и съдържанието на уеб страницата в размер на 5 пиксела. СЪСС второто свойство, background-image, сте включили изображение за фон на цялата страница, като посочите пътя до файла с изображение (разположен в същата папка като HTML документа).
Обновете отворената уеб страница в браузъра. Ако всичко е направено правилно, ще видите, че фонът се е появил на страницата и отстъпът между горната част на прозореца и текста леко се е увеличил.
Да продължим по-нататък. Сега трябва да променим съдържанието на тага. За да направите това, добавете следния код към вашия стилов лист:
Запазете промените във файла. Сега ти:
- задайте областта за съдържанието на тага, която е равна на 75% от ширината на прозореца на браузъра;
- осигури подложка от 40 пиксела от всички страни на областта на съдържанието;
- позиционира зоната в центъра на страницата и също така отстъпи горната и долната част на 15 пиксела;
- задайте цвета на фона на #EBEBEB за областта със съдържание;
- заобли ъглите на правоъгълна област, като посочи радиус на заобляне от 30 пиксела.
Актуализирайте HTML документа отново. В същото време се уверете, че кешът е деактивиран или презаредете страницата, като актуализирате всички свързани с нея файлове, като използвате специална клавишна комбинация (например за Chrome това еCtrl+F5 ).
Ще видите, че в центъра на страницата е добавена правоъгълна област със заоблени ъгли. Това е резултатът от вашите действия в CSS файла. Можете също така да опитате да намалите прозореца на браузъра и да видите как ширината на правоъгълната област се адаптира към неговия размер. Това се дължи на факта, че ширината е зададена като процент.
Промяна на шрифта с CSS
Време е да украсим нашия текст. Добавете този код към вашия стилов лист и запазете промените си:
Като напишете това, вие задавате цветовете на шрифта за таговете h1, h2, p, определяте техните размери, добавяте полета отляв край с 20 пиксела и допълнително за
направи горен отстъп от 20 пиксела и зададе височината на водещия ред (редовото разстояние на текста) на 50% повече от стандартното. Освен това сте свързали шрифта Roboto Condensed и с трите тага (затова в самото начало беше необходимо да посочите връзка към него в HTML файла).
Обновете страницата в браузъра си и се възхищавайте на резултата от работата си. В този урок ще опитаме още нещо. Добавете този код към CSS:
В крайна сметка трябва да имате страница като тази:
Като практика опитайте да промените размера на текста за
(да кажем 1.1em) и увеличете подложката между
и левия край на областта на съдържанието с още 10 пиксела.
Тази глава обхвана синтаксиса на CSS, както и как да създадете елементарен стилов лист. Научихте как да включите CSS в HTML страница и също така научихте как да създавате прости стилове. Ето основните неща, които трябва да запомните от тази глава:
Всеки CSS стил се състои от няколко елемента: селектор, стилово свойство и стойността на това свойство.
Задължително е да поставите двоеточие след свойството и точка и запетая след стойността.
За удобство и по-добра четливост на CSS кода, пишете всяко свойство на нов ред и не пестете интервали и раздели.
CSS коментарите се изписват между знаците /* */ и могат да служат като анотации, обяснения, а също така могат да се използват като инструмент за временно деактивиране на ненужни части от кода.
Външните стилови листове, за разлика от вътрешните, се считат за по-удобни. Те ви позволяват бързо да промените стила на цял сайт, като редактирате един файл.
CSS е лесен, интересен и забавен!
В първияЧаст 3 от глава 3 ще ви запознае с основните CSS селектори.