10 prostych wskazówek dotyczących 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 czy PHP, jest on dość prosty do nauczenia, zwłaszcza jeśli masz za sobą trochę wiedzy na temat HTML (którą, jak zakładam, masz na potrzeby tego postu).

W naszej 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 w rozpoczęciu pracy, zwłaszcza w połączeniu z ten post.

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

Kontynuuj czytanie lub przejdź dalej, korzystając z tych linków:

• Podstawowa konstrukcja
• Ćwicz z prostymi selektorami i właściwościami
• Zapamiętaj model pudełka
• Ucz się przez działanie
• Uporządkuj zawartość według szerokości i wysokości
• Pływaki i pozycjonowanie
• Zaawansowany CSS
• Replikuj witrynę za pomocą CSS
• Preprocesory
• Ramy

1. Podstawowa konstrukcja

Po pierwsze: aby nauczyć się pisać własny CSS, musisz wiedzieć, jak go odpowiednio sformatować. W rzeczywistości są na to dwa prawidłowe sposoby, ale jeden z nich pomaga ci lepiej zorganizować.

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

Oto podstawowa struktura CSS:

Jest to wystarczająco 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ć znacznie więcej niż jednego stylu dla elementu i właśnie tam taka struktura może szybko się bałaganić.

Dlatego istnieje wydajniejszy i bardziej zorganizowany sposób napisania kodu CSS:

Teraz możesz zacząć zagłębiać się w terminy użyte w tym przykładzie. Każdy z tych terminów to podstawowe elementy składowe CSS: klasa, identyfikator, selektor, właściwość i wartość. Właściwości i wartości również składają się na tak zwaną deklarację.

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

W Twojej instalacji WordPress każdy plik, który widzisz, że kończy się na .css , jest plikiem CSS, jak prawdopodobnie już się domyślałeś. Głównym plikiem, którego potrzebujesz, jest arkusz stylów, oznaczony jako style.css . W tym miejscu odbywa się większość lub całość projektu motywu pod względem kolorów, czcionek, podstawowych obrazów i prawdopodobnie części układu motywu.

Możesz również zauważyć plik w gotowym motywie o nazwie custom.css i zwykle w tym miejscu chcieliby, abyś wprowadził zmiany w motywie. Kiedy wprowadzasz zmiany w tym pliku, powinien on 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 stylizowania wyglądu i działania wtyczki.

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

Następnie zapoznaj się z podstawowymi selektorami i właściwościami oraz ich funkcjonowaniem w motywie. Na przykład selektory, takie jak h1 , h2 i h3 dla nagłówków i p dla tekstu akapitowego, a także właściwości takie jak font-family i background-color .

Jest łatwy sposób na przećwiczenie tych nowych umiejętności i zobaczenie zmian, które wprowadzasz, bez konieczności zakładania 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 po naciśnięciu przycisku możesz natychmiast zobaczyć wprowadzone zmiany.

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

3. Zapamiętaj model pudełka

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

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

Na szczęście nie jest to trudne do nauczenia i szczerze mówiąc, jeśli potrafię go zapamiętać, to Ty też nie powinieneś mieć z tym problemu. Zasadniczo zawiera obszar zawartości, dopełnienie, obramowanie i margines.

4. Ucz się przez działanie

Gdy już zaczniesz zapoznawać 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 jego arkusz stylów.

Ważne jest, aby zrozumieć, jak proste zmiany mogą czasami drastycznie wpływać na motyw, a innym razem nie tak bardzo. Ostatecznie ćwiczenie tak dużo, jak tylko możesz, pomoże Ci wizualnie zobaczyć wprowadzane zmiany i połączyć działania związane z pisaniem kodu z końcowym wynikiem.

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

Oto kilka doskonałych motywów do ćwiczenia, które możesz zainstalować na swojej stronie WordPress za darmo. Nie wszystkie z nich są idealnymi reprezentacjami tego, jak motyw powinien wyglądać i funkcjonować, ale wszystkie są świetnym punktem wyjścia do nauki, jak zmienić motyw za pomocą prostego CSS.

Białe Spektrum

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

Oprócz odrobiny koloru, jeśli chodzi o czcionki i łącza, jest to prosty i prosty motyw do pracy.

Założyciel

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

5. Ułóż 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 prekursorem następnego kroku i pozwala zapoznać się z różnymi obszarami układu w motywie WordPress.

6. Pływaki i pozycjonowanie

W tym miejscu CSS staje się nieco trudny, ponieważ możesz stworzyć układ wyłącznie za pomocą CSS, a w szczególności pływaków i pozycjonowania. Problem polega na tym, że te właściwości nie są przeznaczone do tworzenia całych układów i istnieje wersja robocza do aktualizacji układów CSS.

Na razie jest to powszechny sposób, w jaki wiele osób uzyskuje właściwy układ . Świetnym pomysłem jest obserwowanie motywów, które już istnieją, w tym powyższej listy, i zobaczenie, 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:

• Pseudoklasy — używane do definiowania określonego stanu elementu, na przykład po najechaniu myszą i pozycjonowaniu obrazów w określonym miejscu, istotnym dla innych elementów.
• Złożone selektory – możesz uzyskać jeszcze bardziej szczegółowe stylizacje, korzystając z bardziej zaawansowanych selektorów.
• Animacje CSS3 – Tworzenie zanikania, popu lub innych przejść po najechaniu myszą na obrazy i przyciski.
• Responsywność za pomocą zapytań o media CSS3 — jednym z najprostszych sposobów tworzenia responsywnego motywu jest użycie zapytań o media.
• Przekształcenia — kontroluje rozmiar i kształt wybranych obszarów zawartości.
• At-rules — służy do importowania do motywu elementów takich jak czcionki i arkusze stylów.
• Gradienty — dodawanie gradientu do motywu bez konieczności używania obrazu.

Jest to wiele elementów, od 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 witrynę za pomocą CSS

Mając całą tę wiedzę na swoim 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 poszerzyć swoją naukę, jest ćwiczenie swojej wiedzy w rzeczywistych zastosowaniach. Polecam spróbować znaleźć witrynę, którą lubisz, a następnie skopiować ją najlepiej, jak potrafisz, wyłącznie za pomocą CSS na pustym motywie WordPress.

Jasne, prawdopodobnie nie będziesz w stanie uzyskać wszystkiego perfekcyjnie i prawdopodobnie jest wiele elementów, których nie będziesz w stanie powielić tylko za pomocą CSS, ale jest to świetny sposób na zaznajomienie się z CSS.

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

• BlankSlate

  

  To jest tak gołe, jak to tylko możliwe. W tym motywie jest tylko HTML5, więc możesz swobodnie dodawać swoje CSS, nie martwiąc się o kolizję jakichkolwiek stylów. Zawiera jednak wszystko, czego potrzebujesz, aby zacząć stylizować swój motyw.

• Pusty HTML5

  

  HTML5 Blank to szablon WordPress, który zawiera trochę stylizacji, ale niewiele. To świetny początek, jeśli nie chcesz zaczynać CSS od zera.

• Podkreślenia

  

  Jeśli jesteś trochę żądny przygód i chcesz wypróbować bardziej zaawansowany motyw startowy, podkreślenia to doskonała opcja, jednak nie dla osób o słabym sercu, ponieważ zawiera dwa fabrycznie załadowane przykładowe style motywów. Zawiera również kilka zaawansowanych technik i kodowania, dzięki czemu jest doskonałym narzędziem do nauki.

Istnieje również motyw HTML5 Reset WordPress na GitHub. Zawiera funkcje, które są nieco bardziej zaawansowane, ale ostatecznie to sprawia, że ​​jest to cenny motyw startowy.

9. Preprocesory

Gdy poznasz tajniki CSS, dobrym pomysłem będzie poznanie preprocesorów, a w szczególności SASS i LESS. Oba te elementy pomagają uporządkować CSS, dzięki czemu jest znacznie łatwiejszy do pisania i bardziej dostępny dla przyszłych edycji.

Preprocesory sprawiają, że Twój CSS jest czysty i łatwy do naśladowania, i szybko stał się niezbędną umiejętnością wśród twórców stron internetowych. Chociaż trwa debata na temat tego, który z nich jest najlepszy, SASS jest najczęściej używanym do tej pory preprocesorem.

Jeśli chciałbyś spróbować swoich sił w SASS w kontekście WordPressa, sprawdź motyw Bones. Składa się głównie z HTML5, więc możesz spróbować stylizacji za pomocą wbudowanego bitu SASS, który jest już dołączony.

10. Ramy

W tworzeniu stron internetowych frameworki są strukturą do tworzenia dynamicznych stron internetowych. Ostatecznym celem frameworku jest przyspieszenie witryn bez utraty funkcjonalności.

Gdy już opanujesz CSS, możesz przyspieszyć tworzenie motywów za pomocą frameworka.

Jednym z najpopularniejszych frameworków jest Twitter Bootstrap. Został stworzony, aby być responsywnym od razu po wyjęciu z pudełka i wykorzystuje zarówno SASS, jak i LESS, a także wiele niestandardowych komponentów CSS.

Zawijanie

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ę nim zająć. Dodatkowo powinieneś być gotowy, aby spróbować swoich sił w stylizacji własnego motywu WordPress.

Aby uzyskać więcej zasobów na temat uczenia się CSS i WordPressa, zapoznaj się z innymi naszymi postami: Mega przewodnik po nauce i referencjach CSS dla WordPressa: ponad 150 zasobów i od WordPressa początkującego do profesjonalisty: ponad 200 zasobów wspomagających karierę.

• CSS