Следвайте тези стъпки, за да станете CSS Superstar

CSS (Cascading Style Sheets) е една от основните технологии, използвани за създаване на уеб страници. Тъй като браузърите могат да разберат единствено езика на стила на стила, важно е да научите CSS в дълбочина, за да овладеете уеб разработката.

Много лесно е да започнете с CSS Само с няколко часа обучение можете лесно да стилизирате текстове, елементи и оформления. Въпреки това става прогресивно трудно и скоро ще стигнете до ситуация, в която кодът ви започва да става доста объркан. Компонентите, които са работили преди да започнат да се чупят, и вие google и намирате корекцията, която фиксира вашия елемент, но разбива 5 други елемента, тъй като решението, което сте намерили в google, промени дисплея или позицията

Защо да научите CSS по правилния начин е важно

Ако нямате по-задълбочено разбиране на основите, CSS става по-скоро като метод за проба и грешка. Ще изпробвате различни стойности за различни свойства и накрая ще запазите тази, която работи, близка до желаната, без всъщност да разберете как работи.

Ще започнете да гуглите основни неща като „как да центрирате два div“ или „как да подравните div и текст вертикално“ и да копирате всеки път, като поставите кода от StackOverflow или codePen. В онези дни, когато flexbox не беше толкова популярен, „как да подравнявате div по вертикала и хоризонтала в една страница?“ Беше класически въпрос за интервю за CSS. Много начинаещи могат да получат хоризонталната част вдясно, но само няколко са получили правилната вертикална част.

Пътната карта

1. Основите

Ако тепърва започвате уеб разработка, научете някои основи на HTML, преди да стартирате CSS. В CSS първо прочетете теорията за това какво е CSS, как работи в браузъра, както и неговия основен синтаксис и използване.

Научете за различните видове таблици стилове, техните разлики, селектори и основни стилове, като размер на шрифта, ширина, височина и т.н.

Можете да започнете, като преминете през уроците в MDN.

2. CSS Модел на кутията

кредит: https://developer.mozilla.org

Разберете основите на CSS модела на кутията и свойствата, свързани с него, като марж, граница, подплънки и т.н.

3. Изображения и фон

Изображенията оживяват уеб страницата. Има много начини да добавите изображение, като например маркери за изображения, добавяне на фонови цветове / градиенти и фонови изображения към различни други маркери. Можете също да приложите наученото по-рано, като например да зададете рамки на изображения или да използвате множество изображения и да създадете обикновена галерия.


.образ {
   background-image: url (../ images / wallpaper.jpg);
}

4. Дисплей и позиция

Тези две са някои от най-импортираните свойства в CSS, където трябва да обърнете внимание, за да ги разберете правилно. Познаването на тези две свойства добре може да направи вашето CSS пътуване много по-гладко.

 дисплей: блок | вграден | вграден блок | маса | и т.н.

Разберете как се използват всяка от тези свойства на дисплея. Ще започнете да забелязвате някои HTML елементи като

или

да се държат като display: block, а някои елементи като се държат като display: inline.

позиция: статично | абсолютна | роднина | фиксиран | лепкав

Това е едно от свойствата, в които дори опитни програмисти допускат грешки. Научете как работи всеки от тях, как позицията на един елемент се отразява на неговите братя и сестри или родител, в какви ситуации ги използвате и т.н.

Тази стъпка е толкова важна, че можете да я повтаряте отново и отново, докато разберете!

float: вляво | прав

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

5. Цветове, шрифтове, списъци и таблици

Разберете различни цветови формати като HEX код, rgb, rgba, hsl, hsla, прозрачен и т.н.

цвят: бял;
цвят: #fff;
цвят: rgb (255, 255, 255);
цвят: rgba (255, 255, 255, 1);
цвят: hsl (0, 100%, 100%);
цвят: hsla (0, 100%, 100%, 1);
цвят: прозрачен;

Научете как да използвате различни шрифтове. Някои шрифтове не са налични във всички браузъри, така че ще трябва да се научите да добавяте шрифтове ръчно с woff или ttf файлове или да импортирате google шрифтове.

CSS може да превърне основен непореден списък

    в красива лента за навигация! Преди години таблиците бяха използвани за създаване на оформления на екрана, слава богу, че вече не го правим!

    6. Псевдокласове и комбинатори

    CSS псевдоклас е ключова дума, добавена към селектор, който определя специално състояние на избрания (те) елемент (и). Псевдокласът може да бъде толкова прост, колкото: hover или: посетен или нещо сложно като: nth-last-of-type (нечетно)

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

    / * всички елементи на абзаца вътре в контейнера ще имат цвят червен * /
    .container> p {
      цвят: жълт;
    }

    7. Инструменти за отстраняване на грешки и Dev

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

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

    8. Практика практика практика

    Снимка на Дейвид Рангел на Unsplash

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

    9. Чувствителен уеб дизайн

    кредит: Уикипедия

    След като научите уеб разработката за десктоп, има много други устройства, чрез които се осъществява достъп до уебсайтовете. Подкрепата на тези устройства е също толкова важна. Преди да се популяризира отзивчивият дизайн, разработчиците използваха, за да създадат отделен уебсайт за мобилни телефони, отделен уебсайт за устройства с възможност за докосване и т.н. помнете m.facebook.com и touch.facebook.com?

    Има 3 важни неща в отзивчивия уеб дизайн:

    Течно оформление:

    Ширината, зададена с px, не се мащабира въз основа на прозореца на браузъра. За да направим елементите мащабни въз основа на размера на браузъра, трябва да създадем течно оформление, като зададем размерите в% или rem единици.

    Медийни заявки:

    Медийното запитване е техника за включване на блок от CSS свойства само ако определено условие е вярно. Ние задаваме точки на прекъсване въз основа на нашия дизайн и променяме CSS в зависимост от ширината на браузъра.

    @media only screen и (максимална ширина: 600px) {
      тяло {
        цвят на фона: lightblue;
      }
    }

    Отзивчиви изображения:

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

    10. Flexbox и Grid

    Изминаха 10 години (!) От първото представяне на Flexbox, но той беше включен едва наскоро през 2015 г. - източник

    Flexbox и Grid са стиловете, използвани за създаване на гъвкави оформления и те правят живота ни толкова по-лесен! Това е едно от най-хубавите неща, случвало се някога на CSS.

    Посоченото по-долу оформление щеше да поеме повече от 300 реда CSS код без Flexbox или Grid.

    11. Трансформации, преходи и анимации

    Ученето на основни трансформации и преходи ще бъде полезно, ако искате да създадете интерактивна уеб страница с движещи се части на събития на мишката или събития на клавиатурата, като например курсора на мишката или щракване.

    Преди CSS3 анимациите са правени най-вече с помощта на jQuery - JavaScript библиотека. Сега CSS стана толкова мощен, че можем да правим сложни анимации без никакъв JavaScript.

    12. Препроцесори

    CSS препроцесорите са скриптови езици, които разширяват възможностите по подразбиране на CSS. Те ни позволяват да използваме логиката в нашия CSS код, като променливи, гнездене, наследяване, миксини, функции и математически операции. Някои от популярните са SASS, LESS, STYLUS и POSTCSS.

    SCSS форматът на SASS е по-широко използван, така че е добре да започнете със SASS за разработка.

    Плъгинът за autoprefixer на POSTCSS прави вашите CSS правила съвместими в различни браузъри, като добавя допълнителни правила като -moz- и-webkit-.

    13. Рамки

    Учебните рамки като Bootstrap, Semantic-UI или Materialize са незадължителни, но много полезни за по-бързото развитие, тъй като предоставят много стилове и оформления извън кутията.

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

    14. Специфичност

    „Опитва се да модифицира стил на бутоните за зареждане, но не успява, googles за решение, използва! Важно, развълнува всички, мислейки, че е най-правилното решение за всички проблеми!“ И така вие обречете проекта си! Ако разбирате правилно понятието Специфичност, проблемите относно правилата на припокриване в няколко таблици на стилове ще бъдат намалени значително.

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

    <Стил>
    div.wrapper p.paragraph {
       цвят: розов;
    }
    #container p {
       цвят: виолетов;
    }
    p {
      цвят: зелен;
    }
    .параграф {
      цвят: жълт;
    }
    
       

    Това е фиктивен текст

    Какъв според вас ще бъде цветът на абзаца?

    15. CSS Архитектура

    Писането на CSS код е лесно, но писането на поддържан CSS код е трудно. Трябва да се спазва правилната структура и метод, за да се напише добър CSS код. Самото следване на най-добрите практики не е достатъчно за писане на поддържан CSS.

    Някои от моделите на Архитектура за CSS са BEM, OOCSS, SMACSS и т.н. Можете да преминете през документацията и да изберете кой модел отговаря на вашите вкусове и проект.

    Имате го!

    Овладяването на CSS отнема търпение и много практика. Когато започнете да практикувате, ще изпитате страхотна CSS. 15 големи стъпки може да изглеждат поразителни в началото, но всъщност не са. Обичах всяка стъпка и опитът ми се подобряваше всеки път.

    Благодаря, че прочетете моята статия. Надявам се да сте намерили това полезно. Ако е така, не забравяйте да оставите много хлопки! (Можете да оставите до 50 )

    Искате ли да ме наемете за следващия си проект? Пуснете ми имейл на [email protected]