CSS урок третий

CSS урок третий

 

Вы наверное уже замечали, когда я писал код, то рядом с кодом было пояснение.

<style>

/* Заголовок */
H2
{
font-size: 40px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>

Комментарий я сейчас выделил цветом, как не трудно догадаться делается это для удобства. Тэги

/* открывает

*/ закрывает

Все что между этими тэгами не будет обрабатываться браузером, между ними пишут пояснения, закладки, подсказки для себя.

Так же с помощью этих тэгов можно закоментировать код. К примеру вы хотите поровести эксперимент и что бы не удалять часть кода, можно просто в начале и конце поставить эти тэги.

Пример:

H2
{
/*
font-size: 150px;
color: #cc0000;
*/

}
Можно и так:

H2
{
/*font-size: 150px; Размер шрифта */
/*color: #cc0000 Цвет текста */

}

 

Можно и так:

 

/*
H2
{
font-size: 150px; Размер шрифта
color: #cc0000 Цвет текста
}
*/

Вот теперь когда мы разобрались с комментариями, код для вас будет более понятен. Можно приступить и к более сложным операциямsmiley

Что такое блоки

Блоки – это элементы, которые не могут находиться на одной строке с другими блоками и они отделяются абзацами.
К блочным элементам относят:

  • <h1>...<h6> - заголовки
  • <p> - параграфы
  • <div> - блок для верстки веб-страницы (каркас сайта). Вовнутрь блока DIV можно вложить картинки, другие блочные и неблочные элементы.

Неблочные элементы – это элементы, которые могут находиться на одной строке с другими неблочными элементами и они не отделяются абзацами.

К неблочным элементам относят:

  • <strong> - выделить текст жирным;
  • <em> - выделить текст курсивом;
  • <u> - подчеркнуть текст
    и т.д.

Теперь попробуем, у нас уже есть файл index.html если нет то создайте файл с любым названием но обязательно .html откройте его в редакторе notepad++ и напишите там такой код

<html>
<head>
<title>Блок в css</title>
</head>
<body>
<div class="blok1">Первый блок. </div>
<h2 class="blok2">Второй блок. </h2>
<p class="blok3">Третий блок. </p>
</body>
</html>

Получаем

У нас получилось три блока и в каждой запись. Давайте выделим каждый блок рамкой с помощью стиля.

<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
border:5px dotted #cc0000; /* рамка блока */
}
.blok2
{
border:5px dashed green; /* рамка блока */
}
.blok3
{
border:5px double #000; /* рамка блока */
}
</style>

</head>
<body>
<div class="blok1">Первый блок. </div>
<h2 class="blok2">Второй блок. </h2>
<p class="blok3">Третий блок. </p>
</body>
</html> 

Мы вставили style между тэгами <head> и </head>. я выделил красным цветом.

Вот что получиось

 

Теперь когда видны границы блока с ними гораздо удобнее работать. Теперь попробуем отступы

 

Внешние отступы

Чтобы задать расстояние (отступ) от блока используют правило «margin».

Свойства:

  • top – верхняя сторона
  • right – правая сторона
  • bottom – нижняя сторона
  • left – левая сторона

margin-top:30px; /* верхняя сторона */

margin-right:70px; /* правая сторона */

margin-bottom:90px; /* нижняя сторона */

margin-left:120px; /* левая сторона */

Сокращенная форма записи все это можно отобразить и одной строчкой

Синтаксис:

 margin: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

margin:30px 70px 90px 120px; /* сокращенная форма записи */

Теперь изменим ранее созданный файл:

<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
border:5px dotted #cc0000; /* рамка блока */
margin-top:30px; /* верхняя сторона */
margin-right:70px; /* правая сторона */
margin-bottom:90px; /* нижняя сторона */
margin-left:120px; /* левая сторона */
 
}
.blok2
{
border:5px dashed green; /* рамка блока */
margin:30px 70px 90px 120px; /* сокращенная форма записи */
}
.blok3
{
border:5px double #000; /* рамка блока */
margin: 100px; /* сокращенная форма записи */
}
</style>

</head>
<body>
<div class="blok1">Первый блок. </div>
<h2 class="blok2">Второй блок. </h2>
<p class="blok3">Третий блок. </p>
</body>
</html>

Стиль я опять выделил цветом.

Проверяем

Внутренние отступы

Свойство «PADDING»

  • top – верхняя сторона
  • right – правая сторона
  • bottom – нижняя сторона
  • left – левая сторона

padding-top:30px; /* верхняя сторона */
padding-right:70px; /* правая сторона */
padding-bottom:90px; /* нижняя сторона */
padding-left:120px; /* левая сторона */

Также можно записать в сокращенной форме

padding: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

padding:30px 70px 90px 120px; /* сокращенная форма записи */

Опробуем:

<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
border:5px dotted #cc0000; /* рамка блока */
margin-top:30px; /* верхняя сторона */
margin-right:70px; /* правая сторона */
margin-bottom:90px; /* нижняя сторона */
margin-left:120px; /* левая сторона */
padding:30px 70px 90px 120px; /* сокращенная форма записи */
 
}
.blok2
{
border:5px dashed green; /* рамка блока */
margin:30px 70px 90px 120px; /* сокращенная форма записи */
padding-top:30px; /* верхняя сторона */
padding-right:70px; /* правая сторона */
padding-bottom:90px; /* нижняя сторона */
padding-left:120px; /* левая сторона */

}
.blok3
{
border:5px double #000; /* рамка блока */

margin: 100px; /* сокращенная форма записи */
padding:50px; /* сокращенная форма записи */
}
</style>
</head>
<body>
<div class="blok1">Первый блок. </div>
<h2 class="blok2">Второй блок. </h2>
<p class="blok3">Третий блок. </p>
</body>
</html>

Вот что у нас получилось:

Еще очень необходимый параметр это ширина и высота блока

Свойство «WIDTH» и «HEIGHT»

Синтаксис:

  • height - высота блока;
  • width- ширина блока;

Значение:
Значение задается в px или %.

Пример:

width: 600px; /* ширина блока */
height: 250px; /* высота блока */

Теперь попробуйте сами изменить наш файл и посмотрите изменения.

На этом сегодня всё, попробуйте поэспериментировать с разными значениями. На следующем уроке мы начнем делать наш первый сайт, начнем с одного самого главного в сайте, это меню.

До новых встреч, пишите, подписывайтесь на новости.