Wprowadzenie do CSS

Potrzebne podstawy

Przed kontynuowaniem nauki, musisz mieć podstawową wiedzę na temat

  • HTML
  • XHTML

Jeśli chcesz najpierw nauczyć się tych projektów, proszę Strona główna Odwiedź związane tutorialy.

Przegląd CSS

  • CSS oznacza kaskadowe style CSS (Cascading Style Sheets)
  • Definicje styluJak wyświetlać Elementy HTML
  • Styl jest zazwyczaj przechowywany wKarty styluW
  • Dodanie stylów do HTML 4.0 miało na celuRozwiązuje problem oddzielenia treści od prezentacji
  • Zewnętrzny arkusz stylówMożna znacznie podnieść efektywność pracy
  • Zewnętrzne karty stylu są zazwyczaj przechowywane w Pliki CSSW
  • Wiele definicji stylów możeKaskadowyJednym

Styl rozwiązuje powszechny problem

Znaczniki HTML pierwotnie były projektowane do definiowania treści dokumentu. Dzięki użyciu takich znaczników jak <h1>, <p>, <table>, HTML miało na celu wyrażenie informacji takich jak „to jest tytuł”, „to jest akapit”, „to jest tabela”. W tym samym czasie układ dokumentu był wykonywany przez przeglądarkę, bez użycia jakichkolwiek znaczników formatujących.

Ponieważ dwa główne przeglądarki (Netscape i Internet Explorer) nieustannie dodają nowe znaczniki HTML i atrybuty (np. znaczniki font i atrybuty koloru) do specyfikacji HTML, tworzenie stron internetowych z treścią niezależną od warstwy prezentacji staje się coraz trudniejsze

Aby rozwiązać ten problem, World Wide Web Consortium (W3C), ta niekomercyjna liga standaryzacyjna, podjęła misję standaryzacji HTML i opracowała (Style) poza HTML 4.0

Wszystkie główne przeglądarki wspierają kaskadowe style CSS

Karty stylu znacznie podnoszą efektywność pracy

Karty stylu definiują sposób wyświetlania elementów HTML, podobnie jak to, co robiły znaczniki font i atrybuty koloru w HTML 3.2. Styl通常是 przechowywany w zewnętrznych plikach .css. Edycja prostego dokumentu CSS daje możliwość jednoczesnej zmiany układu i wyglądu wszystkich stron w witrynie.

Dzięki możliwości jednoczesnego kontrolowania stylu i układu wielu stron, CSS można uznać za przełom w dziedzinie projektowania WWW. Jako deweloper strony internetowej, możesz zdefiniować styl dla każdego elementu HTML i zastosować go na dowolnej liczbie stron. W celu globalnej aktualizacji wystarczy po prostu zmienić styl, a wszystkie elementy na stronie będą automatycznie aktualizowane.

Wielokrotne style są kaskadowo łączone w jeden

Arkusze stylów pozwalają na określenie stylów na różne sposoby. Style mogą być określone dla pojedynczego elementu HTML, w głównym elemencie strony HTML lub w zewnętrznym pliku CSS. Można również odnosić się do wielu zewnętrznych arkuszy stylów w jednym dokumencie HTML.

Kolejność kaskadowa

Kiedy ten sam element HTML jest zdefiniowany przez więcej niż jeden styl, który styl zostanie użyty?

W ogólnym przypadku, wszystkie style są nakładane na nowy wirtualny arkusz stylów zgodnie z poniższymi zasadami, gdzie liczba 4 ma najwyższy priorytet.

  1. Domyślne ustawienia przeglądarki
  2. Zewnętrzny arkusz stylów
  3. Wewnętrzny arkusz stylów (zlokalizowany wewnątrz tagu <head>)
  4. Styl wewnętrzny (wewnątrz elementu HTML)

Styl wewnętrzny (wewnątrz elementu HTML) ma najwyższą priorytet, co oznacza, że ma pierwszeństwo nad poniższymi deklaracjami stylu: deklaracjami w tagu <head>, deklaracjami w zewnętrznych arkuszach stylów lub deklaracjami w przeglądarce (domyślna wartość).