04-22-2012, 12:42 AM
W dawnych czasach, wygląd strony oraz zawartość, była wstawiana tylko przez podanie określonych znaczników html, style jeszcze nie istniały, do wyróżniania różnych części służyły poszczególne znaczniki.
Po rozpoczęciu paragrafu, gdy chciało się wyróżnić tekst np. przez podkreślenie trzeba było posłużyć się znacznikiem <u> skrótem od underline można było tekst pogrubić <b> znacznikiem, który po angielsku znaczy bold, oraz pisać kursywą używając znacznika <i>.
Obecnie do opisywania wyglądu służą style.
Każdy paragraf - akapit można opisać w ten sposób wystarczy wpisywać już tylko sam znacznik <p> resztę wyglądu opisuje właśnie styl.
np.
font-weight: bold; spowoduje to samo co wpisanie znacznika <b>.
font-style: italic; spowoduje to samo co wpisanie znacznika <i>.
text-decoration: underline; spowoduje to samo co wpisanie <u>.
font-weight: bold; zamiast wartości bold można też wstawić jedną z wartości: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-style: italic; zamiast wartości italic można też wstawić:
normal, italic, oblique[i/]
text-decoration: underline; zamiast podkreślenia można wstawić:
[i]none, underline, overline, line-through, blink
domyślnie dla znacznika <p> wartość font-weight oraz font-style jest normal, a text-decoration: none;
definiowanie podkreślenia pogrubienia i kursywy, dla wszystkich akapitów w zewnętrznym arkuszu stylów (plik .css) można dokonać wpisując do pliku arkusza:
jeżeli chcemy, aby tylko jeden akapit był podkreślony powinniśmy posłużyć się klasą. Przykładowa klasa będzie wyglądała tak:
kiedy będziemy potrzebowali tylko podkreślenia wystarczy wpisać w pliku .html:
Wygląd akapitu możemy też zdefiniować w lini pliku .html (tzw. wstawianie styli inline)
np.
Po rozpoczęciu paragrafu, gdy chciało się wyróżnić tekst np. przez podkreślenie trzeba było posłużyć się znacznikiem <u> skrótem od underline można było tekst pogrubić <b> znacznikiem, który po angielsku znaczy bold, oraz pisać kursywą używając znacznika <i>.
Obecnie do opisywania wyglądu służą style.
Każdy paragraf - akapit można opisać w ten sposób wystarczy wpisywać już tylko sam znacznik <p> resztę wyglądu opisuje właśnie styl.
np.
font-weight: bold; spowoduje to samo co wpisanie znacznika <b>.
font-style: italic; spowoduje to samo co wpisanie znacznika <i>.
text-decoration: underline; spowoduje to samo co wpisanie <u>.
font-weight: bold; zamiast wartości bold można też wstawić jedną z wartości: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-style: italic; zamiast wartości italic można też wstawić:
normal, italic, oblique[i/]
text-decoration: underline; zamiast podkreślenia można wstawić:
[i]none, underline, overline, line-through, blink
domyślnie dla znacznika <p> wartość font-weight oraz font-style jest normal, a text-decoration: none;
definiowanie podkreślenia pogrubienia i kursywy, dla wszystkich akapitów w zewnętrznym arkuszu stylów (plik .css) można dokonać wpisując do pliku arkusza:
Cytat:P {odtąd wszystkie akapity będą pisane grubą czcionką kursywą i będą podkreślone.
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
jeżeli chcemy, aby tylko jeden akapit był podkreślony powinniśmy posłużyć się klasą. Przykładowa klasa będzie wyglądała tak:
Cytat:.akapit {odtąd możemy posługiwać się klasą
font-weight: normal;
font-style: normal;
text-decoration: underline;
}
kiedy będziemy potrzebowali tylko podkreślenia wystarczy wpisać w pliku .html:
Cytat:<p class="akapit">tekst podkreślony</p>analogicznie możemy zdefiniować tylko pogrubienie:
Cytat:.drugi {
font-weight: bold;
font-style: normal;
text-decoration: none;
}
Cytat:<p class="drugi">tekst tylko pogrubiony</p>
Cytat:.trzeci{
font-weight: normal;
font-style: italic;
text-decoration: none;
}
Cytat:<p class="trzeci">tekst pisany kursywą jedynie</p>jeżeli w pliku arkusza stylu mamy te cztery deklaracje to za każdym razem możemy się nimi posługiwać.
Wygląd akapitu możemy też zdefiniować w lini pliku .html (tzw. wstawianie styli inline)
np.
Cytat:<p style="font-weight: normal; font-style: italic;dla powyższego przykładu akapit będzie kursywą z podkreśleniem.
text-decoration: underline;">ten akapit będzie kursywą i podkreślony</p>