TECHNOLOGIE SIECI WEB

Transkrypt

1 1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr 2 Temat: Kaskadowe arkusze stylów body color: black p text-align: center p font-family: "sans serif" p font-size: 14pt p text-align: left; color: black p color: black; font-family: arial; h1, h2, h3, h4, h5, h6 font-family: Helvetica; color: red; /* To jest komentarz */ p text-align: right; color: black; font-family: arial h1 margin: 0.5em/* w proporcji do wysokoœci czcionki danego elementu */ h1 margin: 1ex /* w proporcji do wysokoœci litery */ p font-size: 12px /* w pikselach */ p font-size: 10%; /* w procentach w stosunku do wartoœci bazowej */ Plik arkusza stylów my_style.css --- hr color: yellow p margin-left: 15px body background-image: url("images/fig.gif") --- Odwo³anie do arkusza stylów <link rel="stylesheet" type="text/css " href="my_style.css" /> hr color: blue p margin-left: 15px body background-image: url("images/fig.gif") <p> Akapit wciêty 15 pikseli <p style="color: green; margin-left: 20px"> To jest akapit stylu url(" Klasy p.prawy text-align: right p.centrum text-align: center <p class="prawy"> Akapit wyrównywany do prawej <p class="centrum"> Akapit centrowany.center text-align: center <h1 class="center"> Nag³ówek wycentrowany </h1> <p class="center"> Akapit wycentrowany p#id1 font-size:120%; font-weight:bold; color:#0000ff; background-color:transparent; <p id="id1"> Akapit sformatowany id1... #pogrubiony font-weight:bold; <h1 id="pogrubiony"> Nag³ówek pogrubiony </h1> <p id=" pogrubiony "> Akapit pogrubiony Pseudoklasy a:link color:red; font-size: 14pt a:visited color:yellow; font-size: 16pt a:active color:blue; font-weight: bold a:hover color:black; font-weight:italic body margin-top: 10px; margin-right: 40px; margin-bottom: 10px; margin-left: 30px; body margin: 10px 40px 10px 30px; h1 background: red; padding:10px 20px 10px 20px; <p style = "position: static; ">Treœæ akapitu <p style = "position: relative; left: 100px; top: 50px; width: 200px">Treœæ akapitu <div style = " left:0%; top:0%"> <img src = "fig.gif" width = "300" height = "150" alt = "figure_name" /> <div style = "position: fixed; left:20em; right:20em; ">

2 Jan Prokop, Technologie sieci Web, PRz, WEiI 2 2. CSS - Style zewnêtrzne Plik strona.html <link rel="stylesheet" type="text/css" href="arkusz.css" /> <h1>program przedmiotu</h1> <p> Problematyka technologii Web, podstawowe pojêcia, przegl¹d technologii. Plik arkusz.css body margin-top: 10px; margin-bottom: 10px; margin-left: 50px; margin-right: 50px; h1 font-family: arial; font-size: 20pt; font-weight: bold; color: blue; background: yellow; p font-size: 12pt; text-align: justify; 3. CSS - Style wewnêtrzne i lokalne /*style wewnêtrzne*/ body background-color: olive; h1 background-color: #00ff00; color: red; h2 background-color: transparent; p background-color: rgb(250,0,255); font-size: 16pt; margin-left: 50px; <h1>nag³ówek pierwszego poziomu</h1> <h2>nag³ówek drugiego poziomu</h2> <p>akapit przesuniêty o 50 pikseli <p style="color: blue; margin-right: 150px; background-color: yellow; font-size: 26pt; font-family: verdana;"> Akapit stylu lokalnego 4. CSS obramowania, formatowanie tekstu <title>format CSS</title> h1 border: medium double rgb(250,0,0) h2 border-top: 4px solid #7c7; background-color: #efe; color: #050; h3 text-decoration: overline h4 text-decoration: line-through h5 text-decoration: underline p border: 2px solid red; padding: 4px; margin-left: 24px; p:first-letter color: #ff0000; font-size:xx-large <h1> Tekst nag³ówka H1</h1> <h2>tekst nag³ówka H2</h2> <h3>tekst nag³ówka H3</h3> <h4>tekst nag³ówka H4</h4> <h5>tekst nag³ówka H5</h5> <p>pierwsza linia akapitu<br /> Druga linia akapitu

3 Jan Prokop, Technologie sieci Web, PRz, WEiI 3 5. CSS - Layout strony margin index.html <title>css Layout </title> <link rel="stylesheet" type="text/css" href="style.css" /> <div id="block0"> <div id="block1"> <div id="block2"> <div id="block3"> <div id="main"> Content...<p/>Content CSS - obrazek jako t³o nieruchome, wycentrowane <title>t³o nieruchome, wycentrowane</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> body background: #e0ffff url(./tlo.gif); background-position: center; background-attachment: fixed; background-repeat: no-repeat; <body bgcolor="#ffffff"> <table width="100%"> <tr> <td width="30%"> <p style="text-align: justify"> tutaj umieœciæ tekst w wielu linijkach </td> </tr> </table> style.css body margin:10px 10px 0 10px; background:yellow; #block0 background:red; #block1 margin-left:150px; padding-left:10px; background:pink; #block2 background:blue; #block3 margin-right:150px; padding-right:10px; background:silver; #main background:green; 7. CSS - formatowanie tekstu <title>style</title> <meta http-equiv="content-type" content="text/html; charset=iso "> body margin-top: 2cm; margin-bottom: 2cm; p margin-left: 2cm; margin-right: 2cm; font-family: serif; font-size: 13pt; margin-top: 0pt; margin-bottom: 0pt; h1 font-family: arial, sans-serif; font-size: 20pt; font-weight: bold; background: gray; margin-left: 1cm; margin-right: 1cm; margin-top: 22pt; margin-bottom: 22pt; letter-spacing: 2pt; border-left-style: none h1 color: blue; p text-align: justify; <body bgcolor="#ffffff"> <p>imiê i nazwisko <h1>temat strony</h1> <p>ten tekst jest wyjustowany do prawej i lewej strony z zachowaniem odpowiednich marginesów

4 Jan Prokop, Technologie sieci Web, PRz, WEiI 4 8. CSS - Layout strony w oparciu o znacznik div <title>div</title> <link rel="stylesheet" href="sheet.css" type="text/css"> Plik HTML Plik arkusza stylu - sheet.css <div id="wrapper"> <div id="header"> <p>nag³ówek <div id="contents"> <p>tekst 1 <p>tekst 2 <ul> <li><a href="link1.html">link 1</a></li> <li><a href="link2.html">link 2</a></li> <li><a href="link3.html">link 3</a></li> </ul> <div id="footer"> <p>stopka body background-color:white; #wrapper margin: px; background-color:blue; width:600px; #header background-color:red; #contents #footer background-color:green; p padding:10px; 9. CSS - Layout strony w oparciu o znacznik div - pozycjonowanie bezwzglêdne <title> ABSOLUTE POSITION</title> #header background: red; top: 0px; left: 0px; width: 800px; height: 50px; #left background: green; top: 50px; left: 0px; width: 150px; height: 500px; #right background: blue; top: 50px; left: 650px; width: 150px; height: 500px; #content top: 50px; left: 150px; width: 500px; height: 500px; #footer background: yellow; top: 500px; left: 0px; width: 800px; height: 50px; <div id="header">header <div id="left">left <div id="content">content <div id="right">right <div id="footer"> 2009 Copyright Footer

5 Jan Prokop, Technologie sieci Web, PRz, WEiI CSS - pozycjonowanie wzglêdne <title>relative position</title> #id1 position: relative; left: 200px; bottom: 100px; <h1>pozycjonowanie wzglêdne</h1> <p><strong>w3c</strong> <p>logo W3C CSS <div id="id1"><img src="css_logo.jpg" /> <p>podpis pod logo 11. CSS Budowa menu w³aœciwoœæ float <title>css MENU</title> div#menu float: left; margin-right:2px; div#menu a width: 120px; font-weight: bold; display: block; /*display: inline*/; color: blue; text-decoration: none; padding: 3px 3px; border-left: 1px solid blue; border-right: 3px solid blue; border-top: 1px solid blue; border-bottom: 3px solid blue; div#menu a: hover color: white; background: blue; text-decoration: none; <div id = "menu"> <a href = " target = "_blank">google</a> <a href = " target = "_blank">altavista</a> <a href = " target = "_blank">yahoo</a> <a href = " target = "_blank">ask</a>

6 Jan Prokop, Technologie sieci Web, PRz, WEiI CSS - Layout strony w oparciu o znacznik div w³aœciwoœæ float Plik index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <title>title</title> <link rel="stylesheet" type="text/css" href="style.css" /> <div id="page_container"> <div id="header"> <h1>header</h1> <div id="left_column"> <h2>left</h2> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul> <div id="center_column"> <h2>center</h2> <p>problematyka technologii Web, podstawowe pojêcia, przegl¹d technologii. Jêzyk XHTML, regu³y sk³adni, wersje DTD. Layout, tworzenie struktury witryny WWW, budowa w oparciu o bloki, tabele, ramki. <div id="right_column"> <h3>right</h3> <ul> <li><a href="#">menu 5</a></li> <li><a href="#">menu 6</a></li> <li><a href="#">menu 7</a></li> </ul> <div id="footer"> 2020 Footer Plik style.css #page_container width: 800px; margin: 0px auto; #header background: red; #left_column width: 200px; float: left; #center_column width: 450px; float: left; text-align: justify; #right_column width: 150px;

7 Jan Prokop, Technologie sieci Web, PRz, WEiI 7 float: left; #footer clear: both; background: red; padding: 5px 5px 5px 5px; body margin: 0px; padding: 0px; div margin: 0px; padding: 0px; h1, h2, h3 margin: 0px; padding: 15px; p margin: 0px; padding: 15px; text-align: justify; ul margin: 0px; padding: 0px; li list-style-type: none; padding: 2px 2px 0px 2px; li a display: block; background: silver; padding: 5px 10px 5px 10px; li a:hover background: red; 13. CSS - Warstwy <title>css</title> div font-size:50pt; font-weight:bold; font-family:arial; position:absolute; div.text color:red; top:45px; left:45px; z-index:2; div.shadow color:silver; top:50px; left:50px; z-index:1; <div class="text">css <div class="shadow">css 14. CSS3 Borders, Box Shadow div border:3px solid; border-radius:20px; -moz-border-radius:20px; /* Firefox 3.6 and earlier */ div box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */

8 Jan Prokop, Technologie sieci Web, PRz, WEiI 8 2D Transforms div transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ 15. Inne Specyfikacje, walidacja Specyfikacja kaskadowych arkuszy stylów: Walidator CSS: Przyk³adowy edytor stylów TopStyle Pro - Narzêdzia Aptana Studio - Komodo Edit -