Wydziela cześć tekstu i pozwala nadać indywidualne właściwości:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>This text is black, except for the word <span style="color:red">red!</span></p> <p>My favorite font is <span style="font-family:Impact">Impact</span>!</p> </body> </html>
Css
Przykład podpinania pliku Css do kodu HTML:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="nazwapliku.css"/> <title>Fancy Fonts</title> </head> <body> <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p> </body> </html>
część: <link type="text/css" rel="stylesheet"
przepisujemy ,
a pod href= wstawiamy nazwę pliku CSS
przykładowa zawartość pliku css:
p { color: red; } span { color: blue; }
Zasada działania bardzo prosta, w pliku html nie określamy właściwości tagów-selektorów "p" i "span" (jak to było robione- patrz rozdział 16)
ale są one określone za pomocą atrybutu (color) i właściwości (red i blue) w pliku css.
W css linie z atrybutem i właściwością zakańczamy średnikiem.
Zawartość pliku css możemy umieścić prosto w kodzie html:
<html> <head> <style> p { color: purple; } </style> <title>Result</title> </head> <body> <p>Zobacz. Ten tekst jest w kolorze: purple!</p> </body> </html>
Komentarze:
W css komentarze określamy /* */
W html komentarze <!-- -->
Przykład pliku css z trzema atrybutami dla selektora "p"
p { color: green; font-family: Garamond; font-size: 24px; }
DIV
Wydziela obszar który można później zdefiniować w pliku css, może być nagłówkiem, stopką, obiektem, obszarem...
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_10_stylesheet.css"/> <title>Result</title> </head> <body> <div></div> </body> </html>
i zdefiniowanie w css:
div { background-color: #cc0000; height: 100px; width: 100px; }
Wynik: czerwony kwadrat o wielkości 100 pikseli.
Tabele
Jeśli chcemy określić za pomocą css kod html tworzący tabelę:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="nazwapliku.css"/> <title></title> </head> <body> <table> <thead> <th colspan="3">Nine Blocks!</th> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>
To w pliku css, opisujemy nie tylko table ale i td:
table, td { height: 50px; border: 1px dashed blue; }
Likwidacja podkreślenia linków:
Prosty kod z linkiem:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_12_stylesheet.css"/> <title>Result</title> </head> <body> <p>The below link goes to Google!</p> <a href="http://www.google.com/">Google</a> </body> </html>
i likwidacja dekoracji (podkreślenia) w css:
a { color: #cc0000; text-decoration: none; }
Jak widać atrybut "color" określony jest heksadecymalne ( R G B)
Przykład dla różnych tagów-selektorów:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_13_stylesheet.css"/> <title>Result</title> </head> <body> <h1>H1</h1> <p>To jest paragraf</p> <img src="http://ecsmedia.pl/c/skarbonka-kaczka-zolta-m-iext8982607.jpg" /> <p></p> <a href="www.wi.zut.edu.pl">Wydział Informatyki ZUT w Szczecinie</a> </body> </html>
i zawartość css:
h1 { font-family: Verdana, sans-serif; color: #576D94; } p { font-family: Garamond, serif; font-size: 18px; color: #4a4943; } img { height: 150px; width: 150px; border: 1px solid #4682b4; } a { color: #cc0000; text-decoration: none; }
Jak widać w nagłówku h1 atrybut font-family: zawiera właściwość "Verdana" i sans-serif.
Taki zapis działa w sposób następujący. Załaduj fonty Verdana, a jeśli w systemie nie ma takiej czcionki to dowolną szeryfową czcionkę.
Przykład klikanego odnosnika:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="nazwapliku.css"/> <title>Nice button</title> </head> <body> <br/> <br/> <div> <a href="http://www.facebook.com">Contact Me on <span>Facebook</span></a> </div> </body> </html>
i zawartość css:
div { height: 50px; width: 120px; border-color: #6495ed; border-width: 2px; border-style: solid; /*none,dashed,dotted,double,....*/ background-color: #bcd2ee; border-radius: 5px; margin: auto; text-align: center; } a { text-decoration: none; color: red; font-family: Verdana; } span { color: #ffffff; font-size: 22px; }
Zagnieżdżanie tagów i opis tego w css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_15_stylesheet.css"/> <title>Result</title> </head> <body> <h3>I'm plain old font!</h3> <div> <h3>Me, too!</h3> <div> <h3>Me three!</h3> <div> <h3>Forget you guys. I'm about to be red!</h3> </div> </div> </div> </body> </html>
i css:
body { background-color: #c6e2ff; } div div div h3 { color: red; }
identyfikator "id" i klasa "class"
przykład 1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="w2_18_stylesheet.css"/> <title>Result</title> </head> <body> <h2 id="intro">Wprowadzenie</h2> <h3 class="moja_klasa">Class i ID w CSS'ie</h3> <p class="moja_klasa">Klasy i identyfikatory są łatwe. Właśnie ich używam.</p> <h3>Zwykły nagłówek H3</h3> <p>Jeśli nie używam klasy lub identfikatora, to element html'owy otrzymuje standardową stylizację z CSS'a. </p> </body> </html>
i css:
#intro { color: #b83c3a; } .moja_klasa { color: #f7ac5f; font-family: Verdana; }
przykład 2:
<html> <head> <link type="text/css" rel="stylesheet" href="w2_16_stylesheet.css"/> <title>The Great Tree of HTML</title> </head> <body> <div id="p1">P</div> <div id="p2">P</div> <div id="p3">P</div> <div class="space"></div> <div id="title">Title</div> <div id="div">Div</div> <div class="space"></div> <div id="head">Head</div> <div id="body">Body</div> <div class="space"></div> <div id="html">HTML</div> </body> </html>
i css:
div { border-radius: 5px; border: 2px solid #6495ED; background-color: #BCD2EE; height: 18px; text-align: center; font-family: Garamond, serif; } #p1 { display: inline; position: relative; margin-left: 138px; } #p2 { display: inline; position: relative; margin-left: 10px; } #p3 { display: inline; position: relative; margin-left: 10px; } #div { display: inline; position: relative; margin-left: 70px; margin-top: 10px; } #title { display: inline; position: relative; margin-left: 50px; } #body { display: inline; position: relative; margin-left: 25px; } #head { display: inline; position: relative; margin-left: 65px; } #html { width: 50px; position: relative; margin-left: 93px; } .space { opacity: 0; }
za to jeden element może mieć wiele klas.
przykład 3
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_22_stylesheet.css"/> <title>My Social Network</title> </head> <body> <div></div> <div></div> <div></div> <div class="friend"></div> <div class="family"></div> <div class="enemy"></div> <div class="friend"></div> <div class="friend" id="best_friend"></div> <div class="family"></div> <div class="enemy"></div> <div class="enemy" id="archnemesis"></div> </body> </html>
i css
div { height: 100px; width: 100px; border-radius: 100%; border: 2px solid black; display: inline-block; margin-left: 5px; } .friend { border: 2px dashed #008000; } .family { border: 2px dashed #0000ff; } .enemy { border: 2px dashed #ff0000; } #best_friend { border: 4px solid #008000; } #archnemesis { border: 4px solid #ff0000; }
Kaskadowość
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="w2_17_stylesheet.css"/> <title>Ultimate Text Challenge</title> </head> <body> <p>Wprowadzenie: Kaskadowość w CSS</p> <div> <p>Opis: Gdy ustawisz atrybut selektora np. 'p' na pewną wartość, wartość ta odnosi się do <em>wszystkich</em> znaczników p !!!. Jeśli jednak ustalić ten sam atrybut na inną wartość dla bardziej konkretnej instancji p, zmiana ta <em>zastąpi</em> 'generalne reguły'. </p> <ul> <li><p>Jeśli ustawisz p { color: green}, wszystkie 'p' będą miały kolor zielony.</p></li> <li><p>ALE jeśli ustawisz li p {color: black}, 'p' na zewnątrz 'li' będzie miało kolor zielony a 'p' WEWNĄTRZ 'li' będzie miało kolor czarny. </p></li> <li><p>A co się stało, że mamy kolor niebieski???? </p></li> </ul> </div> <p>Podsumowanie: Im większa specyfikacja, tym większy priorytet w stylizacji CSSa.</p> </body> </html>
i css:
p { color: green; } ul p { color: black; text-decoration: underline; } body > p { font-weight: bold; } /* wskazanie na <p>, które jest bezpośrednio w <div> */ div > p { color: blue; }
Zachowania linków
prosty przykład html:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_20_stylesheet.css"/> <title></title> </head> <body> <div> <p><a href="http://www.onet.pl">Onet</a></p> <p><a href="http://www.wp.pl">Wp</a></p> <p><a href="http://www.interia.pl">Interia</a></p> <p><a href="http://www.infoludek.pl">Infoludek</a></p> </div> </body> </html>
i css:
a:link { text-decoration: none; color: black; } a:hover { color: blue; } a:visited { color: red; }
link - opisuje zachowanie zwykłego linka (tutaj czarny i bez podkreslenia)
hover - opisuje zachowanie po najechaniu (tu niebieski)
visited - opisuje zachowanie odwiedzonych linków (tu kolor czerowny)
Rozmieszczanie
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_23_stylesheet.css"/> <title>Result</title> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </body> </html>
i css:
* {
border: 1px dashed blue;
}
div {
display: block; /* block, inline-block, inline, none */
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
}
#one {
background-color: #FF0000;
}
#two {
background-color: #0000FF;
}
#three {
background-color: #FFD700;
}
#four {
background-color: #308014;
}
parametr display może przybierać: block, inline-block, inline, none
Model pudełkowy
przykład:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_25_stylesheet.css"/> <title>Result</title> </head> <body> <div></div> </body> </html>
i css:
* {
border: 1px dashed black;
}
div {
height: 50px;
width: 100px;
border-radius: 5px;
background-color: #308014;
border: 6px solid black;
padding: 30px;
margin: -20px 20px 20px 20px;
}
padding - określa wielkość przestrzeni w koło obiektu
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
można zapisać tak:
padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
margin - w koło ramki...
rozmieszczenie:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="w2_26_stylesheet.css"/> <title>Result</title> </head> <body> <div></div> </body> </html>
i css:
div { height: 300px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #308014; float: right; /* left */ }
float: na prawo (right) albo na lewo (left)
czyszczenie obszaru:
<!DOCTYPE html> <html> <head> <title>Title</title> <link type="text/css" rel="stylesheet" href="zad.2.5css.css"/> </head> <body> <div id="header"><p> Naglowek szablonu </p></div> <div class="left"><p> Menu nawigacyjne </p></div> <div class="right"><p> Tresc strony </p></div> <div id="footer"><p> Stopka serwisu </p></div> </body> </html>
i css
#header { background-color: lightgreen; margin-bottom: 0px; } .left { background-color: lightgrey; float: left; } .right { float: left; } #footer { background-color: lightgreen; clear: left }
aby stopka była w prawidłowym miejscu należy dodać polecenie "clear: left"
jeśli tego nie zrobimy wstawi stopkę pomiędzy dwoma poprzednimi divami
clear czyści obszar i pozwala stopce pojawić się pod nimi