Co to są arkusze stylów HTML?
Kaskadowy arkusz stylów HTML to arkusz z zestawem reguł i właściwości, który informuje przeglądarkę, jak renderować HTML przy użyciu wszystkich określonych stylów.
CSS to sposób, w jaki projektujemy dowolne strony internetowe. CSS ma wszystkie właściwości, takie jak tło, kolory, czcionki, odstępy, ramki itp., Które możemy zdefiniować dla każdego elementu na stronach.
Arkusze stylów HTML służą również do ustawiania układu strony w taki sposób, w jaki należy umieścić nagłówek, stopki lub inne elementy na stronie. CSS jest zawsze omawiany razem z HTML, ponieważ strony bez żadnego stylu są bardzo blade, bez wyróżniania nagłówków itp. I mają taki sam rozmiar czcionki na całej stronie, co nie zapewnia dobrego wyglądu użytkownikom.
Jak korzystać z arkuszy stylów HTML?
W przeszłości style, skrypty, HTML wszystko było pisane na tej samej stronie. To spowodowało, że strony były wyjątkowo długie i niezwykle trudne do odczytania i edycji. Potem przyszedł sposób na oddzielenie HTML, stylów i Javascript.
Sposoby umieszczania arkuszy stylów HTML na stronie internetowej:
Istnieją 3 sposoby włączenia stylów:
-
Stylizacja w linii
Jest to sposób pisania stylów dla każdego elementu w samym HTML wewnątrz atrybutu zwanego stylem.
Ten sposób stylizacji wcale nie jest zalecany, ponieważ HTML wygląda na zagracony i nie możemy zastosować podejścia „Napisz raz, użyj w wielu miejscach”
Eg: Hello World!
-
Stylizacja wewnętrzna
Ma to na celu umieszczenie stylów w tagu stylu i umieszczenie go na stronie internetowej na HTML. Ten sposób stylizacji jest wciąż lepszy niż stylizacja wbudowana, ponieważ możemy mieć wspólne style pasujące do siebie na wypadek, gdyby musiały być stosowane do wielu elementów jednocześnie.
Na etapie programowania łatwiej jest edytować plik HTML i nie musimy za każdym razem otwierać odpowiedniego pliku CSS i edytować za każdym razem.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Stylizacja zewnętrzna
Jest to najczęstszy i najlepszy sposób tworzenia stylów dla strony internetowej. Jest to podobne do stylu wewnętrznego, ale różnica polega na tym, że style są zapisywane w osobnym pliku z rozszerzeniem .css, a odniesienie do niego jest umieszczone w tagu head strony.
Składnia łączenia pliku CSS na stronie internetowej jest następująca:
Style powinny być zawarte w tagu head, który znajduje się nad tagiem body (tj. Rzeczywistą zawartością) HTML
Jaki jest priorytet między stylizacją wewnętrzną, wewnętrzną i zewnętrzną?
Style wbudowane mają wyższy priorytet niż wewnętrzny, a następnie ostatni priorytet ma styl zewnętrzny.
Inline> Wewnętrzny> Zewnętrzny
Najlepsze praktyki podczas korzystania z CSS:
- CSS można podzielić na kilka plików zamiast jednego.
- Oddzielne pliki CSS można umieszczać pojedynczo w tagu head za pomocą tagów link.
- Lub jeden plik CSS może zawierać wiele instrukcji importu, aby zaimportować resztę plików CSS. To logicznie oddzieli CSS, ale ostatecznie wszystkie style zostaną zrenderowane z tego samego pliku.
Zastosowanie: @import './process.css';
- Style można definiować dla dowolnych elementów strony internetowej za pomocą selektorów, takich jak sam tag HTML, nazwy klas, identyfikatory i dowolne nazwy atrybutów.
- Dostępnych jest kilka pseudo selektorów, takich jak:
- przed
- po
- n-te dziecko
- pierworodny
- ostatnie dziecko
- unosić się
- odwiedził
Są to w zasadzie stany wybranych elementów, a nie tak naprawdę dokładne elementy.
- Gdy na stronie znajdują się zwielokrotnione pliki CSS, ostatni ma najwyższy priorytet i zastępuje istniejące style poprzednich plików mających ten sam selektor.
- Arkusze stylów powinny być używane przed samym HTML, aby style były stosowane podczas ładowania strony. Jeśli zostanie dołączony na końcu, HTML najpierw ładuje się, a następnie powoli stosuje style, co daje użytkownikowi bardzo złe wrażenia.
Różne funkcje kaskadowych arkuszy stylów HTML:
- CSS zapewnia animacje : Wcześniej javascript był używany tylko do animacji. Ale najnowszy CSS, tj. CSS3, zapewnia animacje przy użyciu samych właściwości.
- Prefiksy dostawcy: zanim przeglądarki opublikują standardową wersję / nazwę właściwości dla nowych funkcji, przeglądarki dostarczają nam prefiksy dostawcy przez pewien czas przez pewien okres czasu jako eksperyment. Programiści muszą poczekać, aż przeglądarka wyda swoje standardowe wersje, a tymczasem eksperymentalne funkcje mogą być używane z prefiksami dostawców.
- Transformacje CSS: Przejście służy do stopniowego przechodzenia do jednej wartości z drugiej właściwości w określonym czasie.
Eg: -webkit-transition: width 2s, height 4s;
- Transformacje CSS: Transformacje w CSS pozwalają tłumaczyć, obracać, skalować i pochylać elementy.
Zapytania o media:
Urządzenia mobilne, komputery stacjonarne i iPady zachowują się inaczej, jednak nie możemy stylizować stron w ten sam sposób. Poprzednie standardy sieciowe zostały zaprojektowane w taki sposób, że mieliśmy różne CSS dla każdego typu urządzenia.
Wraz z postępem standardów internetowych i sposobem budowania sieci, przeglądarki są opracowywane tak, aby miały jeden CSS, którego można używać z dowolnym rodzajem urządzenia. Aby zmienić style dla urządzeń na podstawie szerokości i wysokości, używane są zapytania o media, za pomocą których możemy określić minimalną lub maksymalną szerokość urządzenia i zapisać w nim style.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Style zdecydowanie są dobrodziejstwem dla sieci. A ponieważ w ostatnich czasach rozwój sieci gwałtownie wzrósł, CSS3 zdecydowanie zyskał duże zapotrzebowanie na uczynienie stron wyjątkowo interaktywnymi i intuicyjnymi.
Polecane artykuły
To był przewodnik po arkuszach stylów HTML. Tutaj omawiamy, jak używać arkuszy stylów HTML, różnych funkcji i sposobów umieszczania CSS na stronie internetowej. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -
- Wprowadzenie do CSS
- Zalety CSS w projektowaniu stron internetowych
- Co to jest CSS? | Jak używać?
- Czy w CSS rozróżniana jest wielkość liter?
- Różne style list HTML