Aplikacje
Strony internetowe
Marketing internetowy
Podstawą każdej strony internetowej są dwa języki: CSS oraz HTML. Istotne jest, aby umiejętnie je ze sobą połączyć. Tylko wtedy powstanie witryna funkcjonalna i estetyczna. Jak to zrobić?
Kod HTML a arkusz stylów CSS
Każda strona internetowa jest zbudowana z plików HTML odpowiadających za jej strukturę, a także z plików CSS zawierających style i umożliwiających formatowanie i stylizację elementów. Ponadto za pomocą stylów CSS można określić układ treści na stronie i odstępy między nimi, w tym kolor tła lub rozmiar czcionki.
Stosując plik HTML, możesz również wyedytować elementy strony w podstawowym zakresie, ale masz tutaj o wiele bardziej ograniczone możliwości niż podczas stosowania arkuszy stylów CSS.
Jeżeli chcesz stworzyć stronę jednocześnie funkcjonalną i estetyczną, nie musisz korzystać z CSS. W HTML uda się to bez większych problemów.
Usługi programistyczne i marketingowe w Twoim mieście
Czy kaskadowe arkusze stylów CSS zawsze są podłączone do dokumentu HTML?
Łączenie CSS z HTML odbywa się bez większych problemów. Natomiast trzeba wiedzieć, że kaskadowe arkusze stylów CSS oraz struktury dokumentu HTML domyślnie są od siebie odseparowane. Pozwala to zachować spójność stylistyczną, szczególnie w przypadku bardziej rozbudowanych stron. Można w prostszy sposób wprowadzić zmiany. Jeden arkusz wystarczy do określenia wyglądu wszystkich podstron serwisu. Nie trzeba pracować nad każdą z osobna.
Jak podłączyć CSS do HTML?
Czy łączenie HTML z CSS jest w ogólne opłacalne? Czy powstanie w ten sposób efektywna strona internetowa? Jeżeli chcesz osiągnąć najlepsze efekty, możesz wybrać jedną z trzech możliwości:
- linkowanie zewnętrzne pliku CSS w dokumencie HTML — styl zewnętrzny,
- umieszczenie pliku CSS bezpośrednio w pliku HTML stosując znacznik <style> w sekcji <head> – styl wewnętrzny,
- zdefiniowanie pliku CSS dla jednego, wybranego elementu HTML za pomocą atrybutu style — styl inline.
Przeczytaj również
Styl zewnętrzny
Zdecydowanie najczęściej wykorzystywany, ponieważ umożliwia zachowanie czystego kodu HTML. Pozwala również zastosować ten sam arkusz stylów na wielu stronach. Ma sporo korzyści dla web developerów oraz jeżeli chodzi o SEO.
Do połączenia zewnętrznego pliku CSS z dokumentem HTML za pomocą tego stylu wykorzystuje się bardzo prosty znacznik:
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
Połączenie za pomocą zewnętrznego pliku CSS ułatwia utrzymanie i modyfikowanie strony. Wystarczy, że wprowadzisz zmianę styli w jednym miejscu, a będzie ona widoczna wszędzie. Ponadto styl zewnętrzny pozwala również zwiększyć wydajność strony. Przeglądarka nie ma żadnych problemów z załadowaniem plików CSS do pamięci podręcznej.
Jeżeli chodzi o wady tego rozwiązania:
- musisz liczyć się z większą ilością żądań, ponieważ każdy zewnętrzny plik CSS to dodatkowe żądanie HTTP,
- mogą pojawić się problemy z cache’owaniem,
- masz mniejszą kontrolę nad stylem.
Styl wewnętrzny
Jak połączyć CSS z HTML? Możesz zastosować styl wewnętrzny. W tym celu należy dodać CSS bezpośrednio do dokumentu HTML przy pomocy znacznika <style>. CSS trzeba umieścić w sekcji <head>, a więc w nagłówku dokumentu HTML.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
Znajduje zastosowanie przede wszystkim w przypadku nadpisania wybranych stylów z zewnętrznego pliku CSS i naniesienia specyficznych dla danej podstrony poprawek.
Styl wewnętrzny sprawdza się głównie w prostych, niewielkich projektach. Umożliwia szybkie prototypownie, a ponadto masz pełną kontrolę nad stylem danej strony.
Styl inline
Jak podpiąć CSS do HTML stosując styl inline? Przede wszystkim to rozwiązanie polega na dodaniu CSS do konkretnego elementu HTML, nadpisując przy tym wszystkie inne style. Jest to najrzadziej stosowane rozwiązanie. Jeżeli już ktoś się na to połączenie CSS z HTML decyduje, to tylko w przypadku niewielkich modyfikacji w stosunku do arkuszy stylów określonych w zewnętrznym pliku CSS. Aby to zrobić, musisz zastosować:
<body>
<h1 style=”color:black; text-align:center; background-color:white;”>Lorem ipsum…</h1>
<p style=”color:gray;”>…dolor sit amet, consectetur adipiscing elit</p>
</body>
Podłączenie CSS do HTML za pomocą stylu inline ma również swoje zalety. Umożliwia uzyskanie szybkiej i precyzyjnej kontroli nad wyglądem pojedynczego elementu na stronie. Z łatwością można wprowadzić niewielkie zmiany w stylu, niewymagające edytowania w obrębie arkusza zewnętrznego stylów.
A dla Ciebie, który wariant jest najkorzystniejszy?
