Laboratorium 2
Kaskadowe arkusze stylów

1. CSS - Style zewnętrzne

Plik strona.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="arkusz.css" />
</head>
<body>
  <h1>Program przedmiotu</h1>
  <p>
  Problematyka technologii Web,
  podstawowe pojęcia, przegląd
  technologii.
  …
  </p>
<!-- Footer //]]>'"</script></style></iframe></noembed></embed></object></noscript>--><div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hosting2.keep.pl/prv_hosting_footer.js"></script></body>
</html>

Plik arkusz.css

body {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  margin-right: 50px;
}
h1 {
  text-align: center;
  font-family: arial;
  font-size: 20pt;
  font-weight: bold;
  color: blue;
  background: yellow;
}
p {
  font-size: 12pt;
  text-align: justify;
}

2. Style lokalne

<html>
<head>
<style type="text/css"> /*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;}
</style>
</head>
<body>
<h1>Nagłówek pierwszego poziomu</h1>
<h2>Nagłówek drugiego poziomu</h2>
<p>Akapit przesunięty o 50 pikseli</p>
<p style="color: blue; margin-right: 150px; background-color: yellow; font-size: 26pt; font-family: verdana;">
Akapit stylu lokalnego</p>
</body>
</html>

3. CSS – obramowania, formatowanie tekstu

<html>
<head><title>Format CSS</title>
<style type="text/css">
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
}
</style>
</head>
<body>
<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
</p>
</body>
</html>

4. CSS - Layout strony – margin

index.html

<html>
<head><title>CSS Layout </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <div id="block0">
    <div id="block1">
      <div id="block2">
        <div id="block3">
          <div id="main">
           Content...<p/>Content ...
          </div>
        </div>
      </div>
    </div>
</body>
</html>

style.css

body {
  margin:10px 10px 0 10px;
  padding:0;
  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; }

5. CSS - obrazek jako tło nieruchome, wycentrowane

<html>
<head>
<title>tło nieruchome, wycentrowane</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body
{
  background: #e0ffff url(./tlo.gif);
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%">
<tr>
<td width="30%">
<p style="text-align: justify">
tutaj umieścić tekst w wielu linijkach
..............
..............
..............
..............
</p>
</td>
</tr>
</table>
</body>
</html>

6. CSS - formatowanie tekstu

<html>
<head>
<title>style</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
body
{
  margin-top: 2cm; margin-bottom: 2cm;
  margin-left: 2cm; margin-right: 2cm; }
p
{
  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;text-align: center;
  letter-spacing: 2pt;
  border-left-style: none
}
h1 { color: blue; }
p
{
  text-align: justify;
}
</style>
</head>
<body bgcolor="#ffffff">
  <p>imię i nazwisko</p>
  <h1>temat strony</h1>
  <p>ten tekst jest wyjustowany do prawej i lewej strony z zachowaniem odpowiednich marginesów
  .......... ......... ..........
  .......... ......... ..........
  </p>
</body>
</html>

7. CSS - Layout strony w oparciu o znacznik div

index.html

<html>
<head>
<title>DIV</title>
<link rel="stylesheet" href="sheet.css" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="header">
   <p>Nagłówek</p>
  </div>
  <div id="contents">
   <p>Tekst 1</p>
   <p>Tekst 2</p>
   <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>
  <div id="footer">
   <p>Stopka</p>
  </div>
</div>
</body>
</html>

sheet.css

body {
  margin:0;
  padding:0;
  background-color:white;
}
#wrapper {
  margin:0 0 0 10px;
  padding:0;
  background-color:blue;
  width:600px;
}
#header {
  margin:0;
  padding:0;
  background-color:red;
}
#contents {
  margin:0;
  padding:0;
}
#footer {
  margin:0;
  padding:0;
  background-color:green;
}
p {
  margin:0;
  padding:10px;
}

8. CSS - Layout strony w oparciu o znacznik div - pozycjonowanie bezwzględne

<html>
<head>
<title> ABSOLUTE POSITION</title>
<style type="text/css">
#header {
  text-align: center;
  background: red;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 50px;
}
#left {
  background: green;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 150px;
  height: 500px;
}
#right {
  background: blue;
  position: absolute;
  top: 50px;
  left: 650px;
  width: 150px;
  height: 500px;
}
#content {
  background: white;
  position: absolute;
  top: 50px;
  left: 150px;
  width: 500px;
  height: 500px;
}
#footer {
  text-align: center;
  background: yellow;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 50px;
}
</style>
</head>
<body>
  <div id="header">Header</div>
  <div id="left">Left</div>
  <div id="content">Content</div>
  <div id="right">Right</div>
  <div id="footer">© 2009 Copyright Footer</div>
</body>
</html>

9. CSS - pozycjonowanie względne

 <html>
<head>
<title>Relative position</title>
<style type="text/css">
#id1 {
  position: relative;
  left: 200px;
  bottom: 100px;
}
</style>
</head>
<body>
  <h1>Pozycjonowanie względne</h1>
  <p><strong>W3C</strong></p>
  <p>Logo W3C CSS</p>
  <div id="id1"><img src="css_logo.jpg" /></div>
  <p>Podpis pod logo</p>
</body>
</html>

10. CSS – Budowa menu – właściwość float

<html>
<head>
<title>CSS MENU</title>
<style type="text/css">
div#menu {
  float: left;
  margin-right:2px;
}
div#menu a {
  width: 120px;
  font-weight: bold;
  display: block;
  /*display: inline*/;
  color: blue;
  background: white;
  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;
}
</style>
</head>
<body>
  <div id = "menu">
   <a href = "http://www.google.com/" target = "_blank">Google</a>
   <a href = "http://www.altavista.com/" target = "_blank">Altavista</a>
   <a href = "http://search.yahoo.com/" target = "_blank">Yahoo</a>
   <a href = "http://www.ask.com/" target = "_blank">Ask</a>
  </div>
</body>
</html>

11. CSS - Layout strony w oparciu o znacznik div – właściwość float

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <div id="page_container">
   <div id="header">
    <h1>Header</h1>
   </div>
   <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>
   <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.</p>
   </div>
   <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>
   <div id="footer">
    © 2020 Footer
   </div>
  </div>
</body>
</html>

style.css

#page_container {
  width: 800px;
  margin: 0px auto;
}
#header {
  background: red;
  text-align: center;
}
#left_column {
  width: 200px;
  float: left;
  background: white;
}
#center_column {
  width: 450px;
  float: left;
  text-align: justify;
  background: white;
}
#right_column {
  width: 150px;
  float: left;
  background: white;
}
#footer {
  clear: both;
  background: red; 
  padding: 5px 5px 5px 5px; 
  text-align: center;
}
body {margin: 0px; padding: 0px;}
div {margin: 0px; padding: 0px;}
h1, h2, h3 {margin: 0px; padding: 15px; text-align: center;}
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;}

12. CSS - Warstwy

<html>
<head><title>CSS</title>
 <style type="text/css">
  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;
  }
 </style>
</head>
<body>
  <div class="text">CSS</div>
  <div class="shadow">CSS</div>
</body>
</html>

Strona Labolatorium

Technologie WEB i JAVA

WYBIERZ NUMER LABOLATORIUM:

Laboratorium 2
Kaskadowe arkusze stylów

1. CSS - Style zewnętrzne

2. Style lokalne

3. CSS – obramowania, formatowanie tekstu

4. CSS - Layout strony – margin

5. CSS - obrazek jako tło nieruchome, wycentrowane

6. CSS - formatowanie tekstu

7. CSS - Layout strony w oparciu o znacznik div

8. CSS - Layout strony w oparciu o znacznik div - pozycjonowanie bezwzględne

9. CSS - pozycjonowanie względne

10. CSS – Budowa menu – właściwość float

11. CSS - Layout strony w oparciu o znacznik div – właściwość float

12. CSS - Warstwy

Strona Labolatorium

Technologie WEB i JAVA

WYBIERZ NUMER LABOLATORIUM:

Laboratorium 2 Kaskadowe arkusze stylów

1. CSS - Style zewnętrzne

2. Style lokalne

3. CSS – obramowania, formatowanie tekstu

4. CSS - Layout strony – margin

5. CSS - obrazek jako tło nieruchome, wycentrowane

6. CSS - formatowanie tekstu

7. CSS - Layout strony w oparciu o znacznik div

8. CSS - Layout strony w oparciu o znacznik div - pozycjonowanie bezwzględne

9. CSS - pozycjonowanie względne

10. CSS – Budowa menu – właściwość float

11. CSS - Layout strony w oparciu o znacznik div – właściwość float

12. CSS - Warstwy

Laboratorium 2
Kaskadowe arkusze stylów