Dzisiaj chce przedstawić wstęp do Arkuszy styli CSS.
Wiem, wiem. Sporo tego w sieci można znaleźć, zwłaszcza iż kaskadowe style nie istnieją od wczoraj, jednak zostałem poproszony o przedstawienie podstaw, co czynię i by dalej już nie zanudzać przejdę do tematu głównego. Na początku potrzebny nam będzie jakiś edytor z kolorowaniem składni. Myślę iż w ten sposób będzie łatwiej zaznajomić się z tym prostym językiem, który jednak czasem potrafi spędzić sen z powiek. Osobiście polecę dwa: Notepad++ oraz PSPad. Oba są narzędziami darmowymi co dla większości osób stanowi podstawę w kwestii wyboru.
Ok, mamy już nasz edytor przed oczami, wybieramy nowy plik i zaczynamy poznawanie CSS od działającego przykładu.
Na początek zapiszmy nowy plik jako index.html oraz stwórzmy jeszcze jeden pusty (otwarty obok) plik, którego zapisujemy pod nazwą arkusz.css. Z początku taki układ przysparza więcej pracy, jednak zdecydowanie polecam zaczynać w ten sposób, ponieważ w przyszłości oszczędzi nam ten wybór dużej ilości pisania. I tak do plików dopiszmy następujące linijki:
Wiem, wiem. Sporo tego w sieci można znaleźć, zwłaszcza iż kaskadowe style nie istnieją od wczoraj, jednak zostałem poproszony o przedstawienie podstaw, co czynię i by dalej już nie zanudzać przejdę do tematu głównego. Na początku potrzebny nam będzie jakiś edytor z kolorowaniem składni. Myślę iż w ten sposób będzie łatwiej zaznajomić się z tym prostym językiem, który jednak czasem potrafi spędzić sen z powiek. Osobiście polecę dwa: Notepad++ oraz PSPad. Oba są narzędziami darmowymi co dla większości osób stanowi podstawę w kwestii wyboru.
Ok, mamy już nasz edytor przed oczami, wybieramy nowy plik i zaczynamy poznawanie CSS od działającego przykładu.
Na początek zapiszmy nowy plik jako index.html oraz stwórzmy jeszcze jeden pusty (otwarty obok) plik, którego zapisujemy pod nazwą arkusz.css. Z początku taki układ przysparza więcej pracy, jednak zdecydowanie polecam zaczynać w ten sposób, ponieważ w przyszłości oszczędzi nam ten wybór dużej ilości pisania. I tak do plików dopiszmy następujące linijki:
<!-- index.html --> <html> <head> <link rel="stylesheet" type="text/css" href="arkusz.css"/> </head> <body> <p>Przykładowy tekst poznawczy</p> </body> <html>
/* arkusz.css */
p {
text-align:center;
color: #003366;
}Tak przygotowany kod sformatuje nam paragrafy wewnątrz dokumentu index.html. Odpal plik index.html lokalnie i sprawdź jaki kolor przyjmie tekst. Powinien być identyczny z tym. Prawda że proste? ;) W następnej notce zajmiemy się nieco trudniejszymi rzeczami :)
| Interesujesz się informatyką? Te książki mogą Cię zainteresować: |
Jeśli podoba się Tobie ten wpis, podziel się jego treścią ze znajomymi oraz skorzystaj z opcji powiadamiania o nowych wpisach, subskrybując kanał RSS.
Dodaj do:
