Bezbolesny wstęp do CSS
|
|
- Małgorzata Nowakowska
- 8 lat temu
- Przeglądów:
Transkrypt
1 CZĘŚĆ 1 Bezbolesny wstęp do CSS HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i rozszerzenia...7 CSS rozwija się obok HTML... 8 Dlaczego CSS wygląda na trudny?... 9 Powody uczenia się CSS... 9 Przegląd terminów HTML oraz struktury strony...11 Projekt 1-1: Tworzymy stronę testową (próbkę) w HTML...14 HTML i CSS: skupiamy się na podobieństwach...17 Podstawowa terminologia CSS...17 Podstawowa składnia CSS...19 Dołączanie arkuszy stylów...20 Projekt 1-2: Tworzenie arkuszy stylów...22 Sprawdzian Rozumienie i używanie selektorów...27 Jak działają selektory...28 Rodzaje selektorów...28 Pojmowanie selektorów typu...29 Rozumienie selektorów potomka...29 Rozumienie selektorów atrybutów...31 Rozumienie pseudo-klas i pseudo-elementów...32 Projekt 2-1: Tworzymy bezstylową stronę Praca z selektorami typu...37 Lista selektorów typu...37 Podstawowa składnia selektora typu...38 Praca z selektorami potomka...40 Rozumienie drzewa dokumentu HTML...40 Używanie selektorów potomnych (kontekstowych)...42 Projekt 2-2: Zastosowanie selektorów typu i selektorów potomka...44 Praca z selektorami atrybutów...47 Selektory klasy...47 Selektory ID...48 Praca z pseudo-klasami i pseudo-elementami...51 Rozumienie pseudo-klas oraz pseudo-elementów...51 Rozpoznawanie pseudo-klas i pseudo-elementów...53 Projekt 2-3: Zastosuj selektory klasy, id, oraz "pseudo" do konstytucja.htm...54 Sprawdzian Przeglądanie własności CSS...61 Rozumienie własności i ich funkcji...62 Rozumienie własności...62 Pięć kategorii własności...63 Projekt 3-1: Konstruujemy ćwiczebną stronę HTML...70 Praca z własnościami...74 Sterowanie układem tekstu przy pomocy własności tekstu...74 Modyfikowanie czcionek przy pomocy własności czcionek...78 Dodaj kolor z pomocą własności koloru i tła...80 Pozycjonowanie elementów przy pomocy własności ramki...83 Sterowanie wyświetlaniem przy pomocy własności klasyfikacji...86 Projekt 3-2: Dodajmy więcej stylów do "Wypraw Freda"...88 Sprawdzian...93
2 4 Stosowanie wartości...95 Rozumienie wartości i ich znaczenia...96 Różne rodzaje wartości...98 Wartości specyficzne...98 Wartości URL Wartości procentowe Wartości koloru Jednostki miar Jednostki bezwzględne a jednostki względne Upraszczanie wartości kolorów Rozumienie addytywnego mieszania kolorów Łatwe mieszanie kolorów Alternatywne wartości kolorów Upraszczanie jednostek miar Projekt 4-1: Tworzenie tabeli kolorów Sprawdzian Rozumienie kaskady i dziedziczenia Rozumienie dziedziczenia Jak działa dziedziczenie Własności nie dziedziczone Wymuszanie dziedziczenia Określanie specyficzności Jak rozumieć specyficzność Jak obliczyć specyficzność Jak używać specyficzności Deklaracja!important Rozumienie deklaracji!important Jak używać!important Rozumienie kaskady Konkurujące arkusze stylów Sortowanie arkuszy stylów Projekt 5-1: Eksperymenty ze sprzecznymi stylami oraz!important Sprawdzian CZĘŚĆ 2 Poznajemy skrzynkę narzędziową dla CSS Praca z własnościami czcionek CSS i zgodność z przeglądarkami Używaj "bezpiecznych" własności i wartości Testuj swoje strony Twórz alternatywne arkusze stylów Od maszynopisu do publikacji na biurku Web, <font> oraz HTML Problem z elementem <font> z HTML Zalety własności czcionek w CSS Własności czcionek w CSS Własność font-family Własność font-size Własność font-style Własność font-variant Własność font-weight Skrót - własność font Własności czcionki w CSS Własność font-stretch Własność font-size-adjust Projekt 6-1: Zastosowanie własności czcionki...173
3 7 Praca z własnościami tekstu Jak działają własności czcionki Jak działają własności tekstu Własności tekstu w CSS Projekt 7-1: Eksperymentuj z własnościami tekstu Praca z własnościami tekstu Własność word-spacing Własność letter-spacing Własność text-decoration Własność vertical-align Własność text-align Własność text-transform Własność text-indent Własność line-height Własność text-shadow (CSS 2) Projekt 7-2: Tworzymy wzornik czcionek Sprawdzian Stosowanie własności koloru i tła Dodawanie obrazów i kolorów CSS pokonuje ograniczenia HTML Własność color Własność background-color Własność background-image Projekt 8-1: Dodawania kolorów i obrazu w tle Sterowanie położeniem obrazu i przypisaniem Własność background-repeat Własność background-attachment Własność background-position Własność background (skrót) Projekt 8-2: Zastosowanie własności tła Sprawdzian Używanie własności ramki Rozumienie modelu opartego na ramkach Tabele HTML i model oparty na ramkach Podstawa modelu opartego na ramkach Projekt 9-1: Praca z modelem opartym na ramkach Własności ramki Własności marginesu Własności wypełnienia Własności krawędzi Projekt 9-2: Zabawa z własnościami ramki Sprawdzian Stosowanie własności opisowych Rozumienie własności opisowych Własności opisowe i HTML Własności opisowe a XML Własności opisowe oraz zgodność przeglądarek Własność display Własność display w CSS 1: kontrola zachowania się elementu Własność display w CSS 2: wartości związane z nagłówkiem Wartości odnoszące się do tabel Projekt 10-1: Eksperymentujemy z display...283
4 Inne własności opisowe Własność white-space Własność list-style-type Własność list-style-image Własność list-style-position Własność list-style Projekt 10-2: Tworzenie zagnieżdżonej listy Sprawdzian CZĘŚĆ 3 Projektowanie w CSS Model wizualny Rozumienie modelu wizualnego Generacja ramki Rozmiary ramki Własności width oraz height Własności min-width oraz max-width (CSS 2) Własności min-height oraz max-height (CSS 2) Prosta makieta za pomocą float oraz clear Własność float Własność clear Projekt 11-1: Tworzymy prosty układ strony (makietę) za pomocą float i clear Pozycjonowanie elementów (CSS 1) Schematy pozycjonowania Własność position Własności top, right, bottom oraz left Projekt 11-2: Zabawa z blokami Sprawdzian Wizualne efekty CSS Rozumienie overflow i clip Własność overflow Własność clip Kontrolowanie widoczności i warstw Własność visibility Własność z-index Rozumienie dynamicznego HTML Projekt 12-1: Tworzymy dynamiczną stronę Web Sprawdzian CSS i projektowanie witryny Rozumienie dobrego projektowania Web Planowanie witryny Web Projektowanie witryny Web Projekt 13-1: Planujemy witrynę Web Projektowanie za pomocą arkuszy stylów Tworzenie "chudych" arkuszy stylów Tworzenie "przejrzystych" arkuszy stylów Projekt 13-2: eksperymentujemy z układami strony w CSS Tworzenie stron "odpornych na upadki" Dobrze uformowane dokumenty HTML Poprawne dokumenty HTML Poprawny CSS Projektowanie dla zgodności z różnymi przeglądarkami Opcje zgodności Sprawdzian...395
5 14 Zaawansowany CSS Rozumienie CSS Kategorie własności CSS Modele CSS 2 oraz kategorie własności Zaawansowany CSS i początkujący Rozumienie zaawansowanych selektorów Selektor uniwersalny Zaawansowany selektor potomka Selektory atrybutów (attribute selectors) Pseudo-klasy i pseudo-elementy Projekt 14-1: Eksperymentujemy z zaawansowanymi selektorami Własności zaawansowane Akustyczne arkusze stylów Własności interfejsu użytkownika Media stronicowane Własności specyfikacji czcionki Zasoby CSS Sprawdzian CZĘŚĆ 3 Dodatki A Odpowiedzi do sprawdzianów Rozdział 1: HTML i CSS: skupmy się na podobieństwach Rozdział 2: Rozumienie i używanie selektorów Rozdział 3: Przeglądanie własności CSS Rozdział 4: Stosowanie wartości Rozdział 5: Rozumienie kaskady i dziedziczenia Rozdział 6: Praca z własnościami czcionek Rozdział 7: Praca z własnościami tekstu Rozdział 8: Stosowanie własności koloru i tła Rozdział 9: Używanie własności ramki Rozdział 10: Stosowanie własności opisowych Rozdział 11: Model wizualny Rozdział 12: Wizualne efekty CSS Rozdział 13: CSS i projektowanie witryny Rozdział 14: Zaawansowany CSS B CSS 1 Ściągawka Selektory HTML Selektory pseudo-klas Selektory pseudo-elementów Własności czcionki Własności tekstu Własności marginesu Własności wypełnienia Własności stylu krawędzi Własności szerokości krawędzi Własności kolorów krawędzi Własności krawędzi Własności koloru i tła Własności opisowe Własności pozycjonowania i efektów wizualnych...442
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
Bardziej szczegółowoCSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między
Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,
Bardziej szczegółowoLABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoKASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)
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
Bardziej szczegółowoPROJEKTOWANIE STRON WWW
PROJEKTOWANIE STRON WWW Wykład 1 Paweł Woszkowski SWSIM, 2010 PLAN ZAJĘĆ technologie, proces powstawania strony www, podstawowe zasady, xhtml, css, projektowanie, publikacja, hosting, promocja. STRONA
Bardziej szczegółowop { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Bardziej szczegółowoCSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Bardziej szczegółowoTechnologie internetowe
Technologie internetowe Cascading Style Sheets Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Zawartość modułu Wprowadzenie Wstawienie arkusza CSS, Reguły CSS Drzewo dokumentu Grupowanie, jednostki
Bardziej szczegółowoWprowadzenie do Internetu zajęcia 3
Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie
Bardziej szczegółowoPERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?
PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed
Bardziej szczegółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Bardziej szczegółowoPrzykładowe pytania CSS
Przykładowe pytania CSS 1) Za pomocą jakiego selektora można stworzyć czcionkę pochyloną kursywę A) Font-style: oblique B) font-style: italic; C) text-style: italic; 2) Która własność CSSa kontroluje wielkość
Bardziej szczegółowoTworzenie stylów w HTML
Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Arkusze stylu Rozdzielenie treści od wygladu Przypisanie stylu do dokumentu CSS
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoJęzyki programowania wysokiego poziomu CSS
Języki programowania wysokiego poziomu CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets) to język służący do formatowania dokumentów WWW, utworzonych w językach HTML oraz XHTML. CSS stworzono
Bardziej szczegółowoSpis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Patryk Czarnik (MIMUW) 06 Prezentacja XML 2007/08 1 / 33 Plan 1 Arkusze stylu
Bardziej szczegółowoKrótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Bardziej szczegółowoWykład 2_1 TINT. Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki. Zofia Kruczkiewicz
Wykład 2_1 TINT Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki Zofia Kruczkiewicz 1. Wprowdzenie Kaskadowe arkusze stylów CSS element dynamiczny języka HTML (DHTML) Kaskadowe arkusze
Bardziej szczegółoworam sp. j. Transmiter FM USB SD/MMC BLUE AKCESORIA SAMOCHODOWE > Transmiter FM USB SD/MMC BLUE Utworzono : 06 październik 2016
AKCESORIA SAMOCHODOWE > Model : 107840 Producent : - BLOW 'FONT-FAMILY: "Segoe UI", "Trebuchet MS", Helvetica, Arial; FONT-VARIANT: normal; WIDTH: 290px; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM:
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoHTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
Bardziej szczegółowoWykład 2 CSS. Michał Drabik
Wykład 2 CSS Michał Drabik XHTML CSS Struktura strony internetowej Prezentacja strony internetowej CSS = Cascading Style Sheets Kaskadowe arkusze stylów style umieszczone są według hierarchi, ustalającej
Bardziej szczegółowoCzcionki. Rodzina czcionki [font-family]
Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana
Bardziej szczegółowoUtopia HTML. Projektowanie w CSS bez u ycia tabel
IDZ DO PRZYK ADOWY ROZDZIA SPIS TREŒCI KATALOG KSI EK KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG Utopia HTML. Projektowanie w CSS bez u ycia tabel Autor: Dan Shafer T³umaczenie: Renata Wójcicka ISBN: 83-7361-965-8
Bardziej szczegółowoTechnologia CSS w aplikacjach pocztowych
Technologia CSS w aplikacjach pocztowych Wytyczne dla projektantów newsletterów Raport FreshMail Maj 2010 Spis treści Wstęp 03 Metodologia badao 04 Wyniki badao 07 21 praktycznych rad dla Front End Developerów
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoArkusze stylów CSS Cascading Style Sheets
Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację
Bardziej szczegółowoSpis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37
Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników
Bardziej szczegółowo*Kaspersky Internet Security 2016PL Box 1Desktop 1. Model : *Kaspersky Internet Security 2016PL Box 1Desktop 1. ram sp. j.
OPROGRAMOWANIE > Model : 107237 Producent : - Rodzaj Bezpieczeństwo Wersja Box Licencja Akademicka Dla małych firm Do użytku domowego Komercyjna Czas trwania 1 rok Liczba stanowisk / jednostek 1 Architektura
Bardziej szczegółowoUkłady witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie
Bardziej szczegółowoZ CSS3 szybciej i przyjemniej
1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki
Bardziej szczegółowoCSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).
Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS
Bardziej szczegółowoCSS. Kaskadowe arkusze stylów CSS
CSS Kaskadowe arkusze stylów CSS 1 CSS CSS (Cascading Style Sheet) język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. Język HTML odpowiada
Bardziej szczegółowoHTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
Bardziej szczegółowoSpis treści. Część I Elementarz... 17
Spis treści Rozdział 1. Wprowadzenie... 13 Dla kogo jest ta książka?... 13 Jak czytać tę książkę?... 14 Testowanie stron WWW... 14 Edycja kodu XHTML... 15 Część I Elementarz... 17 Rozdział 2. Składnia
Bardziej szczegółowoSystemy internetowe Wykład 2 CSS
Systemy internetowe Wykład 2 CSS CSS - definicja CSS (Cascading Style Sheets) kaskadowe arkusze stylów CSS - język opisujący w jaki sposób elementy HTML będą wyświetlane na ekranie komputera, tabletu,
Bardziej szczegółowoWYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista
Bardziej szczegółowoZdefiniowane 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.
Style CSS Wstęp 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. Podstawową zaletą i zadaniem stylów jest oddzielenie
Bardziej szczegółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Bardziej szczegółowoLaboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Bardziej szczegółowoLESS - CSS dla leniwych
LESS - CSS dla leniwych Tomasz Dziuda Główny programista w GavickPro dziudek@gmail.com Twitter: @dziudek zebymniezapomnial.tumblr.com Czym jest LESS? Alternatywy 1. SASS (Ruby) 2. Turbine (PHP) 3. CSS
Bardziej szczegółowoSzczegółowy opis zamówienia:
Szczegółowy opis zamówienia: Rok 2016 budowa stron w html5 (8h v + 4h ćw) 8 szt. html5 - zaawans. (7h v + 5h ćw) 8 szt. programowania w java script (9h v + 7h ćw) 8 szt. java script zaawans (8h v + 4h
Bardziej szczegółowoĆwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
Bardziej szczegółowoCSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1
CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1 Wstawianie stylów Przeglądarka wyświetla strony pozbawione stylów autorskich, stosując własne, wbudowane
Bardziej szczegółowoKrok 1: Stylizowanie plakatu
HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoProjektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Bardziej szczegółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowoNazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Bardziej szczegółowoAlfabetyczna lista stylów
Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja
Bardziej szczegółowoTworzenie stron WWW. Ilustrowany przewodnik
IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE Tworzenie stron WWW. Ilustrowany przewodnik Autor: Aleksandra Tomaszewska-Adamarek ISBN: 83-246-0608-4 Format: A5, stron: 184 ZAMÓW
Bardziej szczegółowoInterfejs użytkownika I
Interfejs użytkownika I Wykład prowadzi: Marek Wojciechowski Interfejs użytkownika I 1 Plan wykładu Formatowanie HTML za pomocą arkuszy stylów CSS Język XML ogólna struktura dokumentów opis struktury za
Bardziej szczegółowoJednostki miar stosowane w CSS
Wprowadzenie CSS (ang. Cascading Style Sheets) jest językiem służącym do opisu sposobu prezentowania informacji na stronach WWW, który został opracowany przez organizację W3C. Często skrót ten tłumaczony
Bardziej szczegółowoSzablony. Wersja 7.6
Szablony Wersja 7.6 Spis treści 1 WSTĘP... 3 1.1 PRZYKŁADY ZASTOSOWANIA SZABLONÓW:... 4 1.2 PRZYCISKI FUNKCYJNE... 6 2 SZABLONY... 7 2.1 KONFIGURACJA... 8 2.2 PLUGINY... 9 2.2.1 EDYCJA PLUGINU... 10 2.2.2
Bardziej szczegółowoJeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>
Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie
Bardziej szczegółowoWymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)
Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie
Bardziej szczegółowoUwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.
Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać
Bardziej szczegółowowww.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Bardziej szczegółowoTECHNOLOGIE SIECI WEB
1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr
Bardziej szczegółowoDziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość
Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów
Bardziej szczegółowoURL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
Bardziej szczegółowoJęzyk CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia
Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach dr Beata Kuźmińska-Sołśnia CSS Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) specjalny język opracowany tylko
Bardziej szczegółowoCSS - style kaskadowe. Cascadind Style Sheets
CSS - style kaskadowe Cascadind Style Sheets Znaczenie CSS Arkusze stylów pozwalają nam na ścisłą kontrolę wyglądu strony. Możemy zdefiniować np. odpowiednie czcionki dla danych elementów oraz zachowywanie
Bardziej szczegółowoCopyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo
Bardziej szczegółowoInformacje wstępne: Dodatki, które warto doinstalować do przeglądarki:
Podstawy stylów CSS, komentarze do stylów, zalety... 2 Dołączanie stylów do dokumentów... 3 Budowa stylu i rodzaje selektorów... 4 Dziedziczenie stylów... 5 Selektory specjalne: identyfikatory, klasy...
Bardziej szczegółowoKaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Bardziej szczegółowoza pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Bardziej szczegółowoBox model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Bardziej szczegółowoI. Pozycjonowanie elementów
Wykład 4 - część I. I. Pozycjonowanie elementów 1 I. Pozycjonowanie elementów Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa
Bardziej szczegółowoABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Bardziej szczegółowoSTRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
Bardziej szczegółowoHTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.
Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie
Bardziej szczegółowoCSS - 2. Właściwości tekstu, czcionek
CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»
Bardziej szczegółowoTworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
Bardziej szczegółowoE.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki
Bardziej szczegółowoKaskadowe arkusze stylów
CSS Kaskadowe arkusze stylów Gabriela Przęczek Co to jest CSS?. Skrót pochodzi z angielskiego Cascading Style Sheets Kaskadowe arkusz stylu to narzędzie dające szerokie możliwości formatowania dokumentów
Bardziej szczegółowo2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
Bardziej szczegółowoInformatyka MPDI 3 semestr
Informatyka MPDI 3 semestr Wykład 2 CSS JavaScript CSS arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style ... Styl może mieć wiele cech,
Bardziej szczegółowoZałącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.
Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.
Bardziej szczegółowoPORADNIK KODOWANIA: CSS
PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2 Wstęp Nazywam
Bardziej szczegółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw
Bardziej szczegółowoTworzenie Stron Internetowych. odcinek 7
Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie
Bardziej szczegółowoTworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Bardziej szczegółowoWidżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Bardziej szczegółowoERA ENTERA E L E A R N I N G D L A M Ł O D Z I E Ż Y
Załącznik 7: Dokumentacja kursu: Wstęp do tworzenia stron WWW ERA ENTERA E L E A R N I N G D L A M Ł O D Z I E Ż Y Era Entera e-learning dla młodzieży Projekt współfinansowany ze środków Unii Europejskiej
Bardziej szczegółowoRESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub
RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi
Bardziej szczegółowoWYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I
WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje
Bardziej szczegółowoGO-RT-AC750 Router WiFi AC750 DualBand 1xWAN 4xLAN. Model : GO-RT-AC750 Router WiFi AC750 DualBand 1xWAN 4xLAN. ram sp. j.
SIECI > Model : 104006 Producent : - "BORDER-BOTTOM: rgb(204,204,204) 1px dotted; PADDING-BOTTOM: 5px; LINE-HEIGHT: normal; WIDOWS: 1; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); FONT-VARIANT:
Bardziej szczegółowoPozycjonowanie elementów
Pozycjonowanie elementów Dzięki pozycjonowaniu w CSS, możesz umieścić element dokładnie tam gdzie tylko chcesz. Razem z efektem pływania pozycjonowanie daje ci nieograniczone możliwości tworzenia zaawansowanego
Bardziej szczegółowoSass Rewolucja w CSS +
Sass Rewolucja w CSS + Problemy CSSa Brak zmiennych Brak możliwości wykonywanie obliczeń Brak zagnieżdżeń Brak możliwości wykorzystania kodu ponownie Zarządzanie dużymi projektami jest uciążliwe Prefiksy
Bardziej szczegółowoTabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Bardziej szczegółowoCSS. Witryny internetowe szyte na miarê. Autorytety informatyki. Wydanie II
CSS. Witryny internetowe szyte na miarê. Autorytety informatyki. Wydanie II Autor: Charles Wyke-Smith T³umaczenie: ukasz Piwko ISBN: 978-83-246-1756-2 Tytu³ orygina³u: Stylin with CSS: A Designers Guide
Bardziej szczegółowo