 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:48 Titlul subiectului: Css 4 background margin |
|
|
| Citat: |
Background-ul
Foarte util nu doar pentru elementele body, div, p, table dar poate fi exploatat 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> |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
