Zastosowanie stylów do tagu body zostanie zastosowane do całej strony, więc
body { font-family: Verdana }
zostaną zastosowane do całej strony. Można to również zrobić za pomocą
* {font-family: Verdana}
które dotyczyłyby wszystkich elementów, a więc miałyby taki sam efekt.
Rozumiem zasadę, że w pierwszym przypadku styl jest stosowany do jednego znacznika, treści dla całej strony, podczas gdy w drugim przykładzie czcionka jest nakładana na poszczególne elementy HTML. Pytam, jaka jest praktyczna różnica w tym, jakie są implikacje i jaki jest powód, sytuacja lub najlepsza praktyka, która prowadzi do wzajemnego wykorzystywania.
Jednym z efektów ubocznych jest z pewnością prędkość (+1 Rob). Najbardziej interesuje mnie faktyczny powód, aby wybierać między sobą pod względem funkcjonalności.
design-patterns
coding-style
html
css
Michael Durrant
źródło
źródło
Odpowiedzi:
Różnice funkcjonalne między tymi dwiema opcjami selektora CSS ... (moje zdanie)
ciało
Selektor uniwersalny * (wszystkie elementy)
Propozycje
źródło
Spróbuj czegoś takiego
przeciwko
I zobacz, które style są stosowane do komórek tabeli.
W przypadku kaskadowych arkuszy stylów istnieje różnica między „zastosowanym do całego dokumentu” a „zastosowanym do każdego elementu dokumentu” .
Zastosowanie stylu kaskadowego do treści powoduje zastosowanie jej do wszystkich znaczników w treści, dopóki znacznik nie zostanie nadpisany. Następnie nadpisany styl jest stosowany do wszystkich znaczników w tym jednym.
Jednak istnieją pewne style, które nie są kaskadowane, takie jak margines i wypełnienie (zwykle tam, gdzie nie ma to sensu). Można je zastosować tylko do określonych znaczników i tam może być użyta symbol wieloznaczny (choć rzadko).
Większość nie kaskadowych stylów ma również wartość dziedziczenia (np.
margin: inherit
), Co oznacza „weź wartości znacznika nadrzędnego”.źródło
Zapomniałem wszystkich szczegółów, ale za pomocą selektora * wydajność jest spowalniana, ponieważ każdy element jest oceniany, gdy przeglądarka analizuje CSS i stosuje styl. iirc, ustawienie czcionki w tym przypadku tylko na element nadrzędny tworzy jedno odniesienie dla każdego elementu i dodatkowa praca nie jest potrzebna.
Są też inne problemy, ale znowu nie pamiętam ich wszystkich i nie używałem * od lat.
źródło
Ogólna wytyczna dobrego projektowania CSS ma być jak najbardziej szczegółowa, ale nie bardziej szczegółowa.
Tak więc w twoim przykładzie zastosowanie stylu do elementu body byłoby możliwie jak najbardziej szczegółowe i na pewno bardziej szczegółowe niż selektor „*”.
źródło
Jak wspominają inni,
body { font-family: Verdana }
wybierze czcionkę Verdena tylko do tych elementów, które dziedziczą zfont-style
nieruchomości od swoich rodziców tak, że wszystkie jego rodziców zbyt dziedziczy nieruchomość eventualy stanowiąbody
elementu, a* {font-family: Verdana}
wybierze czcionkę Verdena do wszystkich elementów. Chciałbym zilustrować różnicę na przykładzie:Za pomocą selektora ciała:
Za pomocą uniwersalnego selektora
*
:Użyj kodów css i html w przykładach, które rozpoznasz, że
<input>
element w ogóle nie dziedziczy stylu czcionki, a zatem cokolwiek wpiszesz w formularzu, otrzyma domyślny styl czcionki arkusza stylów klienta użytkownika. W drugim przykładzie uniwersalny selektor*
wyraźnie ustawia styl czcionki dla każdego elementu, w tyminput
elementu.źródło