Samouczek CSS: Naucz się CSS od podstaw

Czy kiedykolwiek byłeś zafascynowany ogólnym wyglądem strony internetowej, kolorami, układem, interfejsem użytkownika i innymi elementami, które wydają się atrakcyjne? Ale czy zastanawiasz się, jak różne grafiki są dodawane na stronie? Odbywa się to za pomocą języka kodowania o nazwie CSS.

Ten blog pomaga zrozumieć, czym jest CSS, jego podstawy, zalety i jak możesz wykorzystać CSS do zaprojektowania swojej strony internetowej lub zbudowania kariery w projektowaniu stron internetowych.

Ucz się kursów rozwoju oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Co to jest CSS?

Kaskadowe arkusze stylów (CSS) stanowią integralną część strony internetowej. Jest to język kodowania używany wraz z HTML i JavaScript do projektowania całego układu strony – stron internetowych, kolorów, rozmiaru czcionki, odstępów między tekstami, różnych elementów oraz ich rozmieszczenia, tła i rozmiaru ekranu.

Termin kaskadowanie odnosi się do stylu dodanego do tekstu nadrzędnego kaskadowo w dół do kolejnych tekstów. CSS ułatwia projektowanie i edycję stron internetowych. Przed CSS projektanci stron internetowych musieli ręcznie kopiować tagi, czcionkę, kolory, wyrównanie i inne zasady stylizacji na wszystkich stronach internetowych. Zajęło to dużo czasu i wysiłku. CSS rozwiązuje ten problem, kopiując reguły stylizacji i stosując je na różnych stronach. Nawet jeśli zasady stylizacji jednej strony ulegną zmianie, modyfikacje zostaną automatycznie zastosowane do innych stron w serwisie. CSS umożliwia firmom tworzenie atrakcyjnego interfejsu użytkownika dla swoich stron internetowych i aplikacji mobilnych.

Poznaj nasze popularne kursy inżynierii oprogramowania

Oto kilka innych znaczących zalet CSS:

• Zwiększona prędkość:

  CSS dodaje kolor i styl do strony internetowej i czyni ją bardziej przyjazną dla użytkownika, zwiększając szybkość ładowania stron internetowych. Ponadto zapewnia płynne przeglądanie, zwiększając w ten sposób ruch na stronie organicznie.

• Łatwa konserwacja:-

  Kolejną istotną zaletą korzystania z CSS dla Twojej witryny jest to, że oferuje łatwe utrzymanie witryny. Możesz zmienić układ całej witryny za pomocą kodu jednowierszowego.

• Kompatybilność urządzenia:-

  Witryna, która wydaje się mieć określony układ na komputerze, może nie być taka sama na telefonie komórkowym lub tablecie. Układ strony zmienia się w zależności od rozmiaru ekranu. Dlatego projektanci stron internetowych muszą zadbać o to, aby układ pozostał spójny na wszystkich urządzeniach. Jest to możliwe dzięki CSS.

Jakie są rodzaje CSS?

• Wbudowany CSS:-

  Służy do stylizowania pojedynczego elementu w HTML, a nie całej sekcji. Projektanci używają wbudowanego CSS do stylizacji pojedynczego elementu w kontynuacji.

• Wewnętrzny CSS:-

  Jest również nazywany osadzonym CSS i jest dostępny w ramach stylu. Używa się go na jednej stronie, umieszczając go na górze dokumentu.

• Zewnętrzny CSS:-

  W przeciwieństwie do wewnętrznego i wewnętrznego, zewnętrzny CSS stosuje te same reguły stylizacji na różnych stronach internetowych. Jest to najczęściej używany typ CSS, ponieważ ułatwia projektantom wprowadzanie zmian w jednym pliku zamiast wprowadzania zmian do kilku plików.

Możesz skojarzyć różne style z dokumentem HTML za pomocą różnych typów CSS. CSS, który ma wyższy priorytet, to styl wbudowany. Zastępuje reguły stylizacji w osadzonym CSS i zewnętrznym CSS. Następny jest wewnętrzny lub osadzony CSS, który zastępuje reguły w arkuszach zewnętrznych. Wreszcie pojawia się zewnętrzny CSS, który nie może zastąpić pozostałych dwóch arkuszy stylów.

Składnia w CSS

Składnia w CSS odnosi się do różnych reguł stylizacji lub elementów, które przeglądarka interpretuje podczas projektowania strony internetowej. Oto trzy podstawowe elementy CSS:

• Selektor:-

  Selektor w CSS można rozumieć jako znacznik w HTML, który wybiera pojedynczy element, do którego zastosowano reguły stylizacji. Oto różne typy selektorów w CSS:

• Selektor uniwersalny:-

  Nie wybiera elementów na podstawie typu. Zamiast tego wybiera wszystkie elementy o tej samej nazwie.

• Selektor potomków:-

  Te selektory są używane do stosowania reguły stylu do elementu tylko wtedy, gdy jest on obecny w innym konkretnym elemencie.

• Selektory klas:-

  Jak sama nazwa wskazuje, selektory te stosują regułę stylizacji do wszystkich elementów danej klasy. Na przykład wszystkie elementy na stronie internetowej oznaczone jako H2 powinny mieć czcionkę w rozmiarze 12.

• Selektory ID:-

  Te selektory stosują reguły stylizacji oparte na podobnym identyfikatorze.

• Nieruchomość:-

  Właściwości CSS odnoszą się do różnych atrybutów lub funkcji znaczników HTML, takich jak kolor, rozmiar, obramowanie i wyrównanie.

• Wartość:-

  Są to wartości przypisane do właściwości CSS. Na przykład określony kolor lub rozmiar powinien mieć wartość #A2A2.

Kody kolorów CSS

Różne kolory używane w języku CSS mają przypisaną określoną wartość lub kod. Umożliwia projektantowi witryny ustawienie określonych kolorów dla elementów takich jak tło, tekst czy obramowania. Poniżej przedstawiono różne formaty przypisywania wartości kolorów w CSS:

• Kody szesnastkowe:-

  Są to sześciocyfrowe kody używane do reprezentowania wartości koloru. Początkowe dwie cyfry kodu (RR) reprezentują wartość koloru czerwonego, a następnie dwie wartości dla koloru zielonego (GG) i dwie ostatnie wartości dla koloru niebieskiego (BB). Możesz użyć wartości szesnastkowych z różnych programów graficznych, takich jak Adobe i Zaawansowany pędzel malarski. Należy zauważyć, że kody szesnastkowe w CSS zaczynają się od znaku hash.

• Wartości RGB:-

  W tej właściwości istnieje określona wartość dla każdego z trzech kolorów, a mianowicie czerwonego, zielonego i niebieskiego.

Jak ustawić kolor tła za pomocą CSS?

Korzystając z różnych właściwości CSS, możesz stylizować kolor tła, obraz, położenie lub przewijanie obrazu na stronie internetowej. Na przykład, aby ustawić kolor, musisz użyć właściwości background-color. Oto jak możesz to wykonać.

<p style=”kolor-tła: niebieski;”>. Da to temu konkretnemu tekstowi lub tagowi niebieski kolor tła. Podobnie musisz użyć właściwości „obraz tła”, aby ustawić obraz tła. Aby powtórzyć obraz w tle, możesz użyć właściwości „background-repeat”.

Poniżej znajdują się różne właściwości CSS używane do stylizowania czcionek:

• Rodzina czcionek zmienia oblicze czcionki.
• Rozmiar czcionki służy do zwiększania lub zmniejszania rozmiaru tekstu ceny.
• Wariant czcionki sprawia, że ​​tekst pisany jest małymi kapitalikami.
• Właściwość font-style powoduje, że czcionka jest pogrubiona lub kursywa. Grubość czcionki pomaga zwiększyć lub zmniejszyć pogrubienie tekstu.

Właściwości CSS do stylizacji tekstu i obrazów

CSS ma również różne właściwości do stylizowania tekstu elementu.

• Właściwość „color” ustawia kolor, natomiast właściwość direction służy do stylizowania „direction” tekstu.
• Właściwości text-indent i text-align służą do ustawiania odpowiednio wcięcia tekstu i wyrównywania tekstu.
• Właściwość letter-space pomaga zwiększyć lub zmniejszyć odstępy między słowami.
• Możesz użyć właściwości text-decoration, aby podkreślić lub przekreślić tekst.
• Właściwość Text-transform pomaga konwertować tekst z małych na wielkie i odwrotnie.
• Możesz także użyć właściwości text-shadow, aby rozmieścić cień wokół tekstu.

Obrazy stron internetowych mogą być stylizowane za pomocą następujących właściwości CSS.

• Właściwości Height i width określają odpowiednio wysokość i szerokość obrazu.
• Możesz użyć właściwości border, aby ustawić szerokość obramowania obrazu.
• Właściwość -moz-opacity pomaga naprawić przezroczystość lub nieprzezroczystość obrazu.

Możesz także przygotować listy numerowane lub wypunktowane za pomocą CSS. Oto właściwości listy, które musisz znać:

• Właściwość List-style-type pomaga ustawić kształt punktora, numeru lub dowolnego innego znacznika.
• Możesz również użyć właściwości list-style-image zamiast powyższej, aby dodać obrazy zamiast punktorów lub cyfr.
• Właściwość List-style-position steruje wyrównaniem lub wcięciem różnych punktów.

Przeczytaj nasze popularne artykuły związane z tworzeniem oprogramowania

Wniosek

Strony internetowe stały się kluczowe dla biznesu, głównie ze względu na rosnące trendy zakupów online. Dlatego firmy muszą stworzyć stronę internetową, która będzie atrakcyjna wizualnie dla klientów. CSS pomaga firmom zdobyć więcej klientów, przyciągając ich do animacji na stronie, interfejsu użytkownika i innych grafik.

Jeśli chcesz rozpocząć karierę w projektowaniu stron internetowych, możesz kontynuować kurs Masters of Science in Computer Science przez upGrad.