CSS Kaskadowe Arkusze Stylów

Podobne dokumenty
Kaskadowe arkusze stylów (CSS)

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Tworzenie Stron Internetowych. odcinek 6

CSS. Kaskadowe Arkusze Stylów

Elementarz HTML i CSS

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Ćwiczenie 9 - CSS i wstawianie CSS

za pomocą: definiujemy:

Tworzenie Stron Internetowych. odcinek 6

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

Dokument hipertekstowy

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Aplikacje internetowe

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

p { color: yellow; font-weight:bold; }

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

PORADNIK KODOWANIA: CSS

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość

2 Podstawy tworzenia stron internetowych

Witryny i aplikacje internetowe

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

STRONY INTERNETOWE mgr inż. Adrian Zapała

kaskadowe arkusze stylów

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

Układy witryn internetowych

Elementy div i style CSS w praktyce

O stronach www, html itp..

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

I. Dlaczego standardy kodowania mailingów są istotne?

Podstawy (X)HTML i CSS

Przedmiot: Grafika komputerowa i projektowanie stron WWW

URL:

Tworzenie stron internetowych w kodzie HTML Cz 5

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>


Krok 1: Stylizowanie plakatu

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

Pierwsza strona internetowa

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

Podstawy technologii WWW

29. Poprawność składniowa i strukturalna dokumentu XML

Blok dokumentu. <div> </div>

Zrozumieć CSS. Co To Jest Styl?

CSS - layout strony internetowej

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr )

Masz pomysł na lepszy wygląd?

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

PRÓBNY EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE CZĘŚĆ PRAKTYCZNA

Jednostki miar stosowane w CSS

Projektowanie aplikacji internetowych. CSS w akcji

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Tworzenie Stron Internetowych. odcinek 5

Microsoft Office 2016 Krok po kroku

Wordpress: Joomla! Drupal.

Aplikacje WWW - laboratorium

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

HTML (HyperText Markup Language) hipertekstowy język znaczników

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

TWORZENIE PREZENTACJI MS POWERPOINT

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

Arkusze stylów CSS Cascading Style Sheets

Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT

I. Formatowanie tekstu i wygląd strony

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

1.Formatowanie tekstu z użyciem stylów

Czcionki bezszeryfowe

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

Spis treści. Lekcja 1: Podstawy programu Word 1. Lekcja 2: Podstawy dokumentu 34. Umiejętności do zdobycia w tej lekcji 34

Narzędzia informatyczne w językoznawstwie

BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT

JAK POŁĄCZYĆ HTML I CSS?

Osadzenie pliku dźwiękowego na stronie www

Systemy internetowe Wykład 2 CSS

CSS. Æwiczenia. Autor: Maria Sokó³ ISBN: Format: A5, stron: 152 Przyk³ady na ftp: 797 kb

Backend Administratora

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Plan. Raport. Tworzenie raportu z kreatora (1/3)

inż. Konrad Postawa Akademia Aktywnego Seniora Wolontariusza

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Tomasz Grześ. Systemy zarządzania treścią, cz. II

Źródła. cript/1.5/reference/ Ruby on Rails: AJAX: ssays/archives/

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>

Zadanie 1. Stosowanie stylów

Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości

Podstawy tworzenia stron internetowych

DODAJEMY TREŚĆ DO STRONY

Transkrypt:

Wprowadzenie CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets, kaskadowe arkusze stylów) są językiem opisu stylów używanym do opisu prezentacji dokumentu napisanego w HTML-u lub XML-u (włączając w to różne języki XML-owe takie jak XHTML czy SVG - Scalable Vector Graphics). W produktach spis treści wprowadzenie podstawy CSS CSS 3 przydatne linki bazowanych na XUL-u, takich jak Mozilla Suite, Firefox czy Thunderbird, CSS jest także używany do opisu stylu interfejsu aplikacji użytkownika (GUI). Na przykład Motywy w ogromnym stopniu korzystają z CSS do określenia wyglądu aplikacji. CSS jest specyfikacją W3C Znaczniki HTML zostały zaprojektowane do określania struktury dokumentu. Tak by określać: "To jest nagłówek", "To jest paragraf", "To jest tabela", wykorzystując do tego odpowiednie znaczniki takie jak <h1>, <p>, <table> i im podobne. Przedstawienie zawartości dokumentu miało być zadaniem przeglądarki a nie znaczników. Wtedy dwie najczęsciej wykorzystywane przeglądarki czyli Netscape Navigator i Internet Explorer dodawały do oryginalnej specyfikacji HTML dodatkowe znaczniki i atrybuty takie jak <font> lub atrybut color, co powodowało ze pisanie stron WWW, których treść była oddzielona od prezentacji, stawało się coraz trudniejsze. W celu rozwiązania tego problemu konsorcjum W3C, które jest odpowiedzialne za standaryzacje HTML, stworzyło Style jako dodatek do HTML. Obecnie praktycznie każda przeglądarka w jakimś stopniu obsługuje Kaskadowe Arkusze Stylów. Technologia CSS stopniowo wypiera inne metody definiowania układu i wyglądu witryn WWW. Uniwersalność i elastycznośc kaskadowych arkuszy stylów sprawiają, że zmiana kolorystyki lub konstrukcji strony sprowadza się do zmodyfikowania arkusza definiującego wygląd określonych elementów. Podstawy CSS Kiedy podstawowa struktura dokumentu zostanie utworzona, można zacząć formatować jego wygląd za pomocą arkuszy stylów stylów. Tworzenie stylów Każda reguła tworząca arkusz stylów składa się z trzech częsci: selektora, właściwości i wartości, którą dana właściwość przyjmuje. selektor {właściwość: wartość;...} Selektor określa do jakiego elementu HTML będzie odnosić się dana reguła stylu. Wszystkie właściwości selektora umieszczane są wewnątrz nawiasów klamrowych. Właściwość i wartość oddzielone są od siebie dwukropkiem, a od kolejnych par właściwość:wartość oddzielone są średnikiem. Właściwości atrubutu oraz ich wartości określa specyfikacja W3C. Przykład: Aby wyświetlić wszystkie akapity czcionką Arial o kolorze czerwonym należy stworzyć selektor, który wybierze jedynie elementy <p> nie zmieniając zadnego innego elementu w dokumencie: p {font-family: Arial; color:#ff0000;} Specyfikacja CSS pozwala również na grupowanie selektorów wewnątrz jednej reguły. h1, h2, h3, h4, {font-family: Arial; color:#ff0000;} Wybór elementu 1 z 5 16 paź 2008 12:41

Najczęstszym kryterium wyboru elementów, jakie mają być formatowane jest ich nazwa. W ten sposób powyżej zostały wybrane wszystkie elementy <p> oraz grupa znaczników nagłówkowych. Równie często stosowanymi sposobami są: wybór elementu na podstawie klasy, Jeżeli elementy zostały przydzielone do pewnych klas: <div class="klasa1"> Do danej klasy może należeć dowolna ilośc elementów. To nazwy tych klas można podać w selektorze reguły stylów..klasa1 {color: red;} Aby wybrać elementy na podstawie klasy należy w arkuszu stylów użyć znaku kropki (.) wybór elementu na podstawie identyfikatora, Jeżeli zostały określone identyfikatory elementów: <div id="ident_1"> Każdy atrybut id w dokumencie HTML musi mieć unikalną wartość. Żadne dwa elementy nie mogą mieć tego samego identyfikatora. To nazwy tych identyfikatorów można podać w selektorze reguły stylów. #ident_1 {color: red;} Aby wybrać element na podstawie identyfikatora należy w arkuszu stylów użyć znaku krzyżyka (#) wybór elementu na podstawie kontekstu. W CSS można także wybierać elementy na podstawie ich elementów nadrzędnych: <div class="klasa1"> <p> Element nadrzędny to taki, w którym jest umieszczony interesujący nas element. </p> A zatem aby określić dowolny element <p> umieszczony wewnątrz elementu <div> należącego do klasy "klasa1", należy użyc takiego selektora: div.klasa1 p {color: red;} Powyższy zapis oznacza, że każdy element <p> zawarty wewnatrz bloku <div> klasy "klasa1", będzie wyświetlany w kolorze czerwonym. 2 z 5 16 paź 2008 12:41

Stosowanie stylów Powyżej zostały opisane podstawowe zagadnienia związane z tworzeniem reguł stylów. Najlepszym sposobem ich wykorzystania jest łączenie tych reguł w arkusze stylów. Dzieki temu możliwe jest określanie wyglądu pojedynczych elementów, całych dokumentów, jak również całych witryn WWW. Tworzenie zewnętrznego arkusza stylów Czynnośc ta sprowadza się do stworzenia pliku tekstowego o rozszerzesznu *.css i umieszczeniu w nim dowolnej ilości reguł. Po stworzeniu zewnętrznego arkusza stylów konieczne jest jego dołączenie lub tez zaimportowanie do dokumentu. Zatem aby dołączyc zewnętrzny arkusz stylów do dokumentu HTML, należy w sekcji dokumentu wpisać następujący kod: <link rel="stylesheet" type="text/css" href="style.css" /> Gdzie text/css oznacza, że arkusz stylów został stworzony w technologi CSS, a style.css jest nazwą pliku zawierającego reguły stylów. Możliwe jest dołączenie kilku arkuszy stylów do jednego dokumentu. Daje to użytkownikowi dokumentu możliwość wyboru jak używany dokument ma być wyświetlany. Specyfikacja pozwala na tworzenie bazy tzw. "trwałych stylów", które będą wykorzystywane niezależnie od wyboru użytkownika. Tworzyć można także bazę tzw. "stylów preferowanych" wykorzystywanych gdy używtkownik nie dokona żadnego wyboru, oraz "stylów alternatywnych", które będą aktywne, jeśli użytkownik je wybierze. <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style1.css" title="etykieta/> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="etykieta/> W ten sposób w odpowiedniej kolejności zostały zdefiniowane: trwały arkusz tzw. bazowy, preferowany arkusz, który będzie wykorzystywany automatycznie oraz alternatywny arkusz stylów. Każdy z nich należy dołączyć do dokumentu przy pomocy osobnego elementu <link> Tworzenie wewnętrznego arkusza stylów Wewnętrzne arkusze stylów są definiowane na samym początku dokumentu HTML (w sekcji HEAD). Aby stworzyć wewnętrzny arkusz stylów należy w sekcji HEAD dokumentu wstawić następujący kod: <style type="text/css"> W tym miejscu należy zdefiniować dowolną ilość reguł stylów. </style> 3 z 5 16 paź 2008 12:41

Importowanie zewnętrznego arkusza stylów Aby zaimportować zewnętrzny arkusz stylów należy wewnątrz elementu <style>, ale przed jakąkolwiek regułą wpisać następujący kod: <style type="text/css"> @import "arkusz_zewnętrzny.css" </style> Lokalne stosowanie stylów Lokalne stosowanie stylów jest prostym rozwiązaniem jednak nie pozwala ono na zgrupowanie stylów w celu ich łatwiejszej edycji lub aktualizacji. <p style="color: #FF0000; font-family: Arial;"></p> Dodawanie komentarzy do arkuszów stylów Dodawanie komentarzy do arkuszów stylów jest bardzo dobrym pomysłem, dzięki któremu można zapamiętać, w jakim celu zostały stworzone wyjątkowo skomplikowane reguły. Aby dodać komentarz do arkuszu stylów należy użyć następującej notacji: /* treść komentarza */ Komentarze mogą zawierać znaki nowej linii, a zatem można je zapisywać w kilku wierszach. Znaki komentarza można również umieszczać wokół reguł stylów przez co przeglądarka ich nie zinterpretuje - jest to dobra metoda testowania arkuszy stylów. Nie można natomiast zagnieżdżać komentarzy, czyli komentarz nie może zawierać kombinacji znaków */. CSS3 Trwają również prace nad CSS3. Język ten wzbogaci się o wiele nowych elementów w stosunku do poprzedników. Zmiany nie ograniczą się tylko do dodania nowych właściwości. Nowością jest modułowy charakter CSS3 - nie będzie to już jednolita rekomendacja, lecz kilkadziesiąt rekomendacji (plannowane 36 modułów), co pozwoli na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach, w zależności od potrzeb. Zredukuję całkowity rozmiar specyfikacji jako dokumentu oraz umożliwi łatwe uaktualnianie i dopracowywanie poszczególnych modułów z osobna a nie wydawania kolejnej wersji specyfikacji. CSS3 obecnie jest obsługiwany szczątkowo przez większość najnowszych przeglądarek (opartych o silnik Gecko np. Mozilla Firefox). Niektóre z nich posiadają eksperymentalne wsparcie dla wybranych właściwości CSS3 - w takim przypadku są one opatrywane odpowiednim prefiksem (np. -moz- dla Gecko, czy -o- dla Opery). Mozilla wprowadziła w swoich przeglądarkach blisko 170 eksperymentalnych właściwości. Jednym z takich eksperymentalnych modułów wprowadzonych przez Mozille jest moduł Multi-column layout. Stosowanie kolumn Własności CSS wprowadzone w przeglądarkach organizacji Mozilla pozwalają okreslić: 4 z 5 16 paź 2008 12:41

Liczbę kolumn <div class="sample" style="-moz-column-count: 2;"> Przykładowy tekst zostanie wyświetlony w dwóch kolumnach. Szerokość kolumn <div class="sample" style="-moz-column-width: 200px;"> Jeśli własność -moz-column-count nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Odstęp pomiędzy kolumnami <div class="sample" style="-moz-column-gap: 15px;"> Przeglądarka wyświetla kolumny przylegające do siebie. Nie jest to zachowanie pożądane. Aby poprawić tę sytuację, można za pomocą CSS ustawić dla kolumn odpowiednie wartości marginesów wewnętrznych lub zastosować jest własność -moz-column-gap Przykład: Czytanie tekstu wyświetlanego w długich wierszach jest trudne i męczące dla oczu - przenoszenie wzroku z końca jednej linii na początek drugiej zajmuje zbyt wiele czasu, łatwo jest zgubić się w tekście i rozpocząć czytanie niewłaściwego wiersza. Z tego powodu i aby w pełni wykorzystać szerokość ekranu, tekst na stronach internetowych - tak samo jak w gazetach - powinien być układany w sąsiadujących kolumnach o stałej szerokości. Niestety osiągnięcie tego efektu nie jest możliwe przy użyciu języków HTML i obecnego CSS bez wymuszania sztywnej wysokości kolumn, bądź też bez stosowania skomplikowanych skryptów. Przydatne linki i tytuły Linki: Organizacja W3C - http://www.w3.org/style/css/ Wikipedia Polska - http://pl.wikipedia.org/wiki/cascading_style_sheet w3schools - http://www.w3schools.com/css/default.asp Mozilla Project - http://developer.mozilla.org/pl/docs/kategoria:css Tytuły: Eric A. Mayer - CSS według Erica Mayera Elizabeth Castro - Po prostu HTML 4 5 z 5 16 paź 2008 12:41