CSS kaskadowe arkusze stylów (Cascading Style Sheets)

Lista reguł służących do ustawienia wizualnej części strony internetowej. W jednym miejscu definiujemy sposób wyświetlania wielu elementów strony.  Przygotowany styl CSS możemy wykorzystywać równocześnie na wielu naszych podstronach.
Wyróżniamy trzy typy arkuszy stylów CSS: wpisane, osadzone i zewnętrzne.
Styl wpisany

      dotyczy pojedynczego znacznika języka html:

Styl osadzony

      umieszczany jest w nagłówku dokumentu

Styl zewnętrzny

      umieszczany jest w osobnym pliku z rozszerzeniem .css i wywoływany w nagłówku dokumentu html za pomocą znacznika link

W dokumencie można umieszczać jednocześnie wszystkie rodzaje stylów, mają one jednak swoją hierarchię ważności

– kaskadowość stylów:

        Wpisany

OsadzonyZewnętrznyDomyślne ustawienia przeglądarki

Selektor – element do sformatowania
Deklaracja – jedna lub kilka cech, którym przypisane są wartości, definicję jednej cechy z przypisaną wartością oddzielamy od drugiej średnikiem.

        p {

color: red;font-family:”arial”;font-weight:bold;}

Możemy grupować selektory przypisując kilku selektorom tą samą cechę. Znaczniki selektorów oddzielamy przecinkami:

    p, h1, h2 {font-weight: bold}

w przypadku stosowania stylu wpisanego styl wprowadzamy bezpośrednio w znaczniku, (stosujemy tylko w wyjątkowych sytuacjach):
h1 styleee=”text-align: center; color: blue”
Nagłówek poziomu pierwszego z ustawionym stylem wewnętrznym /h1    🙂

Ćwiczenie
umieść wywołanie stylu zewnętrznego umieszczonego w pliku tabele.css w swoim pliku galeria.html

      1. skopiuj i zapisz styl zewnętrzny w swojej strukturze folderów strony
      2. wywołaj skrypt w nagłówku strony wpisując:
      3. sprawdź rezultat wyświetlając galerię w przeglądarce
      4. zmodyfikuj plik stylu zewnętrznego zmieniając graficzne elementy strony np. tło, kolory, rodzaje wyświetlanych czcionek itp.
      5. na głównej stronie swojego projektu sprawdź działanie skryptu link.css
          6. dostosuj skrypt link.css do swoich potrzeb

Więcej znajdziesz tutaj: http://www.kurshtml.edu.pl/css/

<!–

–>

Ten wpis został opublikowany w kategorii HTML na skróty, Uncategorized. Dodaj zakładkę do bezpośredniego odnośnika.