10 prostych wskazówek do nauki CSS dla WordPress

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:

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:

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.

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

  

  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.

• Prostsze

  

  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.

• Cyrkonie

  

  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.

• Mog

  

  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.

• Założyciel

  

  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.

• Elucyd

  

  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ć.

• Podkreślenie

  

  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.

• Radix

  

  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.

• Capture

  

  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.

• Simply-VisiOn

  

  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.

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

  

  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.

• Puste HTML5

  

  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.

• Podkreślenia

  

  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.

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:

• CSS