От инлайн стилове към CSS

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео

Тест за преминаване към следващия урок

 
 За какво служи style тагът в head елемента?
За добавяне на стилове към страницата и отделянето им от структурата на HTML
За промяна визуализацията на head елемента
И двете
 
Какво представлява селекторът?
За свързване стиловете със конкретни HTML елементи
За избиране на опции от потребителя
За маркиране текста на страницата

Въпроси и отговори

  • Борис Митев:

    Има интервал в ширината на картинката. "110 px" трябва да стане "110px".

    Злат Попзлатев:

    Сега обаче стана много малка. На 200px ли да я сложа или повече?

    Борис Митев:

    Картинката трябва да е квадратна, за да изглежда добре с тези параметри в CSS.

    Злат Попзлатев:

    Какви параметри да и задам за да изглежда като по-голям квадрат?

    Георги:

    Защо текста на заглавието излиза на маймуни, необходима ли е инсталация на шрифтове?

    Peter:

    В предния модул беше пояснено за кирилицата, в хедъра да се постави едно "заклинание" -

    Peter:

    В урок 2 в коментарите подробно се коментира това.

    Peter:

    Аз се извинявам за прибързаното си мнение. Когато направих следващия урок от този модул и при мен кирилицата се ошашави. Опитвах разни комбинации - не, та не. На края, копирах кода от Атом, пейстнах го в notepad++, зададох Encoding - Utf-8, Language HTML и сейвнах файла върху съществуващия. И всичко се оправи. Още в началото на курса мислех да попитам г-н Митев, защо Atom? Защото видях, че той избира Атом за Макинтош. После от други картинки се видя, че той работи на Макинтош. И освен това в head tag на неговите програми не слага онова заклинание за UTF-8, което ние слагаме. Но тогава бях с пробен достъп, един вид - на изпитателен срок и си траех ... :) Когато видях, че инсталацията на Атом е над 100 мб се зарадвах, реших, че вероятно това си е една среда за развитие на HTML и CSS и много се разочаровах, когато видях, че не е. Освен това забелязах, Атом непрекъснато си променя енкодинга на лентата долу в дясно, ту UTF-8, ту Windows-1251. Както и да е, вероятно ще продължа упражненията чрез използване на текстов редактор notepad++.

    Лъчезар Николов:

    Да така е - Atom не е най-доброто решение и според мен. Лично аз препоръчвам Brackets със psd. extractor. Редакторът е създаден от Adobe и е едно отлично решение, С този html обработващ инструмент се работи много по-бързо и по лесно - само да спомена някои опции, които се съдържат в мощните html редактори като Adobe Dreamewaver, Coffee Cup и др. Първо, ако напишете отварящият таг или използвате подсказката, автоматично се въвежда и затварящият таг. Опцията Quick edit, color picker, Live Preview и др.. А колкото до възможността да екстрактвате проекти създадени с Photoshop - psd. файлове - това е една стахотна опция. И най-важното е, че промяната на едитора няма да ви стресира въобще, защото тъмната тема на brackets е почти едно към едно еднаква с тази на Atom. Единствения недостатък на Brackets е, че има по-големи изискавания към хардуера, възможни са крашове..,но това са хипотетични неща. Ако веднъж започнете с него и видите възможностите му никога повече няма да се върнете към Атом. Можете да си го изтеглите от "brackets.io". Друго много добро предложение е Sublime Text 3. Невероятно лек и бърз и лек едитор. За съжаление трябва да е платената версия, но можете да си го изтеглите от тук! Колкото до Notepad++ това е класика, добър редактор, но му липсват функционалностите на модерните редактори. Мога да предложа и един много полезен начин за учене на html на тези, които разполагат или могат да се снабдят с Adobe Dreamweaver CC. Всъщност, ако някой смята да се занимава сериозно с уеб разработка не може да прескочи този най-мощен html редактор. Това, че не се препоръчва за най-начинаещи е, че могат да се увлекат да използват вградените опции, вместо изписването на съответния код. Но можете едновременно да отворите html страницата и в Atom/Brackets и в Dreamweaver и когато забравите таг или не знаете нещо да го въвеждате от Dreamweaver. Кода се ъпдейтва автоматично в двата редактора и учебния процес се улеснява. Не е необходимо да владеете Dreamweaver достатъчни са само най-основните неща, но може много да ви помага. Казвам го от опит!

    Лъчезар Николов:

    Ето как се работи с Brackets използвайки опцията Live Preview и Quick Edit. Без сейфване, без превключване на браузър, без опресняване/refresh/. Работейки с html и css едновременно виждате промените в десния панел. Ако имате въпроси питайте! Работи се невероятно бързо, без загуба на време за излишни операции!!!

    Лъчезар Николов:

    Едно уточнение: Brackets Live Preview/Преглед в реално време/ засега работи само с Chrome. Опитайте - заслужава си! Ще бъдете много приятно изненадани!!! :) Adobe Systems си е лидер във всичко, което изработят!

    Peter:

    Благодаря Лъчо, да илядиш :) Имам мастер колекшъна CC, но Dreamewaver до сега ми се е губел ...

    Десислава Малджанова:

    Благодаря ти и аз Лъчо! Супер си ! А между другото знаете ли как се доближава тази длъжност към името. Графичен дизайнер съм и това голямо разтояние между двете леко ме дразни.

    Лъчезар Николов:

    Създаваш лист със стилове и добавяш кода от втори ред:

    ето резултата:

    Лъчезар Николов:

    Ето целия код в Brackets с добавен листа със стилове

    Лъчезар Николов:

    Или простому обяснено - след като създадеш листа със стилове го именуваш и сейфваш в папката с index.html. След това към html-a го прикачаш с кода от 6 ред. Мисля, че виждаш как е при мен - моят лист със стилове е "mitev-2". Ако не знаеш как се създава лист със стилове в Atom - просто създаваш нов файл и го запазваш с разширението: .css :)