Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
Lolo pe Simpatie
 | Femeie
24 ani
Galati
cauta Barbat
25 - 52 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
Background-ul
Foarte util nu doar pentru elementele body, div, p, table dar poate fi utilizat pentru marea majoritate a selectorilor intalniti in meniuri
1. This example demonstrates how to set the background color for an element
<html>
<head>
<style>
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
2. This example demonstrates how to set an image as the background.
<html>
<head>
<style>
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>
3. This example demonstrates how to repeat a background image only vertically.
<html>
<head>
<style>
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
la fe se procedeaza pentru repetare orizontala: repeat-x
sau
background-repeat: norepeat
daca nu dorim sa se mai repete
4. Pozitionare pentru background:
<html>
<head>
<style>
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
</head>
<body>
<p><b>Note:</b> For this to work in Mozilla, the background-attachment property must be set to "fixed".</p>
</body>
</html>
5. Toate proprietatile intr-o singura declaratie culoare, imagine, no-repeat si centrat
<html>
<head>
<style>
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>
Margini
Este zona libera dintre border si celelalte elemente ale paginii. Altfel spus cat de mult spatiu liber putem lasa in jurul elementului.
1. Setarea tuturor marginilor intr-o singura declaratie
<html>
<head>
<style>
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p>This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
2. Setarea marginii de deasupra
<html>
<head>
<style>
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p>This is a paragraph with a specified top margin</p>
</body>
</html>
3. Setarea marginii de deasupra folosind procentul
<html>
<head>
<style>
p.topmargin
{
margin-top: 25%
}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p>This is a paragraph with a specified top margin</p>
</body>
</html>
4. Setarea marginii de jos folosind masurarea in cm
<html>
<head>
<style>
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p>This is a paragraph with a specified bottom margin</p>
<p>This is a paragraph with no margin specified</p>
</body>
</html>
5. Setarea marginii din stanga
<html>
<head>
<style>
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p>This is a paragraph with a specified left margin</p>
</body></html>
6. Setarea marginii din dreapta
<html>
<head>
<style>
p.rightmargin {margin-right: 5cm}
</style></head>
<body>
<p>This is a right aligned paragraph with no margin specified</p>
<p>This is a right aligned paragraph with a specified right margin</p>
</body>
</html> |
|
|
| |
|
