@ xhtml css

  BIBLIOTEKA TelePrawa OPEN SOURCE

KRZYSZTOF GAJEWSKI - strona autorska

• HOME
• NAGŁOWKI
• NAWIGACJA
• TEKSTY
• KOLUMNY
• TEORIA
• GRAFIKA
•  
•  

• NAGŁOWKI
• MINI
• MIDI
•  
•  
•  
•  
•  
•  

REDAGUJE ZESPÓŁ KLAS VII

Znaczniki kodu XHTML stosowane w nagłówkach

składają się z par znaczników, otwierającego i zamykającego z wyjątkiem dwóch ostatnich 4 i 5. Między znacznikami umieszcza się tekst lub grafikę. Każdy blok tekstu lub grafiki jest objęty jednym z kilku selektorów. Selektor składa się z deklaracji które nadają kształt, kolor i pozycje bloku z tekstem lub grafiką na ekranie monitora.

1. <h1> </h1> nagłówek stopna pierwszego określa nazwę strony lub najważniejszy tytuł na stronie
2. <p> </p> akapit tekstu, tutaj adres lub nazwa uzupełniająca
3. <a href="nazwa.htm" alt="opis"> </a> proste hiperłącze, odsyłacz do pliku "nazwa.htm" z opisem pliku w alt.
4. <br /> złamanie wiersza
5. <img src="nazwa.jpg" alt="opis" width="wymiar" height="wymiar" /> służy do osadzenia grafiki na stronie, także fotografii

Selektory CSS stosowane w kodzie XHTML nagłówków

Selektory składające się z deklaracji definiuje się najpierw w arkuszu stylów a następnie ich nazwy obejmujące poszczególne znaczniki XHTML z zawartością tekstu i grafiki umieszcza się w kodzie XHTML wg. kolejności występowania na ekranie.

1. selektor identyfikatora np   #head1   odnosi się do jednego znacznika i może być użyty tylko raz. W kodzie XHTML stosowany jest jako otwierający <div id="head1"> tu znaczniki XHTML i tekst oraz znacznik zamknięcia selektora < /div >
2. selektor potomny (dawniej tj. w CSS1 kontekstowy) np   #head1 h1   lub   #head1 p   formatuje tekst w znacznikach <h1> i </h1> lub <p> i </p> objętych działaniem selektora #head1. Pozwala to na stronie deklarować różne parametry nagłówków - tytułów - nazw w znacznikach <h1> i </h1>, lub adresów i informacji w znacznikach <p> i </p>.

Deklaracje CSS stosowane w arkuszu stylów nagłówków

Kilka deklaracji umieszczonych w nawiasach klamrowych tworzy blok deklaracji. Blok ma z lewej strony selektor spełniający rolę nazwy bloku. Całość tj. selektor i blok tworzą regułę. Reguła określa pozycję tekstu i grafiki na ekranie oraz kolor tła, tekstu i parametry czcionek. Największą trudność sprawia pozycjonowanie elementów na ekranie i dla tego odpowiadające im deklaracje umieszczam na początku bloku a parametry tekstu na końcu. Deklaracja składa się z dwóch członów   właściwości:   zakończonej dwukropkiem i   wartości;   zakończonej średnikiem. Ostatnia wartość w bloku może być pozbawiona średnika. Są dwie szkoły zapisu nazw selektorów identyfikatora i potomka, jedna z div np.  div#head1 a druga z pominięciem członu div i ta jest stosowana na tych stronach.

1. background-color: green; - kolor tła: zielony; np. całego nagłówka
2. border-bottom: 3px solid blue; - obramowanie dolne: 3px grube niebieskie; linia pozioma rozdzialu wierszy lub linia pod tytułem, napisem
3. border:2px solid white; - obramowanie całej powierzchni selektora, białe o grubości 2px
4. color: yellow; - kolor: żółty; - tutaj stosowany do czcionek
5. float: left; - pozycja elementu dosuniętego do lewej krawędzi
6. float: right; - pozycja elementu dosuniętego do prawej krawędzi
7. font-color: yellow; - kolor czcionki, określając inne parametry czcionki można pominąć font pisząc tylko color: yellow;
8. font-family: Tahoma, Arial, Helvetica, sans-serif; - definiuje rodzinę czcionek np. Tahoma a w razie jej braku następną Arial itd.
9. font: italic 20px Impact; - definiuje czcionkę pochyłą, wymiar 20px, typ Impact
10. font-size: 4em; - wielkość czcionki: 4em;
11. font-weight: bold; - grubość czcionki: bold;=gruba;
12. font-weight: normal; - grubość czcionki: normal;=cienka
13. height: 130px; wysokość: 130px; = 45mm na ekranie 17", 1px = 0.34mm
14. letter-spacing: -2px - odległość między literami -2px oznacza skupienie liter
15. margin-top: 10px; - margines górny, G=10px, dla wszystkich marginesów G P D L dopuszcza się stosowanie wartości ujemnych
16. margin-right: 20px; - margines prawy, P=20px
17. margin-bottom: -10px; - margines dolny, D=-10px, stosowany do usunięcia odstępu pomiędzy nagłówkiem <h1> a grafiką lub tekstem
18. margin-left: 40px; - margines lewy, L=40px
19. margin: 10px 20px -10px 40px; - zapis zbiorczy marginesów G P D L zajmuje mniej kodu niż cztery oddzielne zapisy marginesów
20. margin: 0 auto; - jest skrótem zapisu margin: 0 auto 0 auto; i oznacza że G=D=0 a P=L=auto co daje centryczne ustawienie względem krawędzi ekranu
21. padding: 1px 0 0 1px; - zapis zbiorczy odstępów wewnątrz bloku, możliwy jest zapis każdego odstępu osobno jak w wypadku marginesów
22. position: absolute; - pozycjonowanie elementu względem górnej lewej krawędzi przeglądarki - ekranu, deklaracjami top:Npx; i left:Mpx;
23. position: relative; - zmiana pozycjonowania absolute na nowe, względem lewej górnej krawędzi elementu wyznaczonego deklaracjami selektora
24. text-align: center; - wyrównanie tekstu: centryczne; nazywane wyśrodkowaniem
25. text-align:right; - wyrównanie tekstu: do prawej; części elementu div
26. text-decoration: none; - tekst z usuniętym podkreśleniem
27. text-decoration: underline; - tekst podkreślony
28. width: 900px; szerokość: 900px; = 297mm na ekranie 17", 1px = 0.33mm

SŁOWNIK

Określeń i zwrotów stosowanych na stronach anglojęzycznych opisujących budowę nagłówków.

Określenia menu

rollover - zmiana wyglądu elementu w odpowiedzi na najechanie na niego kursorem. W wypadku menu elementem jest przycisk zmieniający kolor, tła lub znaków względnie obu tj. tła i znaków jednocześnie.