Strict Standards: Non-static method Advanced_Permalinks::get() should not be called statically in /blog/wp-content/plugins/advanced-permalinks/advanced-permalinks.php on line 825

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /blog/wp-includes/plugin.php on line 123

Warning: call_user_func_array() expects parameter 2 to be array, null given in /blog/wp-includes/plugin.php on line 123
[CSS-HTML] Jak dołączyć do strony zewnętrzny plik arkusza stylów css lub osadzić go w kodzie html? » Porady HTML, Porady CSS » egrafik.pl
BAZA WIEDZY
KURSY
Bazy danych w PHP
Kurs AdvancedAJAX
Kurs ASP
Kurs ASP.NET
Kurs C++
Kurs CSS
Kurs HTML
Kurs HTML drugi
Kurs JavaScript
Kurs MySQL
Kurs PHP
Kurs RSS
Kurs XHTML
Obiekty DOM
MANUALE
CSS1 - W3C
DOM - w budowie
PHP 2005
PHP 2006
Wyrażenia regularne
SHOUTBOX
STAT
Online: 4 | UU: 107

Strict Standards: Resource ID#115 used as offset, casting to integer (115) in /forum2/db/mysql4.php on line 223

Strict Standards: Resource ID#115 used as offset, casting to integer (115) in /forum2/db/mysql4.php on line 224
[CSS-HTML] Jak dołączyć do strony zewnętrzny plik arkusza stylów css lub osadzić go w kodzie html?
Porady HTML, Porady CSS | 5 maj 2008 | Wizyt: 106089

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Deprecated: Function eregi() is deprecated in /blog/wp-content/plugins/tpbc.php on line 96

Istnieją trzy metody posługiwania się arkuszami stylów css. Pierwszą jest dołączanie do strony, za pomocą odpowieniego zapisu, zewnętrznego pliku z arkuszem stylów. Drugą, zadeklarowanie w kodzie strony, odpowiedniego zestawu stylów. Trzecią - nadawanie określonego stylu konkretnym elementom kodu html.

Metoda pierwsza:

Kod: html4strict

<html>
<head>
<meta content="text/html; charset=iso-8859-2" />
 
  <link rel="stylesheet" href="/css/styl.css" type="text/css" />

 
</head>
<body>

 
  <p class="nazwa_stylu">Jakiś tekst</p>
 

</body>
</html>

W tej metodzie za pomocą zapisu <link rel="stylesheet" href="/css/styl.css" type="text/css" /> dołączany jest do strony zewnętrzny arkusz stylów, umieszczony w pliku styl.css. Wskazanym jest by fragment ten umieszczać w sekcji <head>.

Przykładowy plik css ze stylem:

Kod: css

.nazwa_stylu {
  font-size:12px;
  color:red;
  text-align:center;
}

 
.inna_nazwa_stylu {
  font-size:15px;
  margin-left:10px;
  margin-right:10px;
  line-height:20px;

  text-align:justify;
}

W powyższym przykładzie w pliku css zadeklarowane zostały dwa style. Pierwszy o nazwie "nazwa_stylu", któremu przypisane zostały takie właściwości jak: wielkość czionki - 15 pikseli, kolor - czerowny, wyrównanie - do środka oraz drugi o nazwie "inna_nazwa_stylu" z właściwościami marginesów, wysokości linii itd. Aby elementowi html (<p><div><table>) w kodzie strony do której dołączamy plik css, nadać  określony styl, należy zapisać to tak: <p class="nazwa_stylu">Jakiś tekst</p>.


Metoda druga:

Kod: html4strict

<html>
<head>
<meta content="text/html; charset=iso-8859-2" />
 
  <style type="text/css">
    .styl1 {
      color:green;
    }
    .styl2 {
      color:blue;
    }
  </style>

 
</head>
<body>

 
  <p class="styl1">Jakiś tekst</p>
 
</body>
</html>

W ten sposób w sekcji pomiędzy <style></style> możemy, bezpośrednio w danym pliku, umieścić zestaw stylów i odwołać się do nich za pomocą atrybutu class


Metoda trzecia:

Kod: html4strict

<html>
<head>
<meta content="text/html; charset=iso-8859-2" />
</head>
<body>

 
  <p style="font-size:15px; text-align:center; color:red">Jakiś tekst</p>
 
</body>
</html>

W metodzie trzeciej nie deklarujemy wcześniej stylów tak jak to miało miejsce w metodzie pierwszej i drugiej. Styl przypisujemy bezpośrednio do elementu. W przykładzie, do elementu <p>, bezpośrednio przypisany został styl i tylko ten element charakteryzuje się podanymi właściwościami.

Nie będę rozważał, która z metod jest lepsza, bo każda z nich ma zalety w odpowiednich okolicznościach.

Z pewnością deklarowanie stylów w odrębnym pliku jest wygodne wówczas, gdy isnieje potrzeba aby wiele stron odwoływało się do tych samych stylów (np. jeden serwis z duża liczbą stron).

Zaletą metody drugiej jest fakt, że gdy chcemy np. obejrzeć stronę na dysku lokalnym, strona nie straci orginalnego wyglądu z powodu braku pliku css, co w pierwszej metodzie mogłoby mieć miejsce.

Metoda trzecia wykorzystywana jest najczęściej przy bieżącym pisaniu kodu. Projektując stronę, twórca dobiera wygląd trochę na zasadzie prób i błędów, więc bezpośrednie przypisywanie elementom kodu html stylów jest w tej sytuacji bardzo przydatne.

Zaletą wcześniejszego deklarowania stylów (metoda pierwsza i druga) jest możliwość odwoływania się do nich po nazwie w każdym elemencie html, w każdym miejscu strony (zgodnie ze specyfikacją).

Autor: Adam Suchowski

nowe Porady CSS » zobacz wszystkie
nowe Porady HTML » zobacz wszystkie

WordPress database error: [Incorrect file format 'wp_comments']
SELECT * FROM wp_comments WHERE comment_post_ID = '910' AND comment_approved = '1' ORDER BY comment_date desc

Dodaj komentarz









 
| | | |
Copyright © 2006-2013 egrafik.pl | Kontakt | Reklama | Projekty domów
jocker