Zagnieżdżone reguły. Zasady konstruowania dokumentów HTML Zasady HTML ogólne zasady rodzinne 2

Witam, drodzy czytelnicy bloga. Dziś proponuję kontynuować rozmowę, którą rozpoczęliśmy w powyższym artykule. Jeszcze wcześniej zapoznaliśmy się z tym, czym są kaskadowe arkusze stylów, dowiedzieliśmy się, co oznaczają i wiele więcej.

Wszystkie materiały dotyczące kaskadowych arkuszy stylów, które zostały już opublikowane na tym blogu, można znaleźć w. Dzisiaj najpierw porozmawiamy o tym, jak można łączyć i grupować selektory, a następnie szczegółowo przyjrzymy się regułom, które obowiązują dla tego samego elementu w kodzie HTML (Ważne, liczenie selektorów i pisanie reguł w atrybucie style).

Kombinacje i grupowanie selektorów w CSS

Tak więc w poprzednich artykułach udało nam się rozważyć 7 typów:

Z tych siedmiu możliwych widoków możesz tworzyć kombinacje w CSS. Wszystkie kombinacje, które wykonamy, są bezpośrednio powiązane (przodkowie - potomkowie, rodzice - dzieci, bracia - siostry).

Pierwszy rodzaj kombinacji nazywa się selektor kontekstu. Uwzględnia powiązania elementów kodu HTML zgodnie z zasadą „Przodek - Potomek”:

Oddzielny selektory w kombinacjach są zapisywane oddzielone spacją i należy go czytać od prawej do lewej. To. Reguły CSS będą miały zastosowanie tylko do ostatniej z tej kombinacji (najbardziej na prawo), a wszystko, co jest przed nią, pozwala nam jedynie określić bardziej precyzyjne zastosowanie (targetowanie) naszych reguł (podkreślenie).

Pierwszy przykład stwierdza, że ​​wszystkie elementy B (pogrubione), których przodkami są elementy Div, zostaną oznaczone kolorem zielonym.

W powyższym kodzie tylko podkreślony fragment zostanie zaznaczony kolorem zielonym, ponieważ wśród jego przodków znajduje się Div, a drugi fragment kodu, zaznaczony znacznikami B, pozostanie w kolorze, który jest dla niego domyślnie wybrany, ponieważ kontenera Div nie ma już wśród swoich przodków (tylko P i Body):

Takie kombinacje działają w dowolnej przeglądarce.

Następnym rodzajem kombinacji byłoby selektor dziecka, który zbudowany jest na zasadach relacji pomiędzy elementami kodu typu „Rodzic – Dziecko”:

Zapisuje się je z odstępem bardziej znajomy (>):

Wpis ten będzie interpretowany przez przeglądarkę w następujący sposób: for , którego „rodzic” (najbliższy przodek), którego jest kontener Div, zostanie podświetlony na czerwono.

W powyższym przykładzie tylko obrysowane akapity zostaną pokolorowane na czerwono, ponieważ są zamknięte bezpośrednio w kontenerze Div, który jest ich rodzicem (najbliższym przodkiem). Jeśli zmodyfikujesz powyższy przykład selektora podrzędnego, aby wyglądał następująco:

Korpus > p (kolor:czerwony)

Wtedy na czerwono zostanie podświetlony tylko ostatni akapit, bo... jego rodzicem jest znacznik Body, a pierwsze dwa akapity pozostaną w domyślnym kolorze (Body jest ich rodzicem, ale nie ich rodzicem, czyli Div). Selektory podrzędne nie działają w przeglądarce Ie 6.

Jak i dlaczego selektory są pogrupowane w kodzie CSS

Ostatnia kombinacja nazywa się sąsiadujące selektory i spełnia zasady powiązań pomiędzy elementami kodu HTML typu „Siostry - Bracia”. Mogą używać „+” lub „~” jako separatora:

Ten wpis oznacza, że ​​zawartość elementu I (kursywa) zostanie oznaczona kolorem czerwonym tylko wtedy, gdy jego najbliższym sąsiadem po lewej stronie (na górze kodu) jest element B (pogrubiony). Na przykład warunek ten zostanie spełniony w tym przykładzie:

Jeśli napiszesz sąsiedni selektor w kodzie CSS w następujący sposób:

H1 ~ p (kolor:czerwony)

Będzie to oznaczać, że wszystkie akapity (P), których sąsiadujący element H1 (nagłówek) znajduje się wyżej w kodzie, zostaną oznaczone kolorem czerwonym. Dotyczy to zwłaszcza elementów sąsiadujących (relacje typu „siostry – bracia”). W poniższym przykładzie podany selektor zostanie dopasowany do zakreślonych akapitów:

Kombinacje sąsiednich selektorów w przeglądarce Ie 6 również niestety nie są obsługiwane. W Ie 6 obsługiwany jest tylko pierwszy typ kombinacji, ale w Ie 7 i wyższych obsługiwane są wszystkie pozostałe. W innych przeglądarkach nie powinno być problemów.

Selektory w CSS możesz także grupować. Przykładowo, jeśli część z nich wykorzystuje jedną lub więcej identycznych reguł, wówczas można je połączyć w grupę, aby zmniejszyć ilość kodu CSS.

W przykładzie pokazanym na zrzucie ekranu jest to powtarzane dla każdego selektora nagłówka (h1-3), co może powodować komplikacje (wielokrotna praca) w przypadku chęci zmiany wartości tej właściwości. Dlatego druga opcja wpisu grupowego wygląda nieco lepiej.

Należy o tym pamiętać podczas grupowania selektory są zapisywane oddzielone przecinkami. Jeśli identycznych reguł będzie więcej, wówczas oszczędności w kodzie będą bardziej zauważalne. A te zasady, które były wyjątkowe, nadal muszą zostać spisane indywidualnie.

Priorytety właściwości CSS (z ważnymi i bez nich)

Zastanówmy się teraz, jakiego stylu będzie używać przeglądarka, jeśli dla tego elementu kodu HTML nie określono żadnych stylów? I do tego istnieje odpowiednia specyfikacja, w której wszystko to jest opisane.

Jak widać, nastąpiło ostateczne rozdzielenie HTML i CSS. Te. nawet w przypadku czystego kodu HTML przeglądarka nadal będzie używać domyślnych właściwości arkuszy stylów. Oto domyślne właściwości: mają najniższy priorytet.

Wyższy priorytet mają właściwości, które użytkownik przypisuje w ustawieniach swojej przeglądarki. Style te zostaną zastosowane do wszystkich dokumentów wyświetlanych w tej przeglądarce.

To prawda, że ​​​​nie wszystkie przeglądarki mają tę funkcję, ale przynajmniej Ie i Opera ją mają. Te. W razie potrzeby użytkownik będzie mógł dołączyć własny plik CSS jako źródło znaczników stylu.

Na przykład, aby to zrobić, należy wybrać „Narzędzia” - „Opcje internetowe” z prawego górnego menu, a następnie na pierwszej karcie „Ogólne” kliknąć dolny przycisk „Wygląd”. W oknie, które zostanie otwarte, zaznacz pole „Projektuj przy użyciu niestandardowego stylu” i użyj przycisku „Przeglądaj”, aby znaleźć potrzebny plik znaczników stylu CSS na swoim komputerze:

Te. użytkownik ma możliwość, aby każda strona otwierana w przeglądarce wyglądała zgodnie z jego wymaganiami opisanymi w pliku CSS. Nazywa się to „styl niestandardowy” i mają pierwszeństwo przed stylami zdefiniowanymi w specyfikacji domyślnej. Ale jeszcze większy priorytet będą miały tzw. style autorskie.

Oznacza to, że jeśli ja (twórca witryny) chciałem użyć stylów innych niż domyślne w projekcie dowolnego elementu kodu HTML (pamiętaj, że są one opisane w specyfikacji), to użytkownik nie będzie mógł zastąpić mojego projektu za pomocą jego własny plik CSS.

Czy użytkownik będzie zmuszony to zaakceptować? NIE. Ma taką możliwość Zwiększ priorytet swoich właściwości CSS, dodając Ważne na końcu każdego z nich. To słowo jest pisane oddzielone spacją i poprzedzone wykrzyknikiem:

P (kolor:czerwony !ważne;)

Jeśli użytkownik ma tę samą właściwość z plikiem Ważne w swoim własnym stylu, który podłączył do przeglądarki, wówczas wszystkie akapity będą mu wyświetlane na czerwono. Ale autor (programista) witryny może również użyć Ważne dla tej właściwości. Kto wówczas zwycięży i ​​czyj priorytet będzie wyższy?

Zdecydowaliśmy o tym niestandardowe style za pomocą Ważne w każdym razie będą miały wyższy priorytet niż style autora, niezależnie od tego, czy mają opcję Ważne, czy nie.

Podsumujmy w formie listy wszystkie przedstawione informacje dotyczące priorytetów właściwości stylu. Priorytet będzie zmniejszał się od góry do dołu:

1. Niestandardowe z ważnym
2. Prawa autorskie z Ważne
3. Prawo autorskie
4. Zwyczaj
5. Style akceptowane domyślnie dla elementów HTML w specyfikacji (jeżeli ani autor, ani użytkownik nie określili niczego innego)

Te. bez Ważne, style autora są ważniejsze, a wraz z nimi style użytkownika są najważniejsze i priorytetowe. No cóż, zajmijmy się teraz tabelami autora, bo to, co robi użytkownik, jest nam nieznane i spowijane jest ciemnością.

Jak zwiększyć priorytety właściwości CSS w stylach autorskich

To teraz przechodzimy do pytania kaskadowe arkusze stylów CSS. Spójrzmy na to na przykładzie, aby było to jaśniejsze. Załóżmy, że mamy fragment kodu zawierający następujące elementy HTML (akapit w kontenerze Div):

Najpierw zapiszmy następujące właściwości:

P (kolor:czerwony) .sbox (tło:#f0f0f0)

W rezultacie zarówno pierwsza z nich zostanie zastosowana do akapitu (ponieważ jest tworzony przez znacznik P), jak i właściwość ustawiająca szare tło dla elementu z klasą „sbox”, którą ponownie ma ten akapit:

Dodajmy teraz jeszcze jedną właściwość do drugiego selektora (klasy), co będzie kolidować z pierwszą linią (oba ustawiają, ale używają różnych wartości):

P (kolor:czerwony) .sbox (tło:#f0f0f0;kolor:niebieski)

Spowoduje to zmianę koloru tekstu akapitu na niebieski, a nie czerwony.

Dlaczego? Bo tak właśnie rozwiązuje się konflikt, gdy ten sam element kodu HTML otrzymuje na raz kilka identycznych reguł, ale o różnych wartościach i z różnych miejsc w kodzie CSS. Aby określić, która reguła ma wyższy priorytet, należy policzyć jej selektory.

Poza tym siebie selektory mają stopniowanie według priorytetów. Identyfikator ma najwyższy priorytet. W tym przykładzie kolor tekstu będzie niebieski właśnie dlatego, że priorytet identyfikatora (#out) będzie wyższy niż selektora znacznika (p):

P (kolor:czerwony) #out (kolor:niebieski)

W dalszej części drabiny priorytetów znajdują się selektory klas, pseudoklas i atrybutów. W poniższym przykładzie tag (p) zostanie odtworzony ponownie, a kolor tekstu akapitu będzie niebieski, ponieważ konkuruje z selektorem o wyższym priorytecie (klasie):

P (kolor:czerwony) .sbox (kolor:niebieski)

Otóż ​​najniższy priorytet (nie licząc uniwersalnego *, który ma najniższą wagę i nie wprowadza żadnych zmian w takim łączeniu) mają selektory tagów i pseudoelementów.

Div p (kolor:czerwony) p (kolor:niebieski)

Jakiego koloru będzie wynikowy tekst akapitu? Zgadza się, jest czerwony, bo... Ta właściwość ma więcej selektorów znaczników (dwa w porównaniu z jednym). Oh jak. Te. Identyfikatory są brane pod uwagę w pierwszej kolejności. Jeśli zwycięzca nie zostanie zidentyfikowany, pod uwagę brane będą klasy, pseudoklasy i atrybuty. Cóż, jeśli nic tam nie zostało rozwiązane lub nie znaleziono takich, wówczas rozważane są selektory tagów i pseudoelementów.

Jest jednak całkiem możliwe, że zwycięzca nie wyłoni się, a selekcjonerzy konkurujących klas będą mieli w sumie równe pierwszeństwo. Na przykład dla naszego akapitu o wielkodusznej cierpliwości zamkniętego w kontenerze Div:

Całkiem możliwe byłoby napisanie takiego fragmentu kodu CSS:

Div.box #out(kolor:czerwony) #in p.sbox(kolor:niebieski)

A jakiego koloru powinien być tekst akapitu? Obie kombinacje dokładnie opisują nasz akapit. Pierwszy należy jak zwykle czytać od prawej do lewej: zastosuj te właściwości (kolor: czerwony) do elementu o identyfikatorze #out, który znajduje się gdzieś w środku (miej go wśród „przodków”) kontenera Div z class.box (div.box ). Całkowicie pasuje do naszego akapitu.

Druga kombinacja: zastosuj te właściwości (kolor:niebieski) do elementu akapitu z klasą sbox (p.sbox), który znajduje się wewnątrz dowolnego elementu o identyfikatorze #in. Ponownie całkowicie opisuje nasz akapit. Policzmy selektory.

Identyfikatory występują raz w obu kombinacjach i to samo można powiedzieć o klasach. Pozostaje tylko policzyć selektory tagów, ale są one również użyte tyle samo razy w obu kombinacjach (jednej). Zasadzka.

Mamy to równe priorytety ta sama właściwość ma różne wartości (kolor tekstu czerwony lub niebieski). Jak przeglądarka rozwiąże ten dylemat?

Tutaj będzie obowiązywać zasada - kto jest ostatni, On ma rację. Dlatego w moim przykładzie kolor tekstu akapitu będzie niebieski, ponieważ ta właściwość (kolor:niebieski) znajduje się niżej w kodzie. Jeśli te zasady zostaną odwrócone:

#in p.sbox(kolor:niebieski) div.box #out(kolor:czerwony)

W rezultacie kolor tekstu akapitu zmieni się na czerwony. co było do okazania Do dowolnej kombinacji możesz dodać np. kolejny selektor tagów, a my przechylimy szalę na jego korzyść, nawet jeśli nie będzie on niższy w kodzie:

Treść #w p.sbox(kolor:niebieski) div.box #out(kolor:czerwony)

W takim przypadku kolor akapitu zmieni się na niebieski. Uniwersalny selektor „*” nie ma żadnego wpływu na obliczanie priorytetów. Nawiasem mówiąc, tuż powyżej przyjrzeliśmy się sposobowi zwiększenia priorytetu reguł CSS poprzez dodanie Ważne. W naszym przykładzie może to wyglądać tak:

P (kolor:zielony!ważne) #in p.sbox(kolor:niebieski) div.box #out(kolor:czerwony)

Jakiego koloru będzie tekst akapitu w tym przypadku? Oczywiście, zielony. I nie musisz nawet niczego liczyć, bo dodanie Ważne do właściwości style jednoznacznie rozwiązuje ten kontrowersyjny problem, niezależnie od tego, gdzie się ona znajduje w kodzie i bez względu na liczbę selektorów.

Ale Ważny nie jest jedynym sposobem bezwarunkowego zwiększenia priorytetu właściwości. Drugim sposobem na zwiększenie może być użycie stylu właściwości w atrybucie Styl potrzebny element HTML.

Te. wewnątrz tego samego, cierpliwego tagu P, dodaj atrybut Styl określający dowolny kolor:

Otóż ​​to. Teraz, niezależnie od tego, jakie właściwości są określone dla tego elementu w zewnętrznym pliku arkusza stylów lub wewnątrz znaczników kodu Style HTML, kolor tekstu akapitowego będzie żółty.

Ale nie będzie w stanie pokonać właściwości za pomocą Ważnego. Te. w ostatnim przykładzie, gdzie dodaliśmy regułę „p (kolor:zielony !ważne)”, kolor tekstu nadal będzie zielony, mimo że style="kolor:żółty".

Tak naprawdę priorytet obu reguł (z Ważne w zewnętrznym pliku arkusza stylów i w atrybucie style) jest równy, co oznacza, że ​​musimy przystąpić do liczenia selektorów. Czy naprawdę mogą znajdować się w atrybucie stylu?

Tak, nie może być żadnych, co oznacza, że ​​reguła zapisana w atrybucie style zawsze będzie przegrać z regułą z Ważną tylko ze względu na mniejszą liczbę selektorów (zero będzie mniejsze od dowolnej liczby).

No i co wtedy? nada najwyższy priorytet właściwości CSS? Zgadza się, zostanie to zapisane w atrybucie style, a nawet z Ważne:

W takim przypadku kolor tekstu akapitowego będzie żółty i nie będzie można go przerwać niczym w stylistyce autora. Znaleźliśmy absolutny sposób na ustalanie stylów. Może je przerwać jedynie użytkownik posiadający własny plik stylu i określoną w tym celu właściwość Ważne.

Spróbujmy więc komponować lista czynników wpływających na priorytet właściwości w stylach autora w kolejności malejącej:

1. Określenie właściwości w atrybucie style żądanego znacznika wraz z Ważne
2. Dodanie Ważne do właściwości w zewnętrznym pliku arkusza stylów lub w znaczniku stylu bezpośrednio w kodzie HTML
3. W elemencie potrzebne jest proste ustawienie tej właściwości w atrybucie style
4. Użycie większej liczby identyfikatorów dla danej właściwości
5. Używanie większej liczby selektorów klas, pseudoklas lub atrybutów
6. Używanie większej liczby selektorów tagów i pseudoelementów
7. Niższe rozmieszczenie właściwości w kodzie CSS, przy wszystkich pozostałych czynnikach bez zmian

Tak naprawdę reguły w atrybucie style są używane bardzo rzadko (wyobraź sobie, jak trudno byłoby w tym przypadku wprowadzić zmiany w całym kodzie witryny, a nie w osobnym pliku CSS).

Atrybut ten jest używany głównie wtedy, gdy trzeba coś szybko przetestować. Cóż, jest to również wygodne, jeśli wstawisz swój kod na strony HTML innych osób, które mają swój własny styl i które mogą być dziedziczone () dla wstawianych elementów.

Po co i jak wstawiać swój kod na stronach innych osób? Być może nie będziemy musieli tego robić, ale Yandex i Google robią to w witrynach innych osób (naszych witrynach) lub w nich.

Dodając atrybut style do wszystkich elementów kodu bloku reklam, z określonymi w nim właściwościami i dodaną wartością Ważne, nie musisz się już martwić o jakąkolwiek zmianę kodu reklamy (chociaż reklamy Yandex nadal można zmieniać za pomocą CSS i Ważne, najwyraźniej nie stosowali tej metody).

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz być zainteresowany

Selektory tagów, klas, identyfikatorów i uniwersalnych oraz selektory atrybutów we współczesnym CSS
Selektory pseudoklas i pseudoelementów w CSS (hover, First-child, First-line i inne), relacje pomiędzy znacznikami kodu HTML
Styl listy (typ, obraz, pozycja) - reguły CSS umożliwiające dostosowanie wyglądu list w kodzie HTML
Do czego służy CSS, jak połączyć kaskadowe arkusze stylów z dokumentem HTML i podstawowa składnia tego języka
CSS - co to jest, jak kaskadowe arkusze stylów są łączone z kodem HTML za pomocą Style i Link
Jednostki wymiarowe (piksele, Em i Ex) oraz zasady dziedziczenia w CSS
Tło w CSS (kolor, pozycja, obraz, powtórzenie, załącznik) - wszystko do ustawienia koloru tła lub obrazu tła elementów HTML
Jak znaleźć i usunąć nieużywane linie stylu (dodatkowe selektory) w pliku CSS swojej witryny Różne style linków wewnętrznych i zewnętrznych poprzez CSS

Zasady są częścią naszego świata i nieustannie kierują naszymi codziennymi działaniami. Niemal w każdej dziedzinie naszego życia obowiązują zasady – zasady zachowania, zasady etykiety, zasady przekraczania ulicy – ​​lista może nie mieć końca.

Jakie są zasady? Jest to zestaw instrukcji, których należy przestrzegać lub których należy przestrzegać. Istnieje wiele angielskich słów, które sugerują zasady lub odnoszą się do zasad:

• Przestrogi – ostrzeżenie
• Przykazania – porządek, nakaz
• Wskazówki - instrukcje
• Ostrzeżenia - ostrzeżenie
• Przewodniki
• Wytyczne
• Instrukcje - instrukcje
• Prawa - prawa
• Zasady - ustawienia
• Procedury
• Regulamin - zasady
• Ostrzeżenia - ostrzeżenia

Krótki kod Google

Zasady dotykają nas każdego dnia i trudno ich ominąć nawet w najprostszych miejscach, nawet gdy idziemy ulicą, nie sposób przeoczyć wszystkich znaków umieszczonych wokół nas, ostrzegających i wskazujących zasady, których należy przestrzegać. Najprostszym sposobem wyjaśnienia reguły jest spisanie jej w książce lub umieszczenie znaków widocznych dla każdego. Oto kilka zasad wywieszonych w formie znaków, które często możemy zobaczyć na ulicach i w miejscach publicznych, zwanych znakami ostrzegawczymi.

• zakaz jazdy na rowerze – nie można jeździć na rowerze
• brak wjazdu – zakaz wstępu
• zakaz jazdy na łyżwach - nie można jeździć na rolkach
• uważaj na nadjeżdżające rowery - uważaj na nadjeżdżające rowery
• Zachowaj odstęp = nie blokuj tego obszaru – nie zajmuj tego obszaru
• nie możesz tu napełnić kanistrów z gazem - nie możesz napełnić butli z gazem
• trucizna = nie jedz – trucizna = nie możesz jeść
• zakaz palenia - zakaz palenia
• uważajcie na ludzi przechodzących przez jezdnię - bądźcie ostrożni, piesi
• zakaz parkowania – parkowanie jest zabronione
• nie wyrzucaj śmieci - nie wyrzucaj śmieci
• dzieci nie są akceptowane – dzieci nie są akceptowane
• zakaz fotografowania – fotografowanie jest zabronione
• sprzątaj po swoim psie – sprzątaj po swoim psie
• niebezpieczeństwo śmierci – niebezpieczeństwo, w pobliżu prąd wysokiego napięcia – niebezpiecznie! – niebezpieczne, wysokie napięcie
• nie wolno pluć – nie można pluć

Jak widać wokół nas panuje mnóstwo zasad i trzeba ich przestrzegać, chociaż trzeba powiedzieć, że czasami ludzie nie przestrzegają zasad, łamią zasady, bądź łamią zasady. zasady), czasami są „łapani” i karani (są karani). Jeśli złamiesz regulamin, możesz zostać zmuszony do zapłaty pieniędzy, tj. grzywna/kara lub coś gorszego może zmusić Cię do stawienia się na komisariacie.

Czy kiedykolwiek złamałeś zasady? Ludzie, którzy zawsze przestrzegają zasad, nazywani są „przestrzegającymi prawa”, a ludzie, którzy łamią zasady, nazywani są „łamaczami prawa”.

Na koniec życzymy Wam „bądźcie dobrzy!” , „przestrzegaj zasad!”, „trzymaj się z dala od kłopotów!”

Jak napisać poprawny kod CSS?

Bez znajomości podstaw nie da się ruszyć do przodu. Co więcej, te podstawy muszą zostać przeszkolone do poziomu podświadomości. Musisz znać na pamięć wszystkie zasady pisania czystego, zrozumiałego kodu i stosować je wszędzie. Zacznij od obecnego lub co najwyżej kolejnego projektu. To będzie Twoja Biblia CSS

Poniżej znajdziesz 15 złotych zasad pisania przyjaznego i profesjonalnego kodu CSS

1) Użyj resetowania CSS

Reset CSS- jest to pewien fragment kodu zapisany na początku naszego pliku stylów, w którym resetowane są wszystkie wartości i ustawiane są wszystkie podstawowe parametry dla wszystkich stylów, które najprawdopodobniej musielibyśmy napisać dla każdego konkretnego identyfikatora /klasa. Pozwala to na późniejsze skrócenie kodu, a także uniknięcie różnic w wyświetlaniu pomiędzy przeglądarkami.

Oto przykład CSS-Reset pobrany z http://meyerweb.com/eric/tools/css/reset/index.html

/* wersja 1.0 | 20080212 */ html, body, div, span, aplet, obiekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronim, adres, duży, cite, code, del , dfn, em, czcionka, img, ins, kbd, q, s, samp, mały, strajk, silny, sub, sup, tt, var, b, u, ja, centrum, dl, dt, dd, ol, ul , li, zestaw pól, formularz, etykieta, legenda, tabela, podpis, tbody, tfoot, thead, tr, th, td ( margines: 0; dopełnienie: 0; obramowanie: 0; kontur: 0; rozmiar czcionki: 100%; Vertical-align: baseline; tło: przezroczysty; ) body ( line-height: 1; ) ol, ul ( styl listy: brak; ) blockquote, q ( cudzysłowy: brak; ) blockquote:przed, blockquote:po, q: before, q:after ( content: ""; content: none; ) /* pamiętaj o zdefiniowaniu stylów fokusu! */:focus ( kontur: 0; ) /* pamiętaj, aby jakoś wyróżnić wstawki! */ ins ( dekoracja tekstu: brak; ) del ( dekoracja tekstu: przejście przez linię; ) /* tabele nadal wymagają w znaczniku „cellspacing="0"" */ table ( border-collapse: zwiń; border-spacing : 0; )

2) Używaj skrótów

Na przykład, aby napisać długo

Obramowanie u góry: 5 pikseli; obramowanie po prawej: 10px; obramowanie na dole: 15px; obramowanie po lewej stronie: 20px;

możemy krótko napisać:

Obramowanie: 5 pikseli 10 pikseli 15 pikseli 20 pikseli;

to znaczy zgodnie z ruchem wskazówek zegara, zaczynając od góry.

Głównie skrócone obramowanie, margines, dopełnienie, czcionka i tło.

Możesz zobaczyć więcej na ten temat

Ale kolory można zmniejszyć w ten sposób:

Jeśli kod koloru składa się z 3 powtarzających się cyfr, możesz po prostu zapisać te trzy cyfry.
Na przykład: #FFFFFF można zapisać jako #FFF lub #990055 można zapisać jako #905, ale #F091A4 nie można skracać.

3) Korzystaj z komentarzy

Używaj komentarzy tam, gdzie trzeba - naprawdę pomagają uporządkować kod, czyniąc go bardziej zrozumiałym dla siebie i dla tych, którzy będą z nim pracować

Wygląda to mniej więcej tak:

/* Tutaj Twój komentarz */

Komentarz:

a) Tytuł strony stylu - napisz, kto jest autorem kodu i kiedy został napisany

b) Zaznacz sekcje stylu — to uporządkuje cały kod w sekcje.
Na przykład:

/**************************************************/ /* Pasek boczny */ /** **************************************/

c) Komentuj obszary problematyczne. Na przykład takie, w których strona może różnić się w różnych przeglądarkach.Na przykład:

Wejście /* Problem z IE6 */

d) Napisz drobne uwagi do osób, z którymi współpracujesz – na przykład, gdy coś wymaga poprawy.

4) Dodaj Legendę Kwiatową

Dzięki małym plikom CSS śledzenie wszystkich kolorów witryny nie jest trudne.
A co jeśli mamy 5000 linii kodu? - nie można pozwolić na użycie niewłaściwych kolorów.
W tym celu istnieje legenda kolorów – czyli lista kolorów, których używamy w naszym pliku. Na przykład:

/* /* jasnoniebieski: #4595be /* ciemnoniebieski: #367595 /* czerwony dla linków: #9F1212 ************************** ******/

5) Pamiętaj, czym są Position:realtive i Position:absolute

Większość początkujących projektantów układu jest zdezorientowana tymi pojęciami, ale istnieje zasada, która pozwala uniknąć nieporozumień.

Pozycja: absolutna pozycjonuje obiekt względem strony - i nie ma znaczenia, gdzie się on znajduje w strumieniu HTML. Wartość domyślna to 0 po lewej stronie i 0 u góry.

Zwykle tej opcji nie stosuje się, gdyż jest niewygodna i ma ograniczone możliwości. Ale przydatne będzie dla ciebie to, że jeśli ustawisz rodzica („opakowanie”) naszego elementu na Position: realtive, to Position: Absolute zostanie już wyrównane Względem lewego górnego rogu elementu nadrzędnego. Możesz więc dodać tę właściwość w razie potrzeby. Wyraźnie na zdjęciu:

6) Unikaj używania hacków

Czasami przeglądarki takie jak IE6 i IE7 po prostu zmuszają nas do korzystania z hacków. Khaki jest natychmiastowym błędem walidatora. Umieść go więc w specjalnych plikach CSS dla każdej przeglądarki.
Możesz zobaczyć specjalne wpisy dotyczące hacków dla każdej przeglądarki i sposobu umieszczania ich w osobnych plikach

7) Użyj marginesów w opisach lokalizacji

Nie jest to coś, co jest zauważane zbyt często, ale pomaga uniknąć problemów w różnych przeglądarkach.

Pomysł jest taki: zamiast używać dopełnienia dla elementu nadrzędnego, używamy marginesu dla elementów podrzędnych. Więc zamiast

#main-content ( dopełnienie po lewej stronie: 10px )

#main-content ( ) #main-content #left-column ( margines-lewy: 10px )

Nie ma nic złego w stosowaniu dopełnienia, ale doświadczenie pokazuje, że margines jest lepszy

8) Używaj pływaków

Jeśli chcesz przypisać float do elementu, napisz do jego rodzica przepełnienie: ukryte

Ul ( przepełnienie: ukryte; ) ul li ( pływak: lewy; )

Bez tej właściwości element może przebiegać nieatrakcyjnie, mogą pojawić się także problemy z ustawieniem marginesów czy obramowań.

Jeśli chcesz, żeby element nie płynął - określ oba czyste poniżej opływowego elementu. Jest to często używane zamiast przepełnienia: ukryte;

9) Dodaj display:inline dla elementów float

Dość dobrze znany problem w IE6 z podwajaniem marginesów na elementach float. Oznacza to, że jeśli potrzebujemy 20 pikseli, to musimy napisać 10 pikseli, ponieważ to wcięcie podwaja się. Choć IE6 już wymiera, a wielu projektantów nie poświęca czasu na optymalizację pod niego witryny, to i tak mały fragment kodu sprawi, że wyświetlanie się w nim stanie się przyjemniejsze. A więc postawmy

Wyświetlacz: wbudowany /* Problem z IE6 */

dla elementu, do którego zastosowano pływak

10) Zwiększanie komfortu życia dzięki duszkom

Zdjęcia Sprite'a to bardzo wygodna rzecz. Dają przegląd grafiki całej strony i skracają czas ładowania.

Jeśli znasz angielski, to tutaj

11) Struktura plików witryny powinna być przejrzysta

Poświęć trochę czasu na przejrzystą strukturę witryny. Połóż wszystko na półkach.
Na przykład:

Tutaj "Nazwa strony"- nazwa strony, z którą współpracujemy. Ten folder zawiera pliki HTML witryny oraz foldery aktywa I style.
W folderze aktywa zawierają pliki, które można pobrać ze strony, np. archiwa lub pliki PDF. W folderze style zawierają z kolei foldery css, obrazy i javascript.

• css- zawiera wszystkie pliki css, takie jak reset.css, układ.css i main.css
• obrazy- wszystkie zdjęcia witryny. Folder ten można również podzielić na sekcje.
• JavaScript- wszystkie pliki JavaScript.

Ten diagram jest przybliżony i można go przedstawić na różne sposoby. Pomysł jest taki, że pomoże Ci to szybciej pracować i sprawi, że strona będzie przejrzystsza i ładniejsza.

12) Rozwiń style

Opcjonalna rada - Nazwy klas i identyfikatory stylów lepiej pisać w formie drzewka, żeby wszystko było jasne i widoczne.

13) Używaj pikseli zamiast wartości względnych

Wszystko jest dość proste - piksele mniej ładują kod, ponieważ dokument nie musi obliczać procentów wartości względnych.

Problem z wielkościami względnymi polega na przekazywaniu tej teorii względności.
Żeby było jasne wyjaśnię na przykładzie:

body (rozmiar czcionki: 62,5%) oznacza rozmiar czcionki: 1em, czyli 10px.

Jeśli #blog-content potrzebuje 14px, napisz:

#blog-treść (rozmiar czcionki: 1,4em; )

Teraz, jeśli tag H3 wewnątrz #blog-content potrzebuje 20 pikseli, można go ustawić w ten sposób:

#blog-content (rozmiar czcionki: 1,4em; ) #blog-content h3 (rozmiar czcionki: 2,0em)

Wszystko byłoby dobrze, ale mamy teorię względności. I tamte 2.0em stosuje się do 1.4em
#treść-blogowa i ostatecznie otrzymamy rozmiar 28px.

Dlatego używaj stałych wartości.

14) Ogranicz pseudoklasy do znaczników kotwiczących

Nowe przeglądarki nie mają tego problemu; wszystko sprowadza się do wielu starszych przeglądarek, na czele z IE6.
Problem polega na tym, że w starszych przeglądarkach pseudoklasy (takie jak :hover) działają tylko po zastosowaniu do tagu A, to jest

#header ul li:hover (kolor tła: #900)

nie działa w IE6

Ten problem został rozwiązany za pomocą jQuery

15) Unikaj problemów z selektorami

Jeśli to możliwe, używaj selektorów

Na przykład użyj zamiast tego

#main-content.main-header

#główna treść h1

Zachowaj ostrożność przy grupowaniu selektorów

W końcu wartości względne mogą tutaj zagrać źle, jeśli ich użyjesz

Jeśli w tym przykładzie wszystko jest w porządku,

Main-content div,.main-content p ( kolor: #000; )

W tym przypadku należy zachować ostrożność w przypadku wartości względnych.

Main-content div,.main-content p ( wysokość linii: 1.3em; )

I w końcu

Aby napisać pomyślny kod, unikaj ciągłego owijania jednej rzeczy w drugą i tak dalej.
Naucz się tagów h1, ul i p.
Klucz do sukcesu jest prosty – praktyka, praktyka, praktyka

Powodzenia na treningu)

» »

Dzielenie się jest dbaniem o innych!

Atrybut Co robi Do? Służył do określenia sposobu wyświetlania wewnętrznych granic pomiędzy wierszami i kolumnami. Ten atrybut jest przestarzały. Zamiast tego użyj CSS do stylizowania obramowań tabel.

Atrybut Rules jest przestarzały Ten atrybut jest przestarzały i nie należy go używać. Obsługa tego atrybutu przez przeglądarkę jest ograniczona i użycie go może dawać nieoczekiwane rezultaty. Zamiast tego użyj CSS do stylizowania tabel.

Atrybut RULES

RULES, atrybut HTML 4.0, wskazuje, czy tabela powinna mieć wewnętrzne obramowania. Omówimy każdą z wartości RULES i zademonstrujemy, w jaki sposób są one używane. RULES i FRAME mają irytujący sposób wzajemnej zmiany ustawień domyślnych. Aby uprościć sobie życie, oto ogólna zasada: jeśli używasz REGUŁ, użyj także RAMKI i GRANICY. Łatwiej uniknąć pomyłki.

Wartość NONE dla atrybutu RULES

RULES=NONE oznacza, że ​​nie ma żadnych granic wewnętrznych. RULES=NONE jest ustawieniem domyślnym, jeśli nie używasz BORDER lub ustawiasz je na zero, ale w przeciwnym razie należy wyraźnie określić, że nie ma wewnętrznych granic. Należy pamiętać, że obecnie Netscape nie rozpoznaje REGUŁ.

Nazwa	Żywność
Gwiezdny Kwiat	zamieszaj tofu
Miko	Zupa jarzynowa z ryżem
Andy	Hummus
Świst	tosty francuskie

Wartość ALL atrybutu RULES

RULES=ALL wskazuje, że wszystkie granice wewnętrzne powinny być widoczne. RULES=ALL jest zwykle używane w połączeniu z FRAME=VOID, dzięki czemu istnieją granice zewnętrzne, ale nie ma granic wewnętrznych.

Po zastosowaniu tej wartości do tabeli otrzymamy następujący wynik:

Nazwa	Żywność
Gwiezdny Kwiat	zamieszaj tofu
Miko	Zupa jarzynowa z ryżem
Andy	Hummus
Świst	tosty francuskie

Wartość COLS dla atrybutu RULES

COLS wskazuje, że powinny istnieć obramowania między kolumnami, ale nie między wierszami.

Po zastosowaniu tej wartości do tabeli otrzymamy następujący wynik:

Nazwa	Żywność
Gwiezdny Kwiat	zamieszaj tofu
Miko	Zupa jarzynowa z ryżem
Andy	Hummus
Świst	tosty francuskie

Wartość ROWS dla atrybutu RULES

RULES=ROWS wskazuje, że powinny istnieć granice pomiędzy wierszami, ale nie pomiędzy kolumnami.

Po zastosowaniu tej wartości do tabeli otrzymamy następujący wynik:

Nazwa	Żywność
Gwiezdny Kwiat	zamieszaj tofu
Miko	Zupa jarzynowa z ryżem
Andy	Hummus
Świst	tosty francuskie

Wartość GROUPS dla atrybutu RULES

RULES=GROUPS pozwala na umieszczenie granic pomiędzy grupami komórek tabeli. Komórki można grupować na dwa sposoby: według wierszy i kolumn. Przyjrzyjmy się każdemu z nich.Zauważ, że obecnie Netscape nie rozpoznaje REGUŁ.

Grupowanie według wierszy

Aby pogrupować według wierszy, użyj opcji , , tagi. wskazuje wiersze nagłówka tabeli, wskazuje główną część tabeli oraz wskazuje dolne rzędy. Na przykład ten kod tworzy tabelę z trzema grupami. Granice pojawiają się tylko pomiędzy grupami:

Nazwa	Żywność	Cena
Gwiezdny Kwiat	zamieszaj tofu	5.95
Miko	Zupa jarzynowa z ryżem	4.95
Andy	Hummus	3.95
Świst	tosty francuskie	5.95
Całkowity		20.80

Oto jak renderuje się ta tabela:

Nazwa	Żywność	Cena
Gwiezdny Kwiat	zamieszaj tofu	5.95
Miko	Zupa jarzynowa z ryżem	4.95
Andy	Hummus	3.95
Świst	tosty francuskie	5.95
Całkowity		20.80

Grupowanie według kolumny

Aby pogrupować według kolumn, użyj opcji tag i jego atrybut SPAN. Wymaga przyzwyczajenia się, ponieważ w rzeczywistości nie dotyczy żadnych komórek tabeli. Umieszcza się go na górze kodu tabeli, gdzie ustala zasady dotyczące kolumn tabeli, w tym także tych, które są zgrupowane razem. wskazuje, ile kolumn znajduje się w każdej grupie. Jeśli pominiesz SPAN, zakłada się, że grupa ma tylko jedną kolumnę. Na przykład poniższy kod mówi, że pierwsza kolumna stanowi osobną grupę, a trzy kolejne stanowią razem grupę. Zauważ, że wymaga znacznika końcowego. Granice będą przebiegać tylko pomiędzy grupami.

W tej chwili większość przeglądarek wyświetla witryny, samodzielnie odszyfrowując i poprawiając błędy webmastera. Trzeba jednak zachować ostrożność podczas pisania HTML - trzeba przestrzegać zasad ważności, bo prawidłowy układ jest ważny dla optymalizacji witryny, a także pomoże nie zwariować użytkownikom, którzy otwierają Twoją witrynę we wcześniejszych wersjach przeglądarek.

Używać

Elementznajduje się w pierwszym wierszu dowolnej strony HTML. Określa wersję języka znaczników używaną na stronie. Obecnie zaleca się używanie typu dokumentu takiego jak- jest uniwersalny dla każdej wersji języka.

Użyj prawidłowej struktury dokumentu

Tagi , , muszą być zawsze obecne w kodzie, dzięki temu strona jest zgodna ze standardami i daje pewność, że będzie poprawnie wyświetlana.

Zło

Witaj świecie!

Prawidłowy

Witaj świecie!

Zdefiniuj poprawnie informacje techniczne na stronie

Metatagi i style należy określić w , a nie gdzieś w treści strony. Zaleca się umieszczenie skryptów na dole strony, przed tagiem zamykającym. Zaletą takiego podejścia jest to, że przed wyświetleniem zawartości strony przeglądarka ładuje tylko style, a jako ostatnia ładuje skrypty, co pozwala użytkownikowi szybciej zapoznać się z zawartością strony.

Zło

Prawidłowy

Postępuj zgodnie ze standardami znaczników

Używaj elementów zgodnie z ich semantyką

Sprawdź poprawność kodu HTML

Użyj tekstu alternatywnego dla obrazów

Obrazy muszą zawsze zawierać atrybut alt. Przeglądarka korzysta z tego atrybutu, aby zapewnić kontekst obrazu. Atrybut alt musi zawierać tekst, który zostanie wyświetlony, jeśli obraz nie zostanie załadowany.

Zło

Prawidłowy

Nie używaj stylów w znacznikach HTML

Powoduje to powstawanie stron, które ładują się zbyt długo i są trudne w utrzymaniu. Zapisz wszystkie style w osobnym dokumencie CSS. Staraj się używać atrybutu tag i style do minimum.

Napisz komentarze

Skomentuj kod, ale nie przesadzaj. Komentarze napisane zwięźle i przejrzyście mogą być wielką pomocą dla innych programistów, a także ważnym przypomnieniem dla Ciebie po pewnym czasie.

Przykład:

Użyj odpowiednich nazw klas

Nadaj nazwom klas css zgodnie z zawartością bloku, np.: nagłówek - nagłówek, stopka - stopka, menu - menu, treść - treść. Dzięki temu kod będzie znacznie przejrzystszy i łatwiejszy w utrzymaniu.

Zły kod

• Pozycja menu 1


• Pozycja menu 2


• Pozycja menu 3

Dobry kod

• Pozycja menu 1


• Pozycja menu 2


• Pozycja menu 3

Zasady pisania CSS

CSS ma również reguły, których możesz przestrzegać, aby kod był prosty, łatwy do odczytania i dobrze zorganizowany.

Przywróć domyślne style przeglądarki

Mogą kolidować ze stylami, które faktycznie chcemy zastosować. Plik do resetowania standardowych stylów przeglądarki możesz pobrać tutaj - reset.css.

Używaj skróconych właściwości i wartości

Zły kod

górna część dopełnienia: 5px;
dopełnienie po prawej stronie: 10px;
dopełnienie-dół: 15px;
dopełnienie po lewej stronie: 20px;

Dobry kod

dopełnienie: 5px 10px 15px 20px;

Określ selektory i reguły w nowej linii

Zły kod

Element (wyświetlanie:blok;pozycja: względna;dopełnienie:5px 10px 15px 20px;)

Dobry kod

Element (
Blok wyświetlacza;
pozycja: względna;
dopełnienie: 5px 10px 15px 20px;
}

Wprowadź wartości zerowe bez jednostek

Zły kod

dopełnienie: 10px 0px;
margines lewy: 0%;

Dobry kod

dopełnienie: 10px 0;
margines-lewy: 0;

Napisz komentarze

Oddziel główne bloki komentarzami, poprawi to czytelność kodu.

Przykład:

/*NAGŁÓWEK*/
nagłówek(
}
/*KONIEC NAGŁÓWKA*/

/*GŁÓWNY*/
główny(
}
/*GŁÓWNY KONIEC*/

/*STOPKA*/
stopka(
}
/*KOŃC STOPKI*/

Sprawdź poprawność kodu CSS

Wniosek

Te wytyczne i zasady to tylko podstawy, ponieważ języki HTML i CSS ewoluują szybciej i opracowywane są nowe metody pisania poprawnego kodu. Stosując się do naszych zaleceń, będziesz mieć pewność, że Twój kod będzie prosty, czytelny i zoptymalizowany. Otrzymasz także +100 karmy i wdzięczność od programistów, którzy będą pracować nad witryną po Tobie.