CSS akronim „Arkusz Stylów Kaskadowych”To język projektowy, który określa, jak zaprojektować przyciągającą wzrok stronę internetową. Opisuje wygląd i formatowanie witryny, która jest tworzona w języku znaczników. Zwykle CSS jest używany wraz z HTML do ustawiania stylów stron internetowych i interfejsów użytkownika.

Arkusz Stylów Kaskadowych

Kaskadowanie oznacza spojrzenie, Styl oznacza projektowanie elementu HTML/ Styl dodawania do dokumentów internetowych i Arkusz oznacza stronę e.G. Dokument strony internetowej.

Rodzaje CSS

CSS można używać na trzy sposoby:

• Wbudowane CSS: wbudowane CSS wdraża styl na jednej linii.
• Wewnętrzne CSS: Wewnętrzne CSS Zastosuj określony styl na jednej stronie.
• Zewnętrzne CSS: Zewnętrzne CSS jest osobnym plikami i może być używany przez wiele dokumentów/stron HTML.

W tym celu po prostu zaimportuj zewnętrzny link pliku CSS w sekcji głównej.

Składnia CSS

Rzućmy okiem na następujący styl CSS, aby lepiej zrozumieć składnię CSS:

W powyższym fragmencie P to selektor, który wskazuje na element HTML, który chcesz stylizować. Podczas gdy „kolor tła” jest właściwością, a „złoto” to jej wartość.

Podobnie „rozmiar czcionki” i „align tekstowy” są właściwościami, podczas gdy „średni” i „racja” są wartościami tych właściwości.

Przykład 1: Ten przykład zapewni dogłębny widok działania wbudowanego CSS:

Witamy w Linuxhint.com

Najlepsza strona do czytania artykułów wysokiej jakości

Powyższy skrypt zaimplementował pewien styl na pierwszym miejscu

element za pomocą wbudowanego CSS. Wyświetli następujące dane wyjściowe:

W tym przykładzie mamy tylko dwa

elementy i musimy zaimplementować styl tylko na jednym elemencie. Tak więc, ilekroć musimy stylizować kilka elementów HTML, możemy użyć wbudowanego CSS dla każdego elementu.

Ale co, jeśli mamy setki elementów HTML na stronie E.G. Mamy setkę

Dlatego kiedy będziemy musieli zaimplementować unikalny styl na całej stronie, użyjemy wewnętrznych CSS.

Przykład-2: Poniższy przykład zaimplementuje ten sam kolor tła, kolor tekstu do całego korpusu dokumentu HTML:

Witamy w Linuxhint.com

Najlepsza strona do czytania artykułów wysokiej jakości

Powyższy fragment zapewni następujące dane wyjściowe:

Co jeśli będziemy musieli stylizować więcej niż jedną strony? W takich przypadkach zostaną wdrożone zewnętrzne CSS. Tylko jeden plik może zmodyfikować cały wygląd strony internetowej. Dlatego zaleca się, aby zawsze używać zewnętrznego CSS.

Jeśli pracujesz z zewnętrznym CSS, musisz określić w Sekcja.

Przykład-3: Ten przykład utworzy plik CSS, aby zdefiniować styl. Link do tego pliku zostanie podany w sekcji Head. Zarówno pliki HTML, jak i CSS są podane:

Zewnętrzny.html

Witamy w Linuxhint.com

Najlepsza strona do czytania artykułów wysokiej jakości

Zewnętrzny.CSS

ciało
kolor tła: Brown;
Kolor: Goldenrod;
Styl czcionki: Kursywa;

H1
czarny kolor;
Text-Align: Center;

Dane wyjściowe sprawdzi, czy zewnętrzny plik CSS jest poprawnie połączony z plikiem HTML:

Zamówienie stylu kaskadowego

Teraz możesz mieć pytanie? Co jeśli użyjemy stylów CSS Inline, wewnętrznych i zewnętrznych? Następnie który z nich zostanie zaimplementowany? Który styl ma maksymalne pierwszeństwo?

Dobrze! Jeśli wystąpi konflikt w deklaracji stylu CSS, wówczas CSS zastąpi wewnętrzny CSS, który z kolei zastąpi zewnętrzny CSS. Oznacza to, że wbudowane CSS ma wyższe pierwszeństwo niż zarówno wewnętrzne, jak i zewnętrzne CSS. Domyślne style przeglądarki mają najniższe pierwszeństwo.

Jeśli różne style CSS są określone na tym samym poziomie pierwszeństwa, wówczas styl, który jest najbliżej docelowego elementu, będzie miał wyższe pierwszeństwo.

Przykład-4: Rozważmy następujący przykład, który określa wiele stylów:

Zewnętrzny.Plik CSS

ciało
kolor tła: Brown;
Kolor: Goldenrod;
Styl czcionki: Kursywa;

Precedens.Plik HTML

Witamy w Linuxhint.com

Najlepsza strona do czytania artykułów wysokiej jakości

Powyższy kod określa trzy style, które wyjście sprawdzi, czy wbudowany CSS ma najwyższe pierwszeństwo:

Zalety

1. Oszczędza dużo czasu podczas opracowywania dowolnej strony internetowej, ponieważ możemy użyć jednego pliku CSS w wielu plikach HTML. Na przykład mamy wiele plików HTML, a następnie musimy poradzić sobie z ich wyglądem, stylem itp. Zamiast wdrażać styl na każdym pliku HTML osobno, lepiej jest zaimportować plik CSS w dowolnym dokumencie HTML, który chcesz stylizować.
2. Strony internetowe ładują się szybko, ponieważ CSS nie wykorzystuje atrybutów HTML, zamiast tego tworzy tylko jedną regułę CSS dla znacznika i implementuje ją do wszystkich jego wystąpień w pliku HTML.
3. CSS zapewnia łatwą konserwację, ponieważ możemy sobie z tym poradzić w jednym pliku. Załóżmy, że mamy dziesięć akapitów w dokumencie i chcemy zmienić ich styl. Zamiast robić to dziesięć razy, możemy to zrobić raz w pliku CSS i będzie ono zastosowane do wszystkich dziesięciu wystąpień

   element.

4. CSS zapewnia zgodność. Oznacza to, że jest kompatybilny z wieloma urządzeniami.

Wniosek

CSS to język projektowy, który buduje atrakcyjne strony internetowe. Służy do tworzenia stylów i dostosowywania elementów HTML dostępnych na stronie internetowej. Poprawia prędkość witryny i zapewnia łatwe dostosowywanie każdej strony internetowej.

W tym poście dowiesz się, co to jest CSS, jak korzystać z CSS i jakie są kluczowe zalety CSS. Dodatkowo dowiesz się o kolejności kaskadowej.