ΠΑΡΑΔΕΙΓΜΑΤΑ CSS – ΜΕΡΟΣ 2
CSS – ΠΑΡΑΔΕΙΓΜΑ 10
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the
text.</p>
<p>In this example we have also added a margin on the right side, so the
background image will never disturb the text.</p>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 11
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 12
<html>
<head>
<style>
div {
background-color: lightblue;
width: 400px;
padding: 20px;
border: 30px solid navy;
margin: 50px;
}
</style>
</head>
<body>
<div>Για να υπολογίσετε το πραγματικό μήκος (width) ενός στοιχείου
χρησιμοποιήστε τον παρακάτω τύπο:
WIDTH = width + αριστερό padding + δεξί padding + αριστερό border + δεξί border +
αριστερό margin + δεξί margin,
ενώ για να υπολογίσετε το πραγματικό ύψος (height) ενός στοιχείου
χρησιμοποιήστε τον παρακάτω τύπο:
height = height + πάνω padding + κάτω padding + πάνω border + κάτω border +
πάνω margin + κάτω margin</div>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 13
<html>
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 14
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 15
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color:silver;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 16
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
width: 100px;
background-color: aqua;
}
li a {
display: block;
color: navy;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: darkmagenta;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 17
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: aqua;
}
li {
float: left;
}
li a {
display: block;
color: navy;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: darkmagenta;
color: white;
}
</style>
</head>
<body>
<h2>Horizontal Navigation Bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
CSS – ΠΑΡΑΔΕΙΓΜΑ 18
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="images/img_5terre.jpg">
<img src="images/img_5terre.jpg" alt="Cinque Terre" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/img_forest.jpg">
<img src="images/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/img_lights.jpg">
<img src="images/img_lights.jpg" alt="Northern Lights" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/img_mountains.jpg">
<img src="images/img_mountains.jpg" alt="Mountains" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
