KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

Wielkość: px

Rozpocząć pokaz od strony:

Download "KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)"

Julia Smolińska
8 lat temu
Przeglądów:

1 Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego Gdańsk

2 Tło Tło jednolite Kolor tła ustala właściwość background-color. background-color: red; background-color: transparent; /*tło przezroczyste*/ Grafika w tle Grafikę w tle ustala właściwość background-image. background-image: url(./sciezka/tło.png); /*ścieżka jest zawsze względna do lokalizacji arkusza stylów*/ 2

Grafika w tle Grafikę w tle ustala właściwość background-image.

3 Tło c.d. Grafika w tle c.d. Poprzez użycie background-repeat. Właściwość ta może przyjmować wartości: repeat (grafika jest powtarzana, wypełnia całą powierzchnię tła zachowanie domyślne), repeat-x (g. jest powtarzana tylko w poziomie), repeat-y (g. jest powtarzana tylko w pionie), no-repeat (g. jest wstawiana tylko w jednym miejscu). 3

całą powierzchnię tła zachowanie domyślne), repeat-x (g.

4 Używając background-position możemy ustalić poziomą i pionową pozycję grafiki. Lewy górny róg jest wartością domyślną. Właściwość ta może przyjmować: jedną wartość: o center - obrazek na środku (w centrum), o left - obrazek po lewej, o right - po prawej, o top - na górze, o bottom - na dole, o jednostka długości - odległość od lewej krawędzi, dwie wartości (oddzielone spacją): o left top - lewy-górny róg, o left bottom - lewy-dolny róg, o right top - prawy-górny róg, o right bottom - prawy-dolny róg, o dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej. 4

górze, o bottom - na dole, o jednostka długości - odległość od lewej krawędzi, dwie wartości (oddzielone spacją): o left top - lewy-górny róg, o left

5 Grafika w tle c.d. (przykłady) background-position: 0 0; /*lewy górny róg*/ background-position: 100% 100%; /*prawy dolny róg*/ background-position: 10px 5px; /*grafika odsunięta o 10 pikseli od lewej i o 5 pikseli od góry*/ background-position: 50% 0; /*grafika umieszczona na górze i wyśrodkowana w poziomie*/ 5

100% 100%; /*prawy dolny róg*/ background-position: 10px 5px; /*grafika

6 Grafika w tle c.d. (przykłady) Przez użycie background-attachment uzyskujemy możliwość przesuwanie grafiki. Wartości dostępne w ramach tej właściwości to: fixed (tło jest nieruchome względem okna przeglądarki), scroll (tło przesuwa się razem ze stroną). Skrócony zapis właściwości tła: background. background: red url(bg_plik.png) 5px 100% no-repeat; 6

Wartości dostępne w ramach tej właściwości to: fixed (tło jest nieruchome względem okna

7 Style tekstu Kolor Kolor tekstu (w tym również domyślny kolor dla podkreślenia i obramowania elementu ) ustala właściwość color. p {color: gray} 7

8 Style tekstu c.d. Krój pisma Krój pisma ustala właściwość font-family. Wybór kroju pisma określa się listą krojów ułożoną wg kolejności od najbardziej pożądanej. Ostatni na liście powinien się znaleźć krój typu: sans-serif - krój bezszeryfowy, np. Arial, serif - krój szeryfowy, np. Times, monospace - krój o stałej szerokości znaków, np. Courier font-family: Verdana, Helvetica, sans-serif; 8

Ostatni na liście powinien się znaleźć krój typu: sans-serif - krój bezszeryfowy, np.

9 Style tekstu c.d. Wielkość pisma Wielkość pisma ustala właściwość font-size. Stosowane jednostki absolutne to xx-small, x-small, small, medium, large, x-lagre, xxlarge. Dopuszczalne są pozostałe jednostki CSS (pt, ex, em, px itd.). body {font-size: 0.9em;} 9

10 Style tekstu c.d. Grubość pisma Grubość pisma ustala właściwość font-weight. Podstawowe wartości dla grubości to normal (zwykła) oraz bold (wytłuszczona). p.wazne {font-weight: bold;} 10

11 Style tekstu c.d. Pochylenie Pochylenie pisma ustala właściwość font-style. Właściwość tej można przypisać jedną z dwóch wartości: normal (normalna) oraz italic (kursywa). p.kursywa {font-style: italic;} 11

12 Style tekstu c.d. Wariant pisma Wariant pisma pisma ustala właściwość font-variant, której możemy przypisać wartość small-caps (kapitaliki), która zamienia litery małe na wielkie, ale z zachowaniem wysokośći liter małych. 12

13 Style tekstu c.d. Odstęp między literami Odstęp między literami ustala właściwość letter-spacing. Ustawiona na 0 (zero) oznacza normalny odstęp. Dopuszczalne są wartości ujemne. h1 {letter-spacing: 0.3ex;} 13

14 Style tekstu c.d. Odstęp między słowami Odstęp między słowami ustala właściwość word-spacing. Dopuszczalne są wartości ujemne. 14

15 Style tekstu c.d. Wysokość linii Wysokość linii ustala właściwość line-height. Może przyjmować wartości bez jednostki, które oznaczają krotność wysokości linii tekstu. Dopuszczalne jest określenie wysokości za pomocą wartości z jednostką. h3 {line-height: 1.25} /*Wysokość linii będzie 1¼ wysokości tekstu*/ 15

16 Style tekstu c.d. Zapis skrócony Właściwości opisujące styl tekstu można połączyć wg schematu: font: styl wariant grubość wielkość/wysokość-linii krój-pisma, krój-pisma 16

17 Style tekstu c.d. Dekoracja tekstu Dodanie ozdobników tekstu umożliwia właściwość text-decoration. Może ona przyjmować jedną z wartości: none (zwyczajna), blink (migający tekst), line-through (przekreślony tekst), overline (nakreślenie), underline (podkreślenie). #menu a {text-decoration:none;} #menu a:hover {text-decoration:underline;} 17

Może ona przyjmować jedną z wartości: none (zwyczajna), blink (migający tekst),

18 Style tekstu c.d. Położenie tekstu wewnątrz elementu blokowego Położenie tekstu wewnątrz elementu blokowego określa właściwość text-align. Może ona przyjmować jedną z wartości: left (wyrównanie do lewej), right (do prawej), center (wyśrodkowany), justify (rozciągnięcie tekstu do obu krawędzi). p.uwaga {text-align:center;} 18

blokowego określa właściwość text-align.

19 Style tekstu c.d. Położenie tekstu w linii tekstu Położenie tekstu w linii tekstu określa właściwość vertical-align. W przypadku elementów liniowych (inline) wyrównuje zawartość danego względem linii elementu nadrzędnego (np. <strong> względem linii w <p>). Może ona przyjmować jedną z wartości: baseline (wyrównuje linie bazow), middle (wyśrodkowuje element w pionie), sub i super (pozycja subskryptu i superskryptu), % lub długość. 19

W przypadku elementów liniowych (inline) wyrównuje zawartość danego względem linii elementu nadrzędnego (np.

20 Style tekstu c.d. Wcięcie akapitowe Wcięcie pierwszej linii bloku (np. dla <p>) określa właściwość text-indent. Dopuszczalne są wartości ujemne. p {text-indent: 1em;} 20

21 Style tekstu c.d. Kontrola wielkości liter Wielkość wyświetlanych liter może być kontrolowana przez właściwość text-transform. Może ona przyjmować jedną z wartości: none (bez zmian), capitalize (każdy wyraz zaczyna się od wielkiej litery), uppercase (wyświetlanie wielkimi literami), lowercase (małymi literami). 21

22 Style list Rodzaj wypunktowania Rodzaj wypunktowania ustala właściwość list-style-type. Może ona przyjmować jedną z wartości: none (bez wypunktowania), disc, circle i square (nadające wypunktowaniu kształt odpowiednio dysku, koła lub kwadratu). Wypunktowania list numerowanych (<ol>) mogą być m.in. dziesiętne (decimal), rzymskie (upper-roman) literami alfabetu łacińskiego (lower-alpha) lub greckiego (lower-greek). 22

23 Style list c.d. Graficzne wypunktowanie Graficzne wypunktowanie ustala właściwość list-style-position. Może ona przyjmować jedną z wartości: outside (wypunktowanie umieszczone zostanie na zewnątrz listy), inside (wyróżniki wewnątrz wykazu). li {list-style: disc url(wyroznik.png);} 23

24 Elemnety pływające Do tworzenia obiektów pływających przy lewej lub prawej krawędzi elementu, w którym się znajdują służy właściwość float. Przykładowym zastosowaniem float jest wstawianie ilustracji i adnotacji z boku tekstu - podobnie jak opływane ramki tekstowe i grafiki w programach do składu tekstu. img.float_left {float: left;} 24

25 Pozycjonowanie Pozycjonowanie umożliwia rozmieszczenie elementów w ramach tworzonej strony. Specyfikacja CSS rozróżnia następujące metody pozycjonowania: 1. domyślne - statyczne, 2. bezwzględne, 3. względne, 4. ustalone. 25

26 Pozycjonowanie c.d. Pozycjonowanie statyczne (normalny przepływ treści) Elementy układają się kolejno jeden pod drugim. Obecność elementu w dokumencie odsuwa inne elementy, tak że żadne na siebie nie zachodzą. W CSS jest to zachowanie domyślne i określane jest pozycją statyczną (position: static). p.statyczne {position: static;} 26

27 Pozycjonowanie c.d. Pozycjonowanie bezwzględne Pozycjonowanie bezwzględne polega na określaniu dokładnego położenia elementu względem elementu zawierającego (*) (domyślnie <body>). p {position:absolute; top:0; right:0;} /*prawy górny róg akapitu będzie w prawym górnym rogu elementu zawierającego*/ position:absolute; left: 50px; bottom: 25%; /*lewy dolny róg elementu będzie odsunięty 50 pikseli od lewej i 25% od dołu*/ (*) tu w znaczeniu: najbliższy nadrzędny element, który ma position inny, niż (domyślny) static 27

28 Pozycjonowanie c.d. Pozycjonowanie względne Pozycjonowanie względne polega na określaniu położenia względnego elementu w odniesieniu do jego domyślnej lokalizacji. p {position: relative; topt:1cm; left:1cm;} 28

29 Pozycjonowanie c.d. Pozycjonowanie stałe Pozycjonowanie stałe skutkuje tym, iż element, którego dotyczy zawsze pozostaje w widocznej części okna przeglądarki. Jest równoważne position:absolute, z tym wyjątkiem, że zamiast pozycjonować względem elementu zawierającego zawsze pozycjonuje względem okna przeglądarki. p {position: fixed; top:10px; width:180px;} 29

Podobne dokumenty

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości