Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

CSS Cascading Style Sheets. Rodzaje stylów wierszowe wewnętrzne zewnetrzne.

Podobne prezentacje


Prezentacja na temat: "CSS Cascading Style Sheets. Rodzaje stylów wierszowe wewnętrzne zewnetrzne."— Zapis prezentacji:

1 CSS Cascading Style Sheets

2 Rodzaje stylów wierszowe wewnętrzne zewnetrzne

3 Dziedziczenie Element stojący niżej w hierarchii przyjmuje cechy elementu znajdującego się wyżej, chyba że jawnie zostaną zdefiniowane nowe reguły. np. jeśli akapit znajduje się w warstwie, to przejmuje styl przypisany warstwie.

4 Kaskadowość wyjaśnia spos ó b działania styl ó w, w przypadku gdy wiele reguł odnosi się do tych samych element ó w. Najpierw nakładane są style bardziej ogólne, a dopiero potem bardziej szczegółowe. Ostateczny styl elementu to ten nałożony najpóźniej, czyli znajdujący się najniżej w kaskadzie.

5 Kolejność nakładania sektory ogólne sektory elementu, sektory klas i pseudoklas, sektory identyfikatorów. style z zewnętrznych plików, style ze znaczników, style wierszowe

6 Styl wierszowy treść znacznika style= "definicja1; definicja2;... definicja N np. Czcionka o rozmiarze 18 pt drukarskich i kolorze czerwonym

7 Styl wewnętrzny deklaruje styl dla wszystkich objętych nim elementów. Umieszcza się go w nagłówku strony. element1{ definicja stylu} element2{ definicja stylu}

8 Styl zewnętrzny Styl zdefiniowany w osobnym (zewnętrznym) pliku. W sekcji nagłówkowej umieszczony jest wówczas link wskazujący ten plik.

9 Budowa stylu Styl składa się z reguł. Pojedyncza reguła składa się z selektora wraz z zestawem definicji (par cecha : wartość). Każda definicja powinna zakończyć się znakiem średnika. Selektor pojedynczego elementu – wybiera dany element strony definiowany przez określony znacznik, np. div{color:green; font-size:20}

10 Selektor ogólny – używamy, gdy chcemy zmienić pewną cechę dotyczącą każdego elementu danej witryny np. *{color:blue; font-size:20}

11 Selektor klasy – pozwala zdefiniować zestaw reguł (klasę), które można potem przypisywać dowolnym elementom strony np. element.nazwa_klasy{definicje} jeśli dana klasa ma obowiązywać dla dowolnych elementów należy użyć selektora ogólnego.nazwa_klasy{definicje}

12 Użycie klasy dla zmodyfikowania właściwości elementu treść znacznika definicja klasy.duzezielone{font-size:20pk;color:green;} użycie treść

13 Selektor identyfikatora umożliwia przypisanie stylu elementowi witryny o zadanym identyfikatorze (posiadającemu atrybut id) #identyfikator {definicje} np. # specakapit{color:red;} użycie treść

14 Selektor pseudoklasy oznaczają elementy o określonym stanie bądź właściwości element:pseudo_klasa{definicje} Lista pseudoklas: :activeelement w stanie aktywnym :first-childbędący pierwszym elem. podrzędnym :focuselement, który ma focus :hovernad którym znajduje się kursor myszy :langelement, który ma atrybut lang specyficznej wartości :linknieodwiedzony odnośnik :visitedodwiedzony odnośnik

15 Selektor wieloelementowy tą samą regułę nadajemy wielu elementom witryny element1, element2,..., elementN {definicje} np. h1,h2,h3{color:green}

16 Czcionki Rozmiar czcionki font-size:wartośćjm; jm – np. 1cm, 8mm,12pt, 20px standard – 12pt jm=2em oznacza dwukrotne powiększenie bieżącej czcionki; =0,6 zmniejszenie czcionki do 6/10 bieżącej czcionki nazwane czcionki tak jak w znaczniku, np. small, large,...

17 Czcionki Rodziny czcionek font-family:nazwa1, nazwa2,...; nazwa – nazwa czcionki lub rodziny czcionek np. font-family: " Times New Roman " ; font-family: Arial " ; font-family: " sans-serif " ; font-family: " fantasy " ;

18 Czcionki Style i warianty czcionek font-style:wartość np.font-style: " italic " ; font-variant: " small-caps " ; Grubość czcionek stosuje się wartości bezwzględne opisowe (normal, bold) i numeryczne (100, 200,..., 900) oraz względne (bolder, lighter) czcionka zwykła to 400, bold to 700 np.

19 Cecha font określenie w jednym miejscu wszystkich cech czcionki font: font-style font-variant font-weight font-size / line-height font family; przykład: style= " font: italic bold 10pt Times,serif; "

20 Formatowanie tekstu Wyrównanie tekstu w poziomie style= " text-align:right " ; :left; :center; :justify; Właściwość text-align wyrównuje nie tylko tekst, ale również nietekstowe elementy witryny

21 Wyrównanie tekstu w pionie style= " vertical- align:baseline; " :baseline; - wyrównanie do linii bazowej :bottom; - dolna linia elementu wyrównana jest do najniższej linii wiersza :middle; - wyrównanie do linii środkowej :sub; - indeks dolny :super; - indeks górny : top; - górna linia elementu wyrównana do najwyższej linii wiersza

22 Bezpośrednie określanie przesunięcia w pionie style= " vertical-align:20px; " style= " vertical-align:2em; " przesunięcie w górę o dwie wysokości czcionki elementu nadrzędnego style= " vertical-align:-2em; " przesunięcie w dół o dwie wysokości czcionki elementu nadrzędnego

23 Pionowe odstępy w tekście line – height odstępy między wierszami przykład line – height:2; odstęp równy dwukrotnej wielkości czcionki line – height:85%; odstęp 75% wielkości czcionki

24 Odstępy miedzy słowami i znakami word-spacing – dodatkowy odstęp między słowami letter-spacing – dodatkowy odstęp między literami przykład word-spacing:1cm - standardowy odstęp między wyrazami zostanie zwiększony o 1cm letter-spacing:2px - standardowy odstęp między literami zostanie zwiększony o 2piksele;-2px zmniejszony o 2 piksele

25 Wcięcia text-indent przyjmuje dwa rodzaje wartości: określone jednostką miary; określony procentowo w stosunku do elementu nadrzędnego przykład text-indent:1cm standardowe wcięcie o 1 cm w prawo; :-1cm w lewo

26 Wyróżnienia text-decoration blink – tekst migający line-through – tekst przekreślony overline – podkreślenie nad tekstem underline – tekst podkreślony przykład text-decoration:blink line-trough uwaga! blink nie rozpoznawany przez Internet Explorera

27 Transformacja wielkości liter text-transform – kontrola wielkości liter capitalize – zamiana pierwszej litery każdego słowa na wielką lowercase – zmiana wszystkich liter na małe; uppercase – zamiana wszystkich liter na wielkie

28 Obsługa białych znaków white-space nowrap – sekwencje białych znaków będą zastępowane przez pojedynczą spacje; wiersze przełamywane tylko przez ; pre – sekwencje białych znaków będą wyświetlane w całości; wiersze przełamywane tylko w miejscach wystąpienia znaków końca wiersza; pre-line – sekwencje białych znaków będą zastępowane przez pojedynczą spacje; wiersze przełamywane w razie potrzeby oraz w miejscach wystąpienia znaków końca wiersza; pre-wrap – sekwencje białych znaków będą wyświetlane w całości; wiersze przełamywane w razie potrzeby oraz w miejscach wystąpienia znaków końca wiersza;

29 Kierunek tekstu direction – określa kierunek tekstu ltr - od lewej do prawej; rtl – od prawej do lewej

30 Style list Wyr óż niki listy nienumerowanej list-style-type:square; :disc; :circle; list-style-image:url( " odnośnik_do_obrazu " );

31 Kolory color:określenie koloru background-color: określenie koloru tła ActiveBorder – kolor obramowania aktywnego okna; ActiveCaption – kolor tła paska tytułu; AppWorkspace – kolor tła okna z wieloma dokumentami; Background – kolor tła pulpitu; ButtonFace – kolor pierwszoplanowy elementu wyświetlanego jako trójwymiarowy;

32 ButtonHighlight – kolor podświetlonego (wskazanego) elementu wyświetlonego jako trójwymiarowy. ButtonShadow – kolor cienia elementu wyświetlanego jako trójwymiarowy; ButtonText – kolor tekstu na przycisku; CaptionText – kolor tekstu podpisu; GreyText – kolor tekstu nieaktywnych opcji; Highlight – kolor wyróżnionych elementów w kontrolkach; HighlightText – kolor tekstu wyróżnionych elementów w kontrolkach; InactiveBorder – kolor obramowania nieaktywnego okna;

33 InactiveCaption – kolor paska tytułu nieaktywnego okna; InactiveCaptionText – kolor tekstu na pasku tytułu nieaktywnego okna; InfoBackground – kolor tła podpowiedzi; InfoText – kolor tekstu podpowiedzi; Menu – kolor tła menu; MenuText – kolor tekstu menu; Scrollbar – kolor głównej części paska przewijania; ThreeDDarkShadow – ciemniejszy cień elementów wyświetlanych jako trójwymiarowe; ThreeDface – główny kolor elementów wyświetlanych jako trójwymiarowe;

34 ThreeDHighlight – kolor podświetlenia elementów wyświetlanych jako trójwymiarowe; ThreeDLightShadow – jasny cień elementów wyświetlanych jako trójwymiarowe; ThreeDShadow – kolor cienia elementów wyświetlanych jako trójwymiarowe; Window – kolor tła okna; WindowFrame – kolor obramowania okna; WindowText – kolor tekstu w oknie;

35 Obrazy jako tło background-image: url('odnośnik do obrazu') powtarzanie tła obrazu repeat – obraz powtarzany w poziomie i pionie (wartość domyślna); repeat-x – obraz powtarzany w poziomie; repeat-y – obraz powtarzany w pionie; no-repeat – obraz niepowtarzalny

36 Zakotwiczenie obrazów tła background-attachment :scroll – tło przewijane razem ze stroną (wartość domyślna) :fixed - tło zakotwiczone (nieprzewijalne); przykład body{background-image:url('tlo.jpg'); background-attachment:fixed}

37 Pozycja obrazu tła background-position :top left –góra w pionie; lewo w poziomie :top center - góra w pionie; środek w poziomie :top right - góra w pionie; prawo w poziomie :center left - środek w pionie; lewo w poziomie :center center - środek w pionie; środek w poziomie :center right - środek w pionie; prawo w poziomie

38 background-position (c.d.) :bottom left –dół w pionie; lewo w poziomie :bottom center - dół w pionie; środek w poziomie :bottom right - dół w pionie; prawo w poziomie :xposjm yposjm lewy góry róg 0% 0%; prawy dolny 100% 100% przykład :20px 5cm – obraz umiejscowiony 20 pikseli od lewego krańca oraz 5 cm od górnego krańca akapitu

39 Marginesy, obrysy i obramowania Marginesy dzielą się na: zewnętrzne – określają odległość od innych elementów witryny; wewnętrzny - definiuje odległość miedzy krawędzią danego elementu a jego treścią

40 Marginesy zewnętrzne margin-top – margines górny; margin-bottom – margines dolny; margin-left – margines lewy; margin-right – margines prawy Przykład: margin-right:12px; margin-left:20px; margin:10px 15px 20px 15px top right bottom left margin:10px 20 px top i bottom po10px, left i right po 20px

41 Marginesy wewnętrzne padding-top – wypełnienie górne; padding-bottom – wypełnienie dolne; padding-left – wypełnienie lewe; padding-right – wypełnienie prawe. Przykład: padding -right:12px; margin-left:20px; padding:10px 15px 20px 15px top right bottom left padding:10px 20 px top i bottom po10px, left i right po 20px

42 Pełne obramowania (ramki) border-style – styl ramki; border-width – grubość ramki; border-color – kolor ramki. Każda z tych właściwości ma np. rodzaje definicji: właściwość:góra prawo dół lewo; właściwość:góra prawo dół; właściwość:góradół prawolewo; właściwość:wartość; Grubość ramki oprócz podania wartości z jednostką miary może być podane wartości: thin, medium, thick

43 Styl ramki hidden – brak ramki (ramka ukryta); dotted – ramka kropkowana; dashed – ramka kropkowana; solid – ramka pełna; double – ramka z podwójną linią; groove – ramka 3D stymulująca rowek; ridge – ramka 3D stymulująca wypukłą krawędź; inset – ramka 3D stymulująca wgłębienie; outset – ramka 3D stymulująca wypukłość.

44 Skrócona definicja obramowania border: grubość styl kolor przykład border: 1px solid black border: 0.2cm dotted obramowanie cząstkowe border-top-color border-top-width border-top-style

45 Obrys outline: kolor styl szerokość_obrysu obrys to zewnętrzna obwódka ramki. outline-color - kolor obrysu outline-style – styl obrysu outline-width – szerokość obrysu

46 Tabele Obramowania, wypełnienia i tła dodajemy do stylu Table, Td, Tr tak jak w ramkach. dodatkowo: border-collapse:collapse; - fragmenty ramek sąsiadujących komórek zostaną połączone caption-side: bottom; - podpis pod tabelą; :top; - nad tabelą.

47 Style tworzące układ strony #naglowek{width:100%;float:left;} #lewypanel{width:15%;float:left;} #srodkowypanel{width:55%;float:left;} #prawypanel{width:25%; float:right;} #stopka{width:100%;float:left;} #panelesrodkowe{min-height:300px; padding:10px;}


Pobierz ppt "CSS Cascading Style Sheets. Rodzaje stylów wierszowe wewnętrzne zewnetrzne."

Podobne prezentacje


Reklamy Google