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 linii Jednoczesne określanie parametrów czcionki Kolor tekstu Odstępy między wyrazami i między literami Wyrównywanie tekstu Dodawanie wcięć akapitowych Efekty czcionki Zmiana wielkości liter Wyrównywanie elementów w pionie Kaskadowe arkusze stylów cz. 2 font-family nazwa rodziny, ogólna nazwa rodziny p { font-family: "Verdana", "Helvetica", sans-serif } font-style normal italic obligue h1 { font-style: italic } font-weight normal bold bolder lighter 100 200 300 400 500 600 700 800 900 strong { font-weight: 700 } font-size xx-small x-small small medium large x-large xx-large font-size liczba + px pt pc mm cm in font-size larger smaller font-size n% liczba + em ex span.xxs { font-size: xx-small } h1 { font-size: 24px } em { font-size: larger } font-variant normal small-caps div#capt { font-variant: small-caps } line-height normal liczba miara n% p { line-height: 1.2 } p { line-height: 1.2em } p { line-height: 120% } font font-style font-variant font-weight font-size line-height font-family h2 { font: italic bolder 20px Helvetica, sans-serif} color nazwa koloru wartość RGB h2 { color: #F33 } em { color: lime } word-spacing normal miara letter-spacing normal miara h2 { word-spacing: 0.5em } div { letter-spacing: 2px; } text-align center justify left right div { text-align: right; } text-indent miara procentowo p { text-indent: 3em } text-decoration none underline overline line-through blink a { text-decoration: none} text-transform none capitalize lowercase upercase h2 { text-transform: capitalize } vertical-align baseline bottom middle sub super text-bottom text-top top procentowo span.sub { vertical-align: sub; } span.sup { vertical-align: super; } Iwona Dolińska, WSEI Internet i jego usługi 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <title>style czcionek</title> h1 { font-style: italic; font-family: "Helvetica", sans-serif; font-size: 20px; line-height: 1.5 } h2 { font: italic bolder 16px Helvetica, sans-serif; color: #F33; word-spacing: 0.5em; text-transform: capitalize; } p { font-family: "Verdana", "Helvetica", sans-serif }.indent { text-indent: 3em } strong { font-weight: 700 } strong.more { font-weight: 900 } strong.less { font-weight: 600 } span.xxl { font-size: xx-large } span.xl { font-size: x-large } span.l { font-size: large } span.m { font-size: medium } span.s { font-size: small } span.xs { font-size: x-small; text-decoration: underline } span.xxs { font-size: xx-small; text-decoration: overline } em { font-size: larger; color: lime } div#capt { font-variant: small-caps; letter-spacing: 2px; text-align: right; } a { text-decoration: none } span.sub { vertical-align: sub; } span.sup { vertical-align: super; font-size: xx-small } <h1>style czcionek</h1> <p class="indent">przykład zastosowania <em>różnych czcionek</em>. <strong class="more">arkusze stylów</strong> pozwalają na <strong class="less">elastyczne operowanie</strong> <strong>tekstem pogrubionym.</strong></p> <p><span class="xxl">wielkość</span> <span class="xl">czcionki</span> <span class="l">można</span> <span class="m">określać</span> <span class="s">w sposób</span> <span class="xs">bezwzględny</span> <span class="xxs">opisowo.</span></p> <div id="capt">wiele zestawów czcionek zawiera gotowe kapitaliki.</div> <h2>teraz trochę koloru</h2> <a href="09-02.html">łącze bez podkreślenia</a> <div>dodawanie <span class="sub">dolnego</span> lub <span class="sup">górnego</span> indeksu bez znacznika <sub><sub></sub> i <sup><sup></sup>.</div> Iwona Dolińska, WSEI Internet i jego usługi 2
Właściwości ramki elementu Ramka elementu składa się z kilku zawierających się w sobie obszarów: marginesów, krawędzi, odstępów i zawartości. Marginesy Krawędzie Zawartość elementu HTML Odstępy Zawartość Marginesy ND margin-top, margin-right, margin-bottom, margin-left miara n% auto margin miara n% auto Rozmiar marginesów podaje się w następującej kolejności: { margin: góra prawa dół lewa } { margin: góra prawa/lewa dół } { margin: góra/dół prawa/lewa } { margin: góra/dół/prawa/lewa } Odstępy ND Szerokość krawędzi ramki ND Kolor krawędzi ramki ND Styl krawędzi ramki ND Właściwości stron ramki Właściwości ramki Rozmiar elementu Otaczanie elementów tekstem (float ND ) ND Właściwość nie jest dziedziczona. div.ramka1 { margin: 10px 20px 30px 40px; } div.ramka { margin: 20px } div.ramka2 { margin: 0px 12px 0px 12px } div.ramka2 { margin: 0px 12px } padding-top, padding-right, padding-bottom, padding-left miara n% padding miara procentowo div.ramka { padding: 3em } div.ramka { padding-top: 5px } border-top-width, border-right-width, border-bottom-width, border-left-width thin medium thick miara border-width thin medium thick miara div.ramka { border-top-width: thick } div.ramka { border-width: medium, thin } border-color nazwa koloru wartość RGB div.ramka { border-color: red blue black green } border-style none dotted dashed solid double ridge groove inset outset div.ramka { border-style: dotted dashed solid double } border-top, border-right, border-bottom, border-left border-width border-style border-color div.ramka2 {border-top: 5px solid red } border border-top-width border-style border-color div.ramka1 (border: 10px dashed blue } width miara procentowo auto height miara procentowo auto img { width: 300px; height: 300px; } #tytul { width: 50px; } float left right none clear none left right both div { float: left; } div { clear: left; } Iwona Dolińska, WSEI Internet i jego usługi 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <title>ramka elementu</title> #tytul { font-size: x-large; color: green; text-transform: capitalize; width: 50px; } div.ramka1 { margin: 10px 20px 30px 40px; } div.ramka1 { padding: 2em } div.ramka1 { padding-top: 1em } div.ramka1 {border-top: 5px ridge silver } div.ramka1 {border-right: 5px ridge silver } div.ramka1 {border-bottom: 5px groove silver } div.ramka1 {border-left: 5px solid silver } ----------------------------------- div.ramka2 { margin: 0px 12px } div.ramka2 { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px } div.ramka2 {border-top: 5px solid red } div.ramka2 {border-right: thin dotted blue } div.ramka2 {border-bottom: medium double green } div.ramka2 {border-left: thick dashed black } <div id="tytul">ramka elementu</div> <div class="ramka1">arkusze stylów traktują każdy element strony tak, jakby znajdował się on wewnątrz ramki, będącej niewidocznym prostokątem.</div> <div class="ramka2">prostokąt ten zawiera kilka kolejnych, mieszczących się w sobie obszarów.</div> Iwona Dolińska, WSEI Internet i jego usługi 4
Właściwości tła Właściwości tła odnoszą się do konkretnego elementu. Tło rozciąga się do brzegów krawędzi. Kolor tła Obrazek w tle Powtarzanie obrazka Przesuwanie obrazka Pozycjonowanie obrazka Wspólna deklaracja właściwości tła background-color nazwa koloru wartość RGB transparent div.ramka1 { background-color: red } background-image URL none body { background-image: url(mapaodn.jpg)} background-repeat repeat repeat-x repeat-y no-repeat body { background-repeat: no-repeat } background-attachment scroll fixed body { background-attachment: fixed } background-position procentowo miara top/center/bottom left/center/right body { background-position: center center; } body { background-position: bottom right; } background background-color background-image background-repeat background-attachment background-position <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <title>tło elementu</title> body { margin: 20px; background-color: aqua; background-image: url(tlo.jpg); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed; } #tytul { font-size: x-large; color: green; text-transform: capitalize; } div.ramka1 { background-color: red } <div id="tytul">tło elementu</div> <div class="ramka1">tło stanowi rodzaj sztalug umieszczonych za obrazkiem, komórką tabeli lub tekstem.</div> <div class="ramka2">rozciąga się do brzegów krawędzi.</div> Iwona Dolińska, WSEI Internet i jego usługi 5
Właściwości klasyfikacyjne Wyświetlanie elementu Wyświetlanie dodatkowych spacji Wygląd automatycznego numerowania lub wypunktowania list Obrazek jako symbol wypunktowania listy Sposób wyświetlania elementu listy Wspólna deklaracja wyglądu listy display block inline list-item none img { display: none } white-space normal pre nowrap div.odstepy { white-space: pre } list-style-type disc circle square decimal lower-roman upperroman lower-alpha upper-alpha none ul { list-style-type: square } ol { list-style-type: lower-roman } list-style-image URL none li#kropka { list-style-image: url(kropka.jpg) } list-style-position inside outside ul { list-style-type: square; list-style-position: inside; } ol { list-style-type: lower-roman; list-style-position: outside; } list-style list-style-type list-style-image list-style-position ul ul { list-style: circle outside } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <title>właściwości klasyfikacyjne</title> span.bl { display: block; font-weight: bold; } #inl { display: inline } ul { list-style-type: square; } li#kropka { list-style-image: url(kropka.jpg) } ol { list-style-type: lower-roman; } <div>właściwość "display" określa warunki i sposób wyświetlania elementu. Wartość <span class="bl"><i>block</i> rozpoczyna nową ramkę</span> umieszczoną względnie do przylegających ramek.</div> <span>z kolei wartość</span> <div id="inl"><i>inline</i> daje efekt odwrotny.</div> <ul> <li>pierwszy punkt listy</li> <li id="kropka">drugi punkt listy</li> </ul> <ol> <li>pierwszy punkt listy</li> <li>drugi punkt listy</li> </ol> Sposób wyświetlania elementu listy Iwona Dolińska, WSEI Internet i jego usługi 6
Pozycjonowanie elementów położenie domyślne, statyczne (static) wszystkie elementy strony są rozmieszczane na niej w takim porządku, w jakim się pojawiają, inaczej zwane naturalnym układem strony położenie bezwzględne (absolute) określenie położenia elementu w odniesieniu do elementu nadrzędnego położenie ustalone (fixed) - określenie położenia elementu względem całej strony położeniem względne (relative) - przesunięcie elementu względem jego naturalnego położenia właściwość position nie jest dziedziczona position static absolute fixed relative h1 { position: fixed; top: 20px; left: 10px } pozycjonowanie elementów w trzecim wymiarze z-index numer h1 { z-index: 10 } widoczność elementów visibility visible hidden <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <title>pozycjonowanie i ukrywanie elementów</title>.spis { position: absolute; top: 20px; left: 2% }.tresc { position: absolute; top: 10px; left: 30% } #wzgl-m { position: relative; top: -10px; left: -15px } #wzgl-p { position: relative; top: 10px; left: 15px } #hidd { visibility: hidden } #disp { display: none } <div class="spis"><b>spis treści</b><br />Pozycjonowanie bezwzględne<br /> Pozycjonowanie względne<br />Ukrywanie elementów</div> <div class="tresc"> <p>pozycjonowanie bezwzględne jest to określanie położenia elementu względem elementu nadrzędnego.</p> <p>pozycjonowanie <span id="wzgl-m">względne</span> jest to <span id="wzgl-p">przesuwanie elementów</span> względem ich naturalnego położenia.</p> <p>kiedy element jest <span id="hidd">ukryty</span>, to przestrzeń, którą zajmuje pozostaje pusta. Zapełnienie tej przestrzeni <span id="disp">innymi elementami</span> uzyskujemy za pomocą właściwości "display: none".</p> </div> Iwona Dolińska, WSEI Internet i jego usługi 7
przepełnienie ramki overflow visible hidden scroll auto <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <title>przepełnienie ramki</title> div { position: absolute; top: 5px; width: 200px; height: 100px; border: solid; } <div style="left: 5px; overflow: visible;">właściwość ta określa, jak obsłużyć tekst, który nie mieści się w swojej ramce. Tekst może wypływać poza swoją ramkę (visible), fragment, który się nie mieści może zostać ukryty (hidden), przeglądarka może umieścić w ramce paski przewijania (scroll lub auto).</div> <div style="left: 215px; overflow: hidden;">właściwość ta określa, jak obsłużyć tekst, który nie mieści się w swojej ramce. Tekst może wypływać poza swoją ramkę (visible), fragment, który się nie mieści może zostać ukryty (hidden), przeglądarka może umieścić w ramce paski przewijania (scroll lub auto).</div> <div style="left: 425px; overflow: scroll;">właściwość ta określa, jak obsłużyć tekst, który nie mieści się w swojej ramce. Tekst może wypływać poza swoją ramkę (visible), fragment, który się nie mieści może zostać ukryty (hidden), przeglądarka może umieścić w ramce paski przewijania (scroll lub auto).</div> <div style="left: 635px; overflow: auto;">właściwość ta określa, jak obsłużyć tekst, który nie mieści się w swojej ramce. Tekst może wypływać poza swoją ramkę (visible), fragment, który się nie mieści może zostać ukryty (hidden), przeglądarka może umieścić w ramce paski przewijania (scroll lub auto).</div> Iwona Dolińska, WSEI Internet i jego usługi 8