CSS Примеры

Отступы - Индивидуальные значения для сторон

Этот параграф без отступов.

Это параграф с заданными отступами.

Как это выглядит "внутри"

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>

<body>
<p>Этот параграф без отступов.</p>
<p class="padding">Это параграф с заданными отступами.</p>
</body>

</html>

Текст c фоном

Пишем вот эти значения и получаем результат

<h2 style="background-color:orange;">фон </h2>

Рамки

Как сделано

<style>
h5 {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
<h5>Рамки</h5>

Именно вот этот текст мы увеличим, и поменяем цвет!

Вот как это можно написать:

<p>Именно вот этот текст мы увеличим, и поменяем цвет!</p>
<style>
p{
    font-size: 120%;
    color: red
}
</style>

The border-width Property

This property specifies the width of the four borders:

Some text.

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}

p.seven {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

</body>