Przeglądanie poziomu priorytetu stylu CSS

Kaskadowy arkusz stylów (CSS) jest, jak sądzę, najprostszym językiem w porównaniu z innymi językami związanymi z siecią, więc nie jest zaskakujące, że wielu ludzi, którzy dopiero zaczynają się uczyć, jak stworzyć stronę internetową, najpierw nauczy się tego języka.

W tym poście wrócimy do podstaw CSS. Zamierzamy sprawdzić, jak początkowo stosowane są style CSS, które style będą miały zastosowanie, jak niektóre deklaracje stylów zastępują się nawzajem, podczas gdy inne nie..

Ten post jest więc przeznaczony specjalnie dla początkujących, którzy dopiero zaczynają rozumieć wyzwania, prawdopodobnie nadal popełniają błędy i błędy podczas kompilowania pierwszego arkusza stylów. Więc zacznijmy.

Domyślne style przeglądarki

Firefox, Chrome, Safari, Opera i Internet Explorer to obecnie pięć najpopularniejszych przeglądarek na rynku. Te przeglądarki i wszystkie inne przeglądarki stosują standardową regułę, aby włączyć wbudowane style domyślne do renderowania elementów HTML.

Tak więc, gdy umieścimy kilka losowych elementów HTML bez dodanych stylów, zobaczysz, że nadal jest poprawnie renderowany w przeglądarce.

Ale jeśli dokładnie sprawdzimy ten element, każda z przeglądarek ma (nieco) różne wartości “domyślna” deklaracja, która powoduje niespójność między przeglądarkami, szczególnie w starej wersji, takiej jak IE6, 7 i Firefox 3.0.

Na przykład, jak widać na powyższym obrazku, najnowszy Firefox renderował zablokować cytat domyślnie z margines: 16px 40px 16px 40px, podczas gdy po drugiej stronie Internet Explorer 7 wyrenderuje zablokować cytat z margines: 0px 40px.

Aby przezwyciężyć przedstawione powyżej niespójności, wielu projektantów stron internetowych i programistów woli nadpisywać wszystkie te style Resetowanie CSS. Ten plik CSS zazwyczaj zawiera prawie cały HTML Rodzaj selektory, definiując je z jednakowymi regułami.

Dostępnych jest wiele resetów CSS, ale oto moje trzy najlepsze ulubione:

• Normalize.css
• Resetowanie CSS
• Arkusz stylów resetowania HTML5

Selektory

Prawdopodobnie często czytasz ten termin na blogach, które odwiedziłeś; Selektory.

Selektor w CSS jest składnią używaną do kierowania dowolnych części dokumentu HTML w celu zastosowania stylów. Istnieją trzy podstawowe selektory, które omówimy tutaj, ponieważ prawdopodobnie będą to typowe selektory używane na pierwszej stronie. Będziemy obejmować innych w przyszłych postach.

Wybór typu

Wspomnieliśmy już raz, selektor typu będzie kierował do dowolnych określonych elementów HTML w dokumencie. Na przykład:

 p / ** deklaracja ** / 

pasuje do wszystkich str albo ustęp elementy i ich użycie w końcu zastąpią domyślne style podane w przeglądarkach.

Selektor klas

Kiedy dodasz klasę lub nawet wiele klas do elementu, możesz także kierować te klasy. The Selektor klas zaczyna się od kropka parametr.

 .pole / ** deklaracja ** / 

Powyższy fragment pasuje do wszystkich elementów, które mają klasę pola, lub możemy także wybrać bardziej konkretnie.

 p.box / ** deklaracja ** / 

Będzie kierował tylko do str element, który ma pudełko klasa.

Kiedy używamy Klasa selektor, wszystkie te same style deklaracji z obu Rodzaj selektor i Domyślna przeglądarka zostanie nadpisany.

Wybór ID

The ID jest bardzo restrykcyjnym atrybutem, możemy mieć tylko jeden ID na elemencie i musi być również wyjątkowy.

 
Zawartość
 

W przypadku, gdy mamy ID w elemencie możemy użyć selektor id celować w ten element; selektor identyfikatora jest zdefiniowany za pomocą skrótu # parametr.

 #uniqueID / ** declaration ** / 

Od ID jest unikalny, ma najsilniejszy poziom priorytetu typu selektora. Tak więc, kiedy deklarujemy style za pomocą ID selektor ostatecznie zastąpi całą tę samą deklarację z Klasa, Rodzaj selektory i Domyślna przeglądarka style.

Osadzanie stylów

Przeszliśmy przez wszystkie podstawowe selektory podstawowe, a teraz przyjrzymy się, jak te style są osadzone w dokumencie HTML.

Style zewnętrzne

Style zewnętrzne to style dodawane w osobnym pliku, zwykle w formacie .css plik, który następnie jest połączony z dokumentem HTML za pomocą znacznik, aby zastosować te style.

I wszystkie style zadeklarowane w plikach będą zachowywać się tak, jak wspomnieliśmy w Selektory sekcja powyżej, a mianowicie będzie głównie nadpisywać domyślna przeglądarka styl i nadpisać do innej deklaracji stylu w zależności od poziomu priorytetu selektorów.

Ta praktyka jest najbardziej zalecanym sposobem dołączania stylów, zwłaszcza gdy masz tysiące linii kodów CSS z wieloma stronami do dołączenia.

W ten sposób style będą również łatwe do zarządzania, na przykład można oddzielić pliki CSS na kilka plików w zależności od ich określonej roli, takich jak typografia.css, aby kontrolować wszystkie style związane z typografią i tak dalej.

Style wewnętrzne

Style wewnętrzne to style osadzone bezpośrednio w dokumencie HTML, zazwyczaj wewnątrz etykietka.

Ale ta praktyka nie jest zalecana, gdy będziesz mieć setki linii stylów, ponieważ strona HTML będzie zbyt długa, a styl wpłynie tylko na osadzenie stylów. Kiedy powiesz dziesięć stron, będziesz musiał skopiować te style i osadzić je na wszystkich stronach, a kiedy musisz zmienić style, musisz zmienić je na dziesięć różnych stron, co jest oczywiście żmudnym zadaniem.

W zależności od poziomu priorytetu styl wewnętrzny jest wyższy, więc nadpisuje style zewnętrzne.

Style liniowe

Style wbudowane to style bezpośrednio osadzone w elemencie HTML.

 
To jest akapit
 

Powyższy przykład doda 5px margines do elementu akapitu, a także nadpisze marginesy zadeklarowane dla tego elementu zarówno w stylach wewnętrznych, jak i zewnętrznych.

Ale unikaj tego, ponieważ twoje znaczniki będą zaśmiecone wszystkimi tymi deklaracjami stylu; jeśli masz kilka stylów osadzonych, stanie się nawet koszmarem, aby zobaczyć i utrzymać wszystkie swoje HTML i style.

Dalsze czytanie: Trzy sposoby wstawiania CSS - W3CSchools.

Ważna reguła

Istnieją pewne okoliczności, w których musimy zastosować konkretny styl dla elementu, ale ten sam styl dla tego elementu został także zadeklarowany w innym miejscu arkusza stylów lub w dokumencie. Na przykład:

Mamy następujący znacznik zakotwiczenia z osadzonymi stylami

 To jest link 

Mamy też osobny styl dla tego znacznika zakotwiczenia w arkuszu stylów.

 a border: 1px solid # 333; kolor tła: # 555;  

W tym przykładzie możemy użyć !ważny reguła wymuszająca na przeglądarce używanie stylów w arkuszu stylów zamiast tego w elemencie.

 a border: 1px solid # 333! important; background-color: # 555! ważne;  

The !ważny zasada wskazuje, że ten styl jest najbardziej ważny i musi być zastosowany do innego stylu, nawet jeśli jest bezpośrednio osadzony w elemencie (Style wbudowane).

Dalsze czytanie:! ważne deklaracje CSS: jak i kiedy z nich korzystać - Smashing Magazine.

Wniosek

Przeszliśmy przez cały temat w tym artykule. Widzimy teraz, że każdy selektor i sposób osadzania stylów mają różne poziomy priorytetu w mechanizmie przeglądarki. Jak wspomniałem wcześniej, tematy te są przeznaczone dla początkujących użytkowników, więc zdecydowanie nie są czymś nowym dla doświadczonych projektantów stron internetowych.

Ale myślę, że każdy projektant stron internetowych ogólnie zgodzi się, że powrót do podstaw jest czasami konieczny, aby przejrzeć naszą podstawową wiedzę na dany temat. W rzeczywistości często brakuje nam niektórych podstawowych rzeczy, ponieważ jesteśmy bardziej pod wrażeniem niesamowitych (i szalonych) rzeczy takich jak ten.

Na koniec udostępniłem plik demo i plik źródłowy, abyś mógł dokładniej przyjrzeć się naszej dyskusji w tym artykule.

• Próbny
• Pobierz źródło

Mam nadzieję, że spodoba Ci się ten post, a jeśli zauważysz jakieś nieścisłości lub przegapiłem kilka ważnych punktów, nie wahaj się powiadomić mnie w sekcji komentarzy poniżej.