Стили CSS

На этом занятии мы будем учиться создавать рамки. Рамки – это неотъемлемая часть web-дизайна. Вам обязательно придется ими заниматься, создавая стили для таблиц или баннеров. При необходимости сделать меню для сайта, выделить какой-нибудь параграф или часть текста без рамок не обойтись. Создание сайтов в Москве можно также заказать от профессиональных разработчиков irogex.moscow, чтобы быстро получить сайт и первые продажи с него.

Для того чтобы создать рамку, необходимо задать значения трем свойствам:

  • «border-width» - ширина рамки;
  • «border-style» - стиль рамки; «border-color» - цвет рамки.

Давайте откроем таблицу стилей CSS и создадим новый класс:

  • Назовем новый класс – «. ram». Пусть ширина рамки - «border-width» будет равна 5px;
  • стиль - «border-style» будет «solid», что означает: сплошной;
  • и цвет - «border-color» назначим: #FF0033.

Не забудьте сохранить таблицу стилей. Давайте наградим такой рамкой заголовок H1 и первый абзац. Чтобы это сделать находим в коде нашей странички подопытный заголовок и в открывающий тег вписываем наш класс. Для первого абзаца сделайте все самостоятельно. Теперь сохраняем файл «index. html» и смотрим, что у нас получилось, для чего открываем браузер и обновляем страничку. Не знаю как Вы, а я своего добился. Такие рамочки не возможно не заметить.

Ради Бога не подумайте, что я советую делать именно такие яркие и толстые рамки. Это для наглядности! Идем дальше. Поменяем стиль «border-style» на «dotted», а цвет на «red». Проделываем все то же самое, что и в первый раз. Конечно, Вы не раз встречались в Сети с такими рамками. Теперь Вы и сами легко справитесь с такой задачей. Чтобы закончить с «border-style», давайте рассмотрим последнее его значение. Это значение: «dashed». Сохраняем таблицу стилей CSS и смотрим, как выглядит наша рамочка. Надеюсь, что Вы убедились, что создать рамку очень просто. Теперь познакомимся с сокращенной записью. Дело в том, что все эти свойства можно записать в одну строчку:

Самое главное в этом варианте соблюсти очередность:

  • толщина;
  • стиль;
  • цвет.

Ну и, конечно же, сохранить таблицу стилей. И снова все получилось. А у Вас? Если что-то не так, ищите ошибку у себя в коде. И прошу не писать в комментариях: «У меня не получается! Подскажите, что я делаю не так?». Внимательно читайте уроки, и будет Вам счастье! Можете сделать стороны разной толщины, цвета и разного стиля. Можете показывать не все стороны. Это очень часто используют. Посмотрите, как я это делаю в правом и левом блоке сайта. Это все, что я хотел рассказать о рамках. Теперь Вы имеете те 20% знаний, которые помогут выполнить 80% работы при создании рамок.