 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:50 Titlul subiectului: Css 2 borders |
|
|
| Citat: |
Borders
Pune in evidenta bordura elementului, de regula de tip block. Bordura este linia care se afla intre zona Margin si zona Padding.
1.Toate setarile intr-o singura declaratie:
<html>
<head>
<style>
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
2. Setarea bordurilor diferentiat
<html>
<head>
<style>
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: dublu solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p>Solid sus si jos double in lateral</p>
<p>double sus si jos solid in lateral</p>
<p>Some text</p>
<p>solid sus double in lateral stanga dreapta si groove jos</p>
</body>
</html>
3. Toate setarile pentru bordura superioara intr-o singura declaratie
<html>
<head>
<style>
p
{
border-top: medium solid #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
la fel se procedeaza si pentru border-right, border-bottom, border-left
Realizati exemplul de mai sus pentru una dintre borduri
4. Setarea stilurilor pentru toate bordurile
<html>
<head>
<style>
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p>A dotted border</p>
<p>A dashed border</p>
<p>A solid border</p>
<p>A double border</p>
<p>A groove border</p>
<p>A ridge border</p>
<p>An inset border</p>
<p>An outset border</p>
</body>
</html>
La fel se procedeaza si pentru fiecare latura in parte: border-top-style, border-right-style, border-bottom-style, border-left-style
Realizati exemplul de mai sus pentru una dintre borduri
5. Setarea grosimii tuturor bordurilor intr-o singura declaratie:
<html>
<head>
<style>
p.one{
border-style: solid;
border-width: 5px}
p.two {
border-style: solid;
border-width: thick}
p.three{
border-style: solid;
border-width: 5px 0px}
p.four {
border-style: solid;
border-width: 5px 10px 1px}
p.five {
border-style: solid;
border-width: 5px 10px 1px medium}
</style>
</head>
<body>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
La fel se procedeaza si pentru fiecare latura in parte: border-top-width, border-right-width, border-bottom-width, border-left-width
Realizati exemplul de mai sus pentru una dintre borduri
6. Setarea culorilor pentru toate bordurile
<html>
<head>
<style>
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p>One-colored border!</p>
<p>Two-colored border!</p>
<p>Three-colored border!</p>
<p>Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
La fel se procedeaza si pentru fiecare latura in parte: border-top-color, border-right-color, border-bottom-color, border-left-color |
|
|
| 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
|
|
 |
|
|
 |
|
