linki adsense

niedziela, 9 grudnia 2012

KURS HTML - STYLE CSS


CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylów) służą do formatowania elementów HTML.

Patrz! Style i kolory

Czcionka Verdana kolor czerwony
Czcionka Times kolor niebieski
Tekst o wysokości 30 pikseli

Spróbuj sam

Przykłady

Używanie stylów
Jak dodać informacje o stylach wewnątrz sekcji <head>
Link bez podkreślenia
Jak za pomocą atrybutu stylów stworzyć link, który nie jest podkreślony.
Link do zewnętrznego arkuszu stylów
Jak użyć znacznika <link> do połączenia z zewnętrznym arkuszem stylów.

Formatowanie HTML za pomocą CSS


CSS został wprowadzony razem z HTML4, dla zapewnienia lepszego sposobu formatowania elementów HTML.

CSS może być dodany do HTML na kilka sposobów:
  • Wbudowane - za pomocą atrybutu style wewnątrz elementu HTML
  • Wewnętrzny  - używając elementu <style> w sekcji <head>
  • Zewnętrzny - używając zewnętrznego pliku CSS

Preferowanym sposobem na dodanie CSS do HTML,  jest wprowadzenie składni CSS w oddzielnych plikach CS. Jednakże, w tym tutorialu przedstawimy CSS używając atrybutu style.
Ma to na celu uproszczenie przykładów. To również sprawia, że łatwiej jest edytować kod.



Style wbudowane


Style wbudowane mają zastosowanie, kiedy chcemy użyć unikalnego stylu do konkretnego elementu HTML w jednym z wielu jego wystąpień.
Aby korzystać z wbudowanych stylów, użyj atrybutu stylu w odpowiednim znaczniku. Atrybut style może zawierać każdą właściwość CSS. Poniższy przykład pokazuje, jak zmienić kolor tekstu i lewego marginesu akapitu:

<p style="color:blue;margin-left:20px;">To jest akapit.</p>



Przykład - Kolor tła


Właściwość background-color definiuje kolor tła dla elementu:

Przykład

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">To jest nagłówek</h2>
<p style="background-color:green;">To jest akapit.</p>
</body>

</html>

Spróbuj sam »

Właściwość sprawia, że "stary" atrybut bgcolor jest nieaktualny.


Przykład - Czcionka, Kolor i Wielkość


Właściwości font-family, color i font-size definiują czcionkę, kolor i wielkość tekstu wewnątrz elementu:

Przykład

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">Nagłówek</h1>
<p style="font-family:arial;color:red;font-size:20px;">Akapit.</p>
</body>

</html>

Spróbuj sam »

Właściwości font-family, color i font-size zastępują "stary" znacznik <font>

Przykład - Wyrównanie tekstu


Właściwość text-align  określa poziome wyrównanie tekstu w elemencie:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Nagłówek wyrównany do środka</h1>
<p>To jest akapit.</p>
</body>

</html>

Spróbuj sam »

Właściwość text-align zastępuje "stary" znacznik <center>  - oczywiście dla tekstu.

Wewnętrzny arkusz stylów

Wewnętrzny arkusz stylów może być użyty, jezeli chcemy aby pojedynczy dokument posiadał unikalny styl. Wewnętrzne style są definiowane w sekcji <head> strony HTML, poprzez użycie znacznika <style>, tak jak poniżej:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>



Zewnętrzny arkusz stylów


Zewnętrzny arkusz stylów jest idealny, kiedy ten sam styl jest przyporządkowany do wielu stron. Z zewnętrznym arkuszem stylów, możesz zmienić wygląd całej strony internetowej, poprzez zmiany w pojedynczym pliku. Każda strona musi być połączona z arkuszem stylów za pomocą znacznika <link>. Znacznik <link> powinien znajdować się w sekcji <head>:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>



Znacznik Style

ZnacznikOpis
<style>Definiuje informacje o stylach dla dokumentu
<link>Określa związek pomiędzy dokumentem a zasobem zewnętrznym



Przestarzałe znaczniki i atrybuty

Niektóre znaczniki i atrybuty były używane do formatowania dokumentów w HTML4. Te znaczniki nie są wspierane przez nowe wersje HTML.
Należy unikać stosowania elementów: <font>, <center> i <strike>, oraz atrybutów: color i bgcolor.

Brak komentarzy:

Prześlij komentarz