Ciąg Fibonacciego...
Odwracanie tablicy...
Słuchasz radia, tego w które klikasz
Zaloguj się do KhanAcsademy i wysłuchaj dalej o css. Stwórz własne style dla strony.
Przypomnienie: jakie dotąd znaczniki HTML (HyperText Markup Language) poznaliśmy i jakie style? Dzisiaj poznamy kolejne.
Pamiętaj o polach: śródliniowych (stosuj span) np. rysunki oraz
blokowych (stosuj div) np: nagłówki, paragrafy, wyliczenia
| <znacznik> | co oznacza | styl | co oznacza |
|---|---|---|---|
| !DOCTYPE html | przed html, informacja, że strona w nowej wersji | style.../style | w części head, wszystko w tym zawarte jest w języku css |
| html.../html | początek i koniec dokumentu HTML | h2 {
color: rgb(0, 232, 15); } |
selektor h2 na całej stronie zmieni kolor nagłówków h2 na podany |
| head.../head | nagłówek, w nim znaczniki pomagające dobrze wyświetlić stronę | body {
background-color: rgb(97, 250, 255); } |
selektor body zmieni tło na całej stronie na podany kolor |
| meta charset="utf-8" | w head, kodowanie strony | p {
color: rgb(191, 0, 255); } |
tekst wszystkich akapitów w podanym kolorze |
| title...Nazwa strony.../title | Pojawi się w pasku na górze, też w head | #nazwa_id {
background-color: yellow; } |
wyjątkowe id, dodane w znaczniku html (identyczne - wielkość liter) jako atrybut np. p id="nazwa_id" |
| body.../body | ciało strony, pod head | .nazwaklasy {
background-color: yellow; } |
klasa (rozpoczyna się od kropki) dopisana jako atrybut w znaczniku html np: p class="nazwaklasy" |
| h1../h1 aż do h6.../h6 | nagłówki o różnej wielkości | p {
font-family: "Helvetica", sans-serif; } |
przypisanie rodzaju czcionki do selektora p oraz własności rodziny czcionek |
| p.../p | akapit | body {
font-size: 12px; } h2 { color: rgb(0, 232, 15); font-size: 1.5em; } |
wielkość czcionki, wszystkie w body mają wielkość 12 pikseli, a w nagłówku h2 są 1,5 raza większe tj. 18 px |
| br | podział wiersza [enter] | .nazwaklasy {
background-color: yellow; font-family: fantasy; font-size: 13px; font-style: italic; } |
w nazwie klasy wprowadzone 3 właściwości czcionki, które można w sposób skrócony napisać: font: italic 13px fantasy; |
| em.../em | wyróżnienie kursywą | line-height: 1.5em;
text-align: center; |
kolejne właściwości czcionki: odstęp między liniami i wyśrodkowanie tekstu |
| strong.../strong | pogrubienie tekstu | body {
font-family: sans-serif; color: rgb(211, 122, 255); } |
właściwość wpisana w body powoduje jej dziedziczenie w znacznikach dzieciach, chyba, że w nich wpiszemy coś innego |
| ul../ul | lista z wypunktowaniem | span.../span | służy do grupowania fragmentów tekstu np. .lovey-dovey { color: red; }// w style <span class="lovey-dovey">Love</span> span - nie dzieli |
| li.../li | wstawia w liście punktory lub numery | div.../div | grupuje wiele różnych elementów np: #official-info { background: rgb(230, 230, 230); #official-info { background: rgb(230, 230, 230); width: 70%; height: 180px; overflow-y: auto; overflow-x: hidden; } overflow-y: auto;//pasek overflow-x: hidden; }w style <div id="official-info">nagłówki, teksty, rysunki </div> div dzieli |
| ol.../ol | lista numerowana | model pudełkowy margin, border, padding, content |
style marginesów, style obramowania, style dopełnienia (odstępów) np: margin: 15 px; margin 15px 0px 10px 6px;//od góry w prawo, border: grubość, styl, kolor ; np; border 1px solid red; padding-left: 20px; |
| img src="adres i/lub nazwa obrazka" alt="Tekst do wyświetlenia" width="203" | wstawianie zdjęcia z 3-ma atrybutami | #winston { position: absolute; top: 50px; left: 50px; z-index: 2; } |
pozycjonowanie np: h1 { position: fixed; z-index: 4; left: 30px; } |
| a target="_blank" href="http:.."...tekst/obraz linku... /a | wstawianie linku z atrybutem otwarcia w nowym oknie i podaniu adresu linku | float: left; | opływanie obrazka tekstem z lewej obrazek |
| !-- tekst komentarza -- | wstawianie komentarza niewidocznego na stronie, pamiętaj, że jest to znacznik | #hopper-links { float: right; width: 30%; } oraz clear: both; |
div z nagłówkiem i linkami po prawej stronie strony zajmuje jej 30% np: <div id="hopper-links"> tekst nie owija się wokół pływających elementów na stronie, jest zawsze na dole np: #hopper-footer { background-color: rgb(232, 232, 232); padding: 6px; clear: both; } |
Stwórzcie szkic strony może np: kulinarnej i ustawcie za pomocą css ulubione potrawy z przepisami w różnej konfiguracji :)
Kurs języka HTML i CSS - poradnik webmastera
Poćwicz, aby przejść do większej liczby selektorów.
Wesołego Alleluja na nadchodzące Święta Wielkanocne.