Css 4 background margin

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

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 lăsat 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>