.
Маркирам ги с .
Да видим, какво се получи!
Добре съм ги маркирал, но нямат никакъв стил и неприличат това на задния фон.
Как ще сложа стил?
Първо трябва да сложа Style таг-а.
С него мога да избирам по ID например или клас, eлементи и да ги стилизирам.
Сега ще ви покажа как става по следния начин - на ръка!
Пък след това ще ти покажа как може да стане с style wise-a.
Първо за да мога да адресирам My title трябва да му сложа или клас или ID, т.
e.
Kакво имам предвид?
Първо за да мога да адресирам My title трябва да му сложа или клас или ID, т.
e.
Kакво имам предвид?
ID -то се слага по този начин и се адресира по този начин с # {}.
Всичко между тези две скоби сa правила за стил.
Например: Color
Избирам Save.
Цвета се промени на червен.
Този код е за червен цвят.
Как се адресира с клас?
Класа може да е каквото и да е, т.
е може да пишем тук: "проба"
Както и ID-то може да е каквото и да е, но не трябва да има отстояние.
Например така.
Адресирането на класове става по този начин с точка, "проба".
Слагам код за зелено.
Проблема, когато адресирам с ID, вместо с клас е, че може да имаме само един елемент, който е с ID titlе.
Това е правилото!
ID -тата трябва да са уникални.
Следователно, ако копираме тук, и направим няколко title -a.
ще трябва да си ги кръстим, едно-две и да копираме стиловете.
1 2
По този начин html -a ще е правилен.
Затова е измислен класа.
Може да имаме колкото си искаме елементи Hello, с клас проба
и няма да трябва да ги наименоваме проба 1 проба 2 и 3 и да правиме стил за всеки от тях.
За това изтривам това, което направихме погрешно.
Нека да се върнем към преобразуването на този html към този mockup.
Затова ще изтрия този стил и ID -то, и ще сложа клас на негово място.
Класът ще наименовам "title".
Следващия клас ще го наименовам "subtitle".
И третия да бъде е "description".
Тези неща си ги наименоваме ние, т.
е.
не са ключови думи, може да изберете каквито искате имена.
Сега ще използвам разни правила, които най-вероятно не знаете.
Не се стряскайте от тях, ще ги научим в друг урок.
Вижте тук за какво става въпрос.
Ще взема този цвят от тук.
Отивам долу за да взема цвета.
В Color picker-a имаме hex цвета.
Влизам в текстовия редактор и давам Paste.
Като пред тях трябва да има #.
Да видим какво стана?
Цвета се оправи.
На втория subtitle слагаме background color, цветът е същия както при title-а, така че го слагам директно.
След което имаме и Description.
За да взема неговият цвят трябва да направя zoom.
Мога и да не правя zoom, ами да го взема оттук като селектирам текста.
Color е за текстов цвят.
Color е за текстов цвят.
Почти не се вижда, защото е много тъмен.
"Hello" имаше същия цвят.
Разделителя за тези CSS правила е точка и запетая.
Избирам F5.
Разликата е в големините.
Затова ще сложа fond-size, следващото правило.
"Font size"
25 пиксела например, мисля че е толкова някъде.
На следващия ще сложа font size
14 пиксела.
и тук се сложа font size 10 пискела.
Сега понеже съм направил zoom с Ctrl и ми е прекалено голямо, ще трябва да отида на 100%.
Това ще го видя оттук.
Това в момента е 100%.
Това означава, че съм доста далеч от истината.
И тук ще трябва да го направя 100%.
Добре сега вече го направих на 100%.
Мога да експериментирам.
50.
25.
и 13 пиксела
Някъде там трябва да са като стойности.
Default font тук е, Times New Roman, докато тук има нещо което прилича на Arial или Verdana.
Затова единият вариант e да сложа тук font family Verdana и да копирам нa всичките три правила.
Tук.
Tук.
Tук.
Сега зебележете, когато избера F5 ще се промени шрифта.
Другия вариант е да избера всички елементи,
или всички div -ове с това правило, и да им сложа font Verdana, като това сработи по същия начин.
За отстоянията от текста ще сложа padding.
Като първият padding e отгоре, 15 пиксела, след това отдясно, отдолу и отляво.
Мисля че тук шрифта прилича на Bold, затова ще му сложа font-weight: bold.
Горният също изгледа, че е Bold.
Това в Title, ще го копирам.
При title -a имаме отстояние от долната кутийка, затова ще го направя с Margin.
Ще сложа отгоре 10 пиксела отдясно 10 пиксела
отдолу 10 отляво няма да сложа нищо.
Сега се получи малко по-правилно.
Description -a също има Margin.
10 пиксела отгоре и 10 пиксел в дясно
нула пиксела от дясно, 10 пиксела отдолу и нула пиксела отляво.
Сега обаче когато премествам моята страница, тя се разтегля от край до край.
Докато тук имаме го имаме фиксирано, някъде по средата на страницата.
Затова цялото това нещо тук , трябва да го сложим в един div.
div class , ще го наименовам "shell"
Ще го затворя, в края.
Т.
е.
всичките тези три контейнера с класове title, subscription, description ще се намират вътре в този shell.
Виждате, когато натисна тук, notepad ще ми покаже къде е краят на този div.
Това го правим за да мога да обхвана целия този shell с css правило и да му кажа:
width: 500 пиксела
Давам refresh тук и ще видите всички елементи вътре придобиват дължината 500 пиксела, защото са в контейнер който е с 500 пиксела.
Другото което трябва да направя е да го преместя в центъра
Затова ще му сложа margin Auto.
Избирам Save.
Refresh
Дизайна се получи почти същия.
разбира се шрифтовете няма да са същите.
понеже във Фотошоп имаме хиляди шрифтове от които може да избираме.
Докато в html трябва да си караме ръчно, което е нещо като плъгини към страницата.
Така е малко по-сложно.
Основните шрифтове, които може да ползваме
директно в html са Times new Roman, Verdana, Arial и още няколко.
В следващия урок си направим всичко показно тук, по ръчния начин, ще го направим с програмата Style wiser.
Въпроси и отговори
