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

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

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

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

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

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

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

    Има интервал в ширината на картинката. "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 :)