Nauka CSS może być bolesna, zwłaszcza gdy nie wiesz od czego zacząć.

CSS to język stylizacji, a nie język programowania, taki jak Javascript czy PHP, w rzeczywistości jest dość łatwy do nauczenia, zwłaszcza jeśli masz pewną wiedzę na temat HTML.

Dzisiaj przedstawię kilka wskazówek, które mogą pomóc w nauce CSS.

1. Podstawowe Budownictwo

Co musisz wiedzieć najpierw: Aby nauczyć się pisać własny kod CSS, musisz wiedzieć, jak go poprawnie sformatować. Istnieją dwa przyzwoite sposoby, aby to zrobić, ale jeden z nich zapewnia porządek.

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

Oto podstawowa struktura CSS:

.class selector {property: value;} #id selector {property: value;}

Jest to dość proste, gdy nie ma wielu stylów, które chcesz zaimplementować w elemencie w swojej witrynie, ale kiedy zaczniesz czuć się komfortowo z CSS, będziesz potrzebować znacznie więcej niż jednego stylu. na element, który sprawi, że taka konstrukcja będzie nieodpowiednia.

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

.class selektor {właściwość: wartość; Właściwość 2: wartość 2; Właściwość 3: wartość 3; } #id selector {property: value; Właściwość 2: wartość 2; Właściwość 3: wartość 3; }

Teraz możesz zacząć analizować terminy używane 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 są również nazywane deklaracjami.

To świetny punkt wyjścia do nauki pisania własnego CSS, a kiedy już zaczniesz, możesz się zastanawiać, gdzie powinieneś to wszystko napisać na końcu plików WordPress.

W twojej instalacji WordPress każdy plik z rozszerzeniem .css jest plikiem CSS, jak już prawdopodobnie się domyślasz. Głównym plikiem, którego powinieneś szukać, jest arkusz stylów o nazwie „ style.css”. To w tym pliku znajdziesz ogólnie cały styl motywu.

2. Wygodny z prostymi selektorami

Następnie musisz dowiedzieć się o selektorach i podstawowych właściwościach, ale co ważniejsze, wiedzieć, jak działają one w motywie. Selektory takie jak h1, h2 et h3 dla nagłówków i p na przykład tekst akapitu, a także właściwości takie jak font-family i „background-color” jako kolor tła.

Istnieje prosty sposób, aby ćwiczyć te nowe umiejętności i naprawdę zobaczyć zmiany, 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, w których możesz zmodyfikować ich kod, aby szybko ćwiczyć. Możesz też to przeczytać Podczas Mathier Nebra na OpenClassrooms.

3. Zapamiętaj model Box

Możesz łatwo znaleźć selektory i właściwości, których nie znasz, w mgnieniu oka. Wszystko, co musisz zrobić, to przeprowadzić proste wyszukiwanie w Google lub Bing. 

Model blokowy

Może tak być w przypadku wielu (lub najbardziej) rzeczy w życiu, ale model pudełka musi być wyjątkiem.

Zasadniczo są to podstawowe elementy układu CSS, które musisz opanować, aby zrozumieć wiele właściwości. Układ pudełka zawiera również wiele elementów, które można dostosować.

Na szczęście nie jest to trudne do nauczenia i szczerze mówiąc, jeśli potrafię to zapamiętać, nie powinieneś mieć z tym problemu. Zasadniczo szablon ramki zawiera obszar zawartości, marginesy wewnętrzne lub dopełnienie, obramowanie lub obramowanie oraz margines zewnętrzny lub margines.

4. Uczenia się przez działanie

Po zapoznaniu się z CSS dobrym pomysłem jest przećwiczenie wyboru motywu, który ma całkowicie podstawowy wygląd, na którym można wprowadzić zmiany.

Ważne jest, aby zrozumieć, jak proste zmiany mogą czasem drastycznie wpłynąć na temat, a innym razem nie tak bardzo. Ostatecznie ćwiczenie tak dużo, jak tylko możesz, powinno pomóc ci wizualnie zobaczyć zmiany, które wprowadzasz.

W projekcie rzeczy, kiedy już będziesz w stanie połączyć kropki, możesz nie tylko szybko napisać CSS, ale także musisz być w stanie rozwiązywać problemy w przyszłości, co staje się dla ciebie ważnym zadaniem. projektowanie i tworzenie stron internetowych.

5. Mają zawartość w zależności od szerokości i wysokości

Po zainstalowaniu prostego motywu, nad którym możesz pracować, możesz natychmiast rozpocząć zmianę układu, określając różne długości i szerokości dla obszarów zawartości.

Umożliwi to zapoznanie się z układami motywów WordPress

6. pływaki i pozycjonowania

W tym miejscu CSS bywa trochę skomplikowany, ponieważ możesz utworzyć układ tylko za pomocą CSS, a zwłaszcza za pomocą pływaków i pozycjonowania. Problem polega na tym, że te właściwości nie są przeznaczone do tworzenia całych prezentacji.

W tej chwili tyle osób wyświetla całkowicie prawidłowy układ. zbadaj kod tematu, nad którym pracujesz.

7. Zaawansowany CSS

W tym momencie zaczniesz trzymać się CSS, ale jest o wiele więcej do odkrycia:

  • klasy nick  - Służy do ustawiania określonego stanu elementu, takiego jak najechanie myszą i pozycjonowanie obrazu.
  • Złożone selektory  - możesz dopracować swój styl za pomocą bardziej zaawansowanych selektorów.
  • animacje CSS3  - Tworzenie animacji zanikania lub innych przejść.
  • Reaguj na zapytania o media CSS3  - pozwoli Ci błyskawicznie tworzyć responsywne motywy.
  • transformacje  - Kontroluj rozmiar i kształt wybranych obszarów treści.
  • At-reguł  - służy do importowania do motywu takich rzeczy, jak czcionki i arkusze stylów.
  • gradienty  - Dodawanie gradientu do motywu bez konieczności używania obrazu.

Jest wiele elementów, w których naprawdę możesz zacząć uczyć się, aby nadać stylowi więcej stylu.

To wszystko, co trzeba było wiedzieć, ucząc się CSS na swoim blogu WordPress. Udostępnij ten samouczek znajomym w swoich ulubionych sieciach społecznościowych.

6 akcji
udział6
ćwierkanie
Enregistrer