POLITECHNIKA ŚWIĘTOKRZYSKA |
Projektowanie Aplikacji Internetowych 1 |
|||
SPRAWOZDANIE |
Wydział: WEAiI |
Gr. 313B |
21.11.2013r. |
|
Nr lab. 03 |
HTML, CSS |
Mateusz Kulasek, Aleksander Derszniak |
||
• Różne metody łączenia stylu z dokumentem HTML (wewnątrz dokumentu,
zewnętrzny plik CSS, atrybut style) wykorzystując własności czcionek: krój,
wielkość, kolor, styl, wariant.
pr {color:sienna;border:3px solid black;background-color:lightblue}'
<HTML>
<HEAD>
<TITLE>INTERNAL</TITLE>
</HEAD>
<BODY>
<P STYLE=color:red;font-size:large;> Przykład użycia stylu CSS za pomoca atr STYLE. </P>
<a href="../zad1.html"><p>back <-</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<TITLE>EXTERNAL</TITLE>
</HEAD>
<BODY>
<pr> Przykład użycia stylu CSS w External Style Sheet. </pr>
<a href="../zad1.html"><p>back</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE>
EM {color:yellow;background-color:black;}
</STYLE>
<TITLE>INTERNAL</TITLE>
</HEAD>
<BODY>
<EM> Przykład użycia stylu CSS w Internal Style Sheet. </EM>
<a href="../zad1.html"><p>back <-</p></a>
</BODY>
</HTML>
• Selektory odwołujące się do atrybutów: atrybuty class i id, selektory typu [x],
[x="y"], [x~="y"].
<HTML>
<HEAD>
<TITLE>ZAD1</TITLE>
<style type="text/css">
.klasa { color:lime;background:#ff80c0 }
</style>
</HEAD>
<BODY>
<P CLASS="klasa">Przykład użycia selektorów CLASS</P>
<a href="../zad3.html"><p> back </p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>ZAD1</TITLE>
<style type="text/css">
#a1 {font-size:larger;border:3px solid black;color=lightblue;
</style>
</HEAD>
<BODY>
<Pr ID="a1">Przykład użycia selektorów ID</Pr>
<a href="../zad3.html"><p> back </p></a>
</BODY>
</HTML>
• Selektory kontekstowe E F, E>F, E+F.
<html>
<head>
<title>Selektor potomek</title>
<style type="text/css">
H1 P {color:green} /*selektor potomek*/
</style>
<body style="background-color=lightblue">
<h1>Nagłówek</h1>
<h1><p>Nagłówek "akapitowy"</p></h1>
<p>Akapit</p>
<a href="../zad4.html">back</a>
</body>
</html>
<html>
<head>
<title>Selektor sąsiedni</title>
<style type="text/css">
H1 + P {text-indent:50px;} /*selektor sąsiedni*/
</style>
<body style="background-color=lightblue">
<h1>Nagłówek</h1>
<p>Akapit sasiedni</p>
<p>Akapit nie jest sasiedni</p>
<a href="../zad4.html">back</a>
</body>
</html>
<html>
<head>
<title>Selektor dziecko</title>
<style type="text/css">
b:first-child {color:red} /*selektor dziecko*/
</style>
</head>
<body>
<p>Pierwszy wyraz <b>dziecko</b> jest czerwony a drugi wyraz <b>dziecko</b> nie jest czerwony</p>
<a href="../zad4.html">back</a>
</body>
</html>
• Elementy div, span.
#demokraci {
background:blue;
}
#republikanie {
background:red;
}
span.koty { color:red; font-size:15px; }
<html>
<head>
<title>Grupowanie DIV</title>
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div id="demokraci">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republikanie">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
<a href="../zad5.html">back</a>
</body>
</html>
<html>
<head>
<title>Grupowanie SPAN</title>
<link rel="stylesheet" type="text/css" href="span.css">
</head>
<body>
<p>Ala ma <span class="koty">kota</span>, a <span class="koty">kot</span> ma Ale</p>
<a href="../zad5.html">back</a>
</body>
</html>
• Ramki: padding, border, margin; rozmiary ramek (rozmiary minimalne
i maksymalne), przepełnienie (własność overflow).
div.bord {
border:5px solid black;
}
div.padd {
border:2px;
width:150px;
padding:25px 75px;
}
div.marg {
margin: 25px 50px;
border:5px
}
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="stylzad6.css">
<TITLE>Border</TITLE>
</HEAD>
<BODY>
<div class="bord">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<a href="../zad6.html"><p>back</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="stylzad6.css">
<TITLE>Border</TITLE>
</HEAD>
<BODY>
<div class="marg">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<a href="../zad6.html"><p>back</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="stylzad6.css">
<TITLE>Border</TITLE>
</HEAD>
<BODY>
<div class="padd">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<a href="../zad6.html"><p>back</p></a>
</BODY>
</HTML>
• Właściwości tekstu: wyrównanie (w pionie i poziomie), odstępy pomiędzy liniami,
słowami i znakami, trasformacja do dużych/małych liter.
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
<HTML>
<HEAD>
<TITLE>Transformacja tekstu.</TITLE>
</HEAD>
<BODY>
<span style="font-family:verdana; text-transform:capitalize;">pierwsza litera kazdego slowa przejdzie transformacje na duza litere.
</span>
<a href="../zad7.html"><p>back</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Właściwości tekstu</TITLE>
</HEAD>
<BODY>
<p style="font-family:verdana; word-spacing: 2em;">Przykladowy tekst akapitu wyswietlony za pomoca czcionki Verdana.</p>
<a href="../zad7.html"><p>back</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Wyrównanie pionowe.</TITLE>
</HEAD>
<BODY>
<span style="font-family:verdana; vertical-align:super;">Tekst "super" jest wyzej</span> niz zwykly teskt.
<a href="../zad7.html"><p>back</p></a>
</BODY>
</HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="wyrpoziom.css">
<TITLE>Wyrównanie poziome.</TITLE>
</HEAD>
<BODY>
<P class="center">Wyrownanie w poziomie.</P>
<a href="../zad7.html"><p>back</p></a>
</BODY>
</HTML>
• Właściwości tła: kolor, rysunek (ilość, położenie, krotność).
* {
margin: 0;
padding: 0;
}
body {
font: 100% normal Arial, Helvetica, sans-serif;
background: #161712;
}
form, input, select, textarea {
margin:0;
padding:0;
color:#ffffff;
}
div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .wpis {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .wiadomosc {
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button {
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
<html>
<head>
<title>Active + Hover</title>
<style type="text/css">
MS:hover {color:red;border:3px solid black;} /*selektor hover*/
SM:active {color:yellow;border:1px solid black;} /*selektor active*/
</style>
</head>
<body>
<p>Za pomoca selektora hover i active kliknij back</p>
<a href="../zad8.html"><MS><SM>back</SM></MS></a>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="form.css">
<style type="text/css">
sr:hover {color:black;}
</style>
<title>FORMULARZ</title>
</head>
<body>
<form>
<div class="box">
<h1>Formularz kontaktowy :</h1>
<label>
<span>Nazwa użytkownika</span>
<input type="text" class="wpis" name="nazwa" id="nazwa"/>
</label>
<label>
<span>E-mail :</span>
<input type="text" class="wpis" name="email" id="email"/>
</label>
<label>
<span>Temat :</span>
<input type="text" class="wpis" name="temat" id="temat"/>
</label>
<label>
<span>Wiadomość :</span>
<textarea class="wiadomosc" name="wiadomosc" id="tresc"></textarea>
<sr><input type="button" class="button" value="Wyślj"/></sr>
</label>
</div>
</form>
</body>
</html>
<html>
<head>
<title>Hover</title>
<style type="text/css">
MS:hover {color:red;border:1px solid black;} /*selektor hover*/
</style>
</head>
<body>
<p>Za pomoca selektora <MS>hover</MS></p>
<a href="../zad8.html">back</a>
</body>
</html>
• Pseudoklasy :first-child, :hover, :active. Tworzenie odnośnika do innych dokumentów zmieniającego swój wygląd po najechaniu myszką. Utwórzyć formularz, którego pola będą wyróżniane po wybraniu.
<html>
<head>
<title>Before</title>
<style type="text/css">
div:after {content:" Dodany tekst "; color:red; }
</style>
</head>
<body>
<div>do końcowej zawartości tego elementu - div - został dodany tekst</div>
<span>
do końcowej zawartości tego elementu - span - nie został dodany tekst, ponieważ ten element nie jest elementem - div
</span>
<a href="../zad9.html"><p>back</a>
</body>
</html>
<html>
<head>
<title>Before</title>
<style type="text/css">
div:before {content:" Dodany tekst "; color:red; }
</style>
</head>
<body>
<div>do poczatkowej zawartosci tego elementu - div - zostal dodany tekst</div>
<span>
do poczatkowej zawartości tego elementu - span - nie został dodany tekst, poniewaz ten element nie jest elementem - div
</span>
<a href="../zad9.html"><p>back</a>
</body>
</html>
<html>
<head>
<title>First Letter</title>
<style type="text/css">
div:first-letter { background-color:red;border:1px solid black;}
</style>
</head>
<body>
<div>Pierwszy akapit tekstu.
Drugi akapit tekstu.
Trzeci akapit tekstu.
</div>
<a href="../zad9.html">back</a>
</body>
</html>
<html>
<head>
<title>First Line</title>
<style type="text/css">
div:first-line { background-color:lightyellow;}
</style>
</head>
<body>
<div>Pierwszy akapit tekstu.</br>
Drugi akapit tekstu.</br>
Trzeci akapit tekstu.
</div>
<a href="../zad9.html">back</a>
</body>
</html>
• Pseudoelementy :first-line, :first-letter. Teksty generowane
automatycznie: :before, :after.
div {
color:blue;
font-size:16px;
background-color:red;
}
div span {
background-color:inherit;
}
div .frame {
font-size:24px;
background-color:lightyellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="inherit.css">
<title>Inherit</title>
</head>
<div>Main test</div>
<div span> Test 1 </span>
<p>
<div class="frame"> Test 2 </div>
<p>
<div span>Test 3 </span>
<p>
<div class="frame"><a href="../zad10.html> BACK </a></div>
</body>
</html>
• Pozycjonowanie: własność position.
p
{
position:relative;
right:40px;
left:30px;
}
h2
{
position:absolute;
left:100px;
top:150px;
}
back
{
position:absolute;
left:150px;
top:200px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="position.css">
<title>Position</title>
</head>
<h2>Main test</h2>
<div span> Test 1 </span>
<p>TEST 2</p>
<p>TEST 3</p>
<h2>Test 3 </h2>
<back><a href="../zad11.html">BACK</a></back>
</body>
</html>
• Białe spacje
b
{
white-space: pre-wrap;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="b.css">
<title>Position</title>
</head>
<body>
<b>ALA MA KOTA A KOT MA ALE.</b></br>
<p>ALA MA KOTA A KOT MA ALE.</p>
<a href="../zad12.html">B A C K</a>
</body>
</html>
• Zdefiniować złożony układ strony (nagłówek, stopka, margines) bez stosowania
tabel.
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#top {
width: 780px;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 630px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="szablon.css">
<title>Szablon</title>
</head>
<body>
<div id="top">
<div id="NAGLOWEK">Nagłówek szablonu</div>
<div id="MENU">Menu nawigacyjne</div>
<div id="TRESC">Treść strony</div>
<div id="STOPKA">Stopka serwisu</div>
</div>
<a href="../zad13.html">B A C K</a>
</body>
</html>