Wbudowane tagi <style> a wbudowane właściwości CSS

Jaka jest preferowana metoda ustawiania właściwości CSS?

Właściwości stylu wbudowanego:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Właściwości stylu w <style>...</style>znacznikach:

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Zasady stylu można dołączyć za pomocą:

• Pliki zewnętrzne
• Tagi stylu na stronie
• Atrybut stylu wbudowanego

Generalnie wolę używać połączonych arkuszy stylów, ponieważ:

• mogą być buforowane przez przeglądarki w celu zwiększenia wydajności; i
• są o wiele łatwiejsze w utrzymaniu z perspektywy rozwoju.

Jednak Twoje pytanie dotyczy konkretnie styletagu i stylów wbudowanych. styleW tym przypadku wolę używać tagu, ponieważ:

• zapewnia wyraźne oddzielenie znaczników od stylizacji;
• tworzy czystsze znaczniki HTML; i
• jest bardziej wydajne dzięki selektorom do stosowania reguł do wielu elementów na stronie, usprawniając zarządzanie, a także zmniejszając rozmiar strony.

Elementy wbudowane wpływają tylko na ich odpowiedni element.

Istotną różnicą między styletagiem a atrybutem inline jest specyficzność. Specyfika określa, kiedy jeden styl zastępuje inny. Ogólnie style wbudowane mają większą specyficzność.

Przeczytaj CSS: Specyficzne wojny, aby w zabawny sposób spojrzeć na ten temat.

Mam nadzieję że to pomogło!

Oto jeden aspekt, który może rządzić różnicą:

Jeśli zmienisz styl elementu w JavaScript, wpłyniesz na styl wbudowany. Jeśli istnieje już styl, nadpisujesz go na stałe. Ale jeśli styl został zdefiniowany w zewnętrznym arkuszu lub w <style>znaczniku, ustawienie wbudowanego ""stylu przywraca styl z tego źródła.

To zależy.

Najważniejsze jest unikanie powtarzania kodu.

Jeśli ten sam kod ma być użyty ponownie 2 lub więcej razy i powinien być zsynchronizowany przy zmianie, użyj zewnętrznego arkusza stylów.

Jeśli użyjesz go tylko raz, myślę, że inline jest w porządku.

Odpowiadając na twoje bezpośrednie pytanie: żadna z tych metod nie jest preferowaną. Użyj osobnego pliku.

Style wbudowane powinny być używane tylko w ostateczności lub ustawiane przez kod JavaScript. Style wbudowane mają najwyższy poziom szczegółowości, więc nadpisuj swoje rzeczywiste arkusze stylów. Może to utrudniać ich kontrolowanie ( !importantz tego samego powodu należy również unikać ).

Osadzony <style>blok nie jest zalecany, ponieważ tracisz zdolność przeglądarki do buforowania arkusza stylów na wielu stronach w Twojej witrynie.

Krótko mówiąc, jeśli to możliwe, powinieneś umieścić swoje style w osobnym pliku CSS.

Z punktu widzenia konserwacji, zarządzanie jednym elementem w jednym pliku jest znacznie prostsze niż zarządzanie wieloma elementami w prawdopodobnie wielu plikach.

Oddzielenie stylizacji pomoże ci znacznie ułatwić życie, zwłaszcza gdy obowiązki zawodowe są rozdzielane między różne osoby. Wielokrotne użycie i przenośność pozwolą Ci zaoszczędzić mnóstwo czasu w drodze.

W przypadku używania stylu wbudowanego nadpisuje on wszelkie ustawione właściwości zewnętrzne.

Zgadzam się z poglądem większości, że preferowaną metodą są zewnętrzne arkusze stylów.

Jednak oto kilka praktycznych wyjątków:

• Dynamiczne obrazy tła. Arkusze stylów CSS są plikami statycznymi, więc musisz użyć stylu wbudowanego, aby dodać styl dynamiczny (z bazy danych, CMS itp.) background-image.

• Jeśli element musi być ukryty podczas ładowania strony, użycie do tego zewnętrznego arkusza stylów nie jest praktyczne, ponieważ zawsze będzie pewne opóźnienie, zanim arkusz stylów zostanie przetworzony, a element będzie widoczny, dopóki to się nie stanie. style="display: none;"to najlepszy sposób, aby to osiągnąć.

• Jeśli aplikacja ma dać użytkownikowi dokładną kontrolę nad określoną wartością CSS, np. Kolorem tekstu, może być konieczne dodanie tego do styleelementów wbudowanych lub <style></style>bloków na stronie . Np. style="color:#{{ page.color }}"Lub<style> p.themed { color: #{{ page.color }}; }</style>

O ile jest to możliwe, lepiej jest używać klasy .myclass{}i identyfikatora #myclass{}, więc używaj dedykowanego pliku css lub tagu <style></style>w html . Styl wbudowany dobrze jest zmieniać opcję css dynamicznie za pomocą javascript.

Istnieją różne powody, dla których warto wybrać jeden sposób.

• Jeśli potrzebujesz określić css do elementów, które są generowane programowo (na przykład modyfikując css dla obrazów o różnych rozmiarach), łatwiejsze może być użycie wbudowanego css.
• Jeśli jakiś plik CSS jest ważny tylko dla bieżącej strony, powinieneś raczej użyć tagu script niż osobnego pliku .css. Dobrze, jeśli przeglądarka nie musi wykonywać zbyt wielu żądań http.

W przeciwnym razie, jak wspomniano, lepiej jest użyć osobnego pliku css.

Możesz ustawić CSS na trzy różne sposoby, jak wspomniano poniżej: -

1.External style sheet
2.Internal style sheet
3.Inline style

Preferowanym / idealnym sposobem ustawiania stylu CSS jest używanie jako zewnętrznych arkuszy stylów, gdy styl jest stosowany na wielu stronach. Korzystając z zewnętrznego arkusza stylów, możesz zmienić wygląd całej witryny sieci Web, zmieniając jeden plik.

przykładowe użycie może być: -

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

Jeśli chcesz zastosować unikalny styl do pojedynczego dokumentu, możesz użyć wewnętrznego arkusza stylów.

Nie używaj wbudowanego arkusza stylów, ponieważ miesza zawartość z prezentacją i traci wiele zalet.