Nauka CSS może być przytłaczająca, zwłaszcza gdy nie wiesz, od czego zacząć i jakich terminów szukać, gdy utkniesz.

Ponieważ CSS jest językiem stylizacji, a nie pełnym językiem programowania, takim jak Javascript lub PHP, jest to dość proste do nauczenia się, zwłaszcza jeśli masz trochę wiedzy HTML pod paskiem (którą zakładam, że masz do celów tego postu).

W naszej niedawnej ankiecie na blogu przytłaczająca liczba z was wspomniała, że chcecie poprawić swoją grę i lepiej zapoznać się z CSS, dlatego niedawno opublikowaliśmy listę ponad 150 zasobów do nauki CSS, które powinny pomóc Ci zacząć, szczególnie w połączeniu z tym postem.

Dzisiaj pokażę Ci przepływ pracy i wskazówki, które pomogły mi nauczyć się CSS, gdy zaczynałem wiele lat temu. Zacznij od tip one i idź w dół listy do opanowania CSS.

1. Podstawowa Konstrukcja

Po pierwsze: aby nauczyć się pisać własny CSS, musisz wiedzieć, jak prawidłowo go sformatować. Istnieją dwa właściwe sposoby, aby to zrobić, ale jeden z nich pomaga utrzymać lepszą organizację.

Ponieważ często HTML jest pierwszym językiem, którego ludzie uczą się, gdy chcą pracować z witrynami WordPress, pomaga nauczyć się składni CSS, najpierw pisząc ją w podobny sposób do HTML.

Oto podstawowa struktura, którą zajmuje CSS:

Ładowanie gist jennimckinnon / bdd3568edee7891e9424

Jest to dość proste, gdy nie ma wielu stylów, które chcesz zaimplementować dla elementu w swojej witrynie, ale kiedy zaczniesz lepiej poznawać CSS, będziesz potrzebował o wiele więcej niż jednego stylu dla elementu i tam taka struktura może szybko się zabrudzić.

Dlatego istnieje bardziej efektywny i zorganizowany sposób pisania CSS:

Ładowanie gist jennimckinnon / 9092c4532cacbe7ed723

Teraz możesz zacząć kopać w terminach używanych w tym przykładzie. Każdy z tych terminów jest podstawowym budulcem CSS: Klasa, ID, selektor, właściwość i wartość. Właściwości i wartości składają się również na to, co nazywa się deklaracją.

Jest to świetny punkt wyjścia do nauki pisania własnego CSS, a gdy zaczniesz, możesz się zastanawiać, gdzie powinieneś to wszystko zapisać w swoich plikach WordPress.

W instalacji WordPress każdy plik, który widzisz, który kończy się w .css jest plikiem CSS, jak zapewne się już domyślacie. Głównym plikiem, którego musisz szukać, jest arkusz stylów i jest oznaczony jako styl.css. W tym miejscu Większość lub cały projekt Twojego motywu odbywa się pod względem kolorów, czcionek, podstawowych obrazów i być może niektórych układów motywu.

Możesz również zauważyć plik w gotowym motywie o nazwie zwyczaj.css i to jest Zwykle miejsce, w którym chcieliby, abyś wprowadził jakiekolwiek zmiany w temacie. Podczas wprowadzania zmian w tym pliku należy nadpisać istniejące style w arkuszu stylów motywu.

Jeśli dodasz wtyczki do swojego motywu, mogą one również zawierać pliki CSS w swoim folderze i są używane do stylizacji wyglądu wtyczki.

2. Praktyka z prostymi selektorami i właściwościami

Następnie poznajemy podstawowe selektory i właściwości oraz ich funkcjonowanie w motywie. Selektory takie jak h1, h2 oraz h3 do nagłówków i p na przykład dla tekstu akapitu, a także właściwości, takie jak font-family oraz tło-kolor.

Istnieje łatwy sposób, aby ćwiczyć te nowe umiejętności i faktycznie zobaczyć zmiany, które wprowadzasz, bez konieczności uruchamiania własnego bloga WordPress. W3Schools zawiera mnóstwo informacji na temat CSS, a także przykłady na żywo, w których możesz zmienić ich kod, a za naciśnięciem jednego przycisku możesz natychmiast zobaczyć wprowadzone zmiany.

Gdy zobaczysz przykład, po prostu kliknij na Spróbuj sam przycisk i otworzy się okno, w którym możesz przetestować podstawowe CSS.

3. Zapamiętaj Model pudełkowy

Jestem zwolennikiem odwoływania się do najczęstszych informacji, a nie zapisywania ich w pamięci. Być może dlatego, że brakuje mi pamięci przez większość czasu, ale wolałbym powiedzieć, że jest tak wiele wspaniałych odniesień w Internecie.

Możesz łatwo wyszukać selektory i właściwości, których nie znasz, w mgnieniu oka. Wystarczy proste zapytanie do ulubionej wyszukiwarki, takiej jak Google lub Bing, a wszystkie potrzebne informacje znajdują się w odległości jednego kliknięcia.

The box model
Ważne jest, aby zapoznać się z modelem pudełkowym.

Może tak być w przypadku wielu (lub większości) rzeczy w życiu, ale model pudełkowy nie powinien być jedną z nich.

Zasadniczo są to podstawowe elementy układu w CSS, których potrzebujesz, aby zrozumieć wiele właściwości. Układ pudełek zawiera również wiele podstawowych miejsc, które można stylizować za pomocą CSS.

Na szczęście nie jest to trudne do nauczenia się i szczerze mówiąc, jeśli Mogę to zapamiętać, nie powinieneś mieć z tym problemu. Zasadniczo obejmuje obszar treści, wypełnienie, obramowanie i margines.

4. Ucz Się Robiąc

Po zapoznaniu się z CSS, dobrym pomysłem jest wprowadzenie go w życie, wybierając motyw, który ma całkowicie podstawowy projekt i zmieniając jego styl, edytując arkusz stylów.

Ważne jest, aby zrozumieć, jak proste zmiany mogą drastycznie wpływać na temat czasami, a innym razem nie tak bardzo. Ostatecznie, ćwiczenie jak najwięcej powinno pomóc wizualnie zobaczyć wprowadzone zmiany i połączyć swoje działania pisania kodu z końcowym wynikiem.

W bogatszym schemacie rzeczy, gdy jesteś w stanie połączyć kropki, możesz nie tylko szybko napisać CSS, ale także powinieneś być w stanie rozwiązywać problemy w przyszłości, co staje się krytycznym zadaniem przy projektowaniu i rozwijaniu stron internetowych.

Oto kilka doskonałych motywów do poćwiczenia, które możesz zainstalować na swojej witrynie WordPress za darmo. Nie wszystkie z nich są idealnymi reprezentacjami tego, jak motyw powinien koniecznie wyglądać i funkcjonować, ale wszystkie są świetnymi punktami wyjścia, aby dowiedzieć się, jak możesz zmienić motyw za pomocą prostego CSS.

  • Spektrum Białe

    White Spectrum theme

    Jest to prosty motyw ze wspólnym układem, który zawiera główny obszar zawartości, pasek boczny, nagłówek i stopkę.

    Poza odrobiną kolorów, jeśli chodzi o czcionki i linki, jest to prosty i prosty motyw do pracy.

    Zainteresowany White Spektrum?

    Szczegóły
  • Prostsze

    Simpler theme

    Prostsze ma również wspólny układ z paskiem bocznym, ale znacznie mniej kolorów. Jego projekt jest również minimalistyczny, ale ma jedną kluczową różnicę: jest responsywny, co oznacza, że ten motyw wygląda świetnie na wszystkich urządzeniach mobilnych.

    Zainteresowany prostsze?

    Szczegóły
  • Cyrkonie

    Zircone theme

    Cyrkon jest również responsywny, ale domyślnie nie zawiera paska bocznego. Jest to czysty temat do ćwiczenia, zwłaszcza że został zaprojektowany z fundamentem CSS framework.

    Interesują Cię cyrkonie?

    Szczegóły
  • Mog

    Mog theme

    Mog nie jest responsywny, ale jest to motyw Jednokolumnowy z kilkoma kluczowymi elementami projektu, takimi jak stylizacja linków i przycisków, aby sprawdzić, jak te właściwości będą działać w praktycznych zastosowaniach.

    Zainteresowany Mog?

    Szczegóły
  • Założyciel

    Founder theme

    Gdy zaczniesz naprawdę rozumieć CSS, jest to świetny motyw, aby wznieść się pod maskę i spojrzeć na jego arkusz stylów, ponieważ jest nieco bardziej złożony niż inne wymienione dotychczas motywy.

    Jest responsywny, dostępny i gotowy do tłumaczenia, zawiera ikonę hamburgera dla ekranów mobilnych, a także wiele innych szczegółów projektu CSS, które są świetne do studiowania.

    Zainteresowany fundatorem?

    Szczegóły
  • Elucyd

    Elucidate theme

    Elucidate to responsywny motyw, który ma o wiele więcej elementów projektu CSS niż przeciętny minimalistyczny motyw.

    Nie zrozum mnie źle, nadal jest to prosty motyw z dużą ilością białej przestrzeni, ale kiedy zagłębisz się w jego arkusz stylów, możesz zobaczyć mnóstwo stylów, z których możesz się nauczyć, aby je wdrożyć.

    Zainteresowany Elucidate?

    Szczegóły
  • Podkreślenie

    Underline theme

    Underline ma prosty układ, ale także wiele elementów CSS, takich jak podkreślanie, które są miłe do zobaczenia w akcji. Chociaż możesz łatwo podkreślać tekst za pomocą HTML, istnieje wiele różnych rodzajów podkreślenia, których możesz użyć w CSS.

    Jest to również responsywny i prosty motyw z paskiem bocznym.

    Zainteresowany Underline?

    Szczegóły
  • Radix

    Radix theme

    Radix może być ultra minimalistycznym motywem lub możesz dodać kolor wokół tytułu postu i stopki.

    Jest również zbudowany z czystego CSS3, dzięki czemu możesz zacząć widzieć, jak w pełni responsywny motyw może łączyć się z kilkoma nieco bardziej zaawansowanymi funkcjami CSS. Możesz również zobaczyć przykład, w jaki sposób możesz dodać kolor nie tylko do tekstu, ale do tła.

    Zainteresowany Radix?

    Szczegóły
  • Capture

    Capture theme

    Gdy spojrzysz na Capture, zobaczysz responsywny motyw z kluczowymi funkcjami CSS, które są ważne do zbadania. Możesz zobaczyć, jak obrazy mogą stać się ważnym tłem i elementem stylizacji motywu, aby dodać osobowości, zamiast używać jednolitego koloru.

    Zainteresowany schwytaniem?

    Szczegóły
  • Simply-VisiOn

    Simply VisiOn theme

    Po prostu-VisiOn to responsywny motyw o prostym projekcie, ale to nie znaczy, że nie zawiera wiele fajnych stylizacji CSS.

    Możesz zobaczyć nie tylko proste funkcje CSS, takie jak kolor i czcionki, ale także bardziej zaawansowane funkcje, takie jak okrągłe awatary i animacje menu.

    Interesuje Cię Simply-VisiOn?

    Szczegóły

Nawet z tymi minimalistycznymi motywami powyżej, nadal możesz czuć się nieco przytłoczony tym, ile rzeczy jeszcze nie rozpoznajesz i to jest w porządku. Gdy sprawdzasz każdą sekcję tego postu, wszystko powinno zacząć się łączyć nieco bardziej.

5. Uporządkuj zawartość według szerokości i wysokości

Po zainstalowaniu jednego z tych motywów możesz również zacząć zmieniać układ, wprowadzając różne długości i szerokości obszarów zawartości i selektorów.

Jest to prekursor do następnego kroku i zapoznaje cię z różnymi obszarami układu w motywie WordPress.

6. Pływaki i pozycjonowanie

Tutaj CSS staje się nieco trudny, ponieważ możesz utworzyć układ wyłącznie za pomocą CSS, a w szczególności floats i pozycjonowania. Problem polega na tym, że te właściwości nie są zaprojektowane do tworzenia całych układów i istnieje szkic do aktualizacji układów CSS.

Na razie jest to powszechny sposób, w jaki Wiele osób uzyskuje swój układ just right. To świetny pomysł, aby obserwować motywy, które już istnieją, w tym powyższą listę i zobaczyć, jak różnią się one wykorzystaniem pływaków i pozycji.

7. Zaawansowany CSS

W tym momencie naprawdę zaczynasz rozumieć CSS, ale jest o wiele więcej do odkrycia:

  • Pseudo klasy – Służy do definiowania określonego stanu elementu, takiego jak po najechaniu myszą i pozycjonowaniu obrazów w określonym miejscu odpowiednim dla innych elementów.
  • Selektory złożone – Możesz uzyskać jeszcze bardziej szczegółowe stylizacji przy użyciu bardziej zaawansowanych selektorów.
  • Animacje CSS3 – Tworzenie zanikania, pop lub innych przejść po najechaniu myszą na obrazy i przyciski.
  • Responsywność z zapytaniami medialnymi CSS3 – Jednym z najprostszych sposobów tworzenia responsywnego motywu jest korzystanie z zapytań o media.
  • Transformacje – Kontroluje rozmiar i kształt wybranych obszarów zawartości.
  • At-Zasady – Używane do importowania rzeczy, takich jak czcionki i arkusze stylów do motywu.
  • Gradienty – Dodawanie gradientu do motywu bez konieczności używania obrazu.

To wiele elementów, w których naprawdę możesz zacząć widzieć, jak projekt Twojego motywu naprawdę nabiera kształtu. To idealny czas, aby zacząć testować swoje umiejętności.

8. Replikuj stronę za pomocą CSS

Mając całą tę wiedzę na pasku, być może będziesz potrzebował mocniejszego paska, ale co ważniejsze, możesz naprawdę wykorzystać swoje umiejętności w praktyce, używając podstawowej powłoki motywu i dodając własne style CSS od podstaw.

Jedną z najbardziej pomocnych rzeczy, które możesz zrobić, aby przyspieszyć naukę, jest ćwiczenie wiedzy w rzeczywistych zastosowaniach. Polecam spróbować znaleźć witrynę, którą lubisz, a następnie replikować ją najlepiej, jak możesz, wyłącznie za pomocą CSS na pustym motywie WordPress.

Oczywiście, prawdopodobnie nie będziesz w stanie uzyskać wszystkiego perfekcyjnie i prawdopodobnie istnieje wiele elementów, których nie będziesz w stanie replikować tylko za pomocą CSS, ale jest to świetny sposób na komfortowe korzystanie z CSS.

Oto kilka świetnych i darmowych motywów startowych, których możesz użyć:

  • BlankSlate

    BlankSlate theme

    To tylko gołe kości. W tym motywie jest tylko HTML5, więc możesz dodać swój CSS bez martwienia się o Zderzenie stylów. Zawiera wszystko, czego potrzebujesz, aby zacząć stylizować swój motyw.

    Zainteresowany BlankSlate?

    Szczegóły
  • Puste HTML5

    HTML5 Blank theme

    HTML5 Blank to motyw boilerplate WordPress, który zawiera pewne stylizacje, choć niewiele. To świetny początek, jeśli nie jesteś zbyt chętny do uruchamiania CSS od zera.

    Zainteresowany HTML5 Blank?

    Szczegóły
  • Podkreślenia

    Underscores theme

    Jeśli jesteś nieco żądny przygód i chcesz wypróbować bardziej zaawansowany motyw startowy, podkreślenia to jednak doskonała opcja, nie dla osób o słabym sercu, ponieważ zawiera dwa wstępnie załadowane style próbek motywów. Zawiera również kilka zaawansowanych technik i kodowania, które sprawiają, że jest to świetne narzędzie do nauki.

    Interesują Cię podkreślenia?

    Szczegóły

Istnieje również motyw HTML5 Reset WordPress na GitHub. Zawiera funkcje, które są nieco bardziej zaawansowane, ale to ostatecznie czyni go cennym motywem startowym.

9. Preprocesory

Gdy już poznasz tajniki CSS, dobrym pomysłem jest poznanie preprocesorów, w szczególności SASS i LESS. Oba pomagają uporządkować CSS, aby był łatwiejszy do napisania i bardziej dostępny dla przyszłych edycji.

Preprocesory sprawiają, że CSS jest czysty i łatwy do naśladowania, a szybko stał się niezbędną umiejętnością wśród programistów internetowych. Podczas gdy trwa debata na temat tego, który z nich jest najlepszy, SASS jest najczęściej używanym preprocesorem.

Jeśli chcesz spróbować swoich sił w SASS w kontekście WordPress, sprawdź temat Bones. Składa się głównie z HTML5, więc możesz spróbować stylizacji z wbudowanym bitem Sassa, który jest już dołączony.

10. Ramy

W tworzeniu stron internetowych, frameworki są strukturą do tworzenia dynamicznych stron internetowych. Ostatecznie celem frameworka jest szybsze tworzenie witryn bez utraty funkcjonalności.

Gdy masz CSS w dół pat, możesz przyspieszyć tworzenie motywów za pomocą frameworka.

Jednym z najpopularniejszych frameworków jest Twitter Bootstrap. Jest stworzony, aby reagować od razu po wyjęciu z pudełka, używa zarówno SASS, jak i LESS, a także wielu niestandardowych komponentów CSS.

Jeśli chodzi o ramy motywów WordPress, istnieje wiele do wyboru, w tym pusty responsywny motyw Bootstrap WordPress, nasz własny motyw z góry i wiele innych, Rachel McCollin zrecenzowała tony w swoim poście o nazwie Choosing a WordPress Theme Framework – the Ultimate Guide.

Wrapping Up

Uzbrojony w program nauczania i wskazówki, które pomogą Ci w drodze, CSS nie powinien być zbyt przytłaczający, abyś mógł się opanować. Ponadto powinieneś być gotowy, aby spróbować swoich sił w stylizacji własnego motywu WordPress.

Aby uzyskać więcej zasobów na temat nauki CSS i WordPress, sprawdź niektóre z naszych innych postów: Mega Przewodnik do nauki i odwoływania się do CSS dla WordPress: zasoby 150 + i od początkującego do Pro WordPress: zasoby zwiększające karierę 200+.

Jakie są Twoje przeszkody i tryumfy w nauce CSS? Zachęcamy do podzielenia się swoimi doświadczeniami w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…