<MyRusakov.ru />

Видеокурс "Вёрстка сайта с нуля" - это уникальная информация по созданию страниц любой сложности.

Пройдя данный курс, Вы сможете не только верстать страницы с любым по сложности дизайном, но и выводить на чистую воду недобросовестных верстальщиков, которых в Рунете около 95% (!!!). Поэтому данную информацию надо знать всем: кто создаёт сам и кто заказывает их на стороне.

Также вёрстка страниц - это очень прибыльное дело. Заработок верстальщиков составляет от 100 рублей в час у новичков до 1500 рублей в час уже у профи, которым Вы станете после просмотра курса и практики.

Также в Видеокурсе "Вёрстка сайта с нуля" рассказывается о том, как искать заказчиков, где их искать, как им писать в первый раз. Всё это я подробно рассказываю в курсе, а также даю уже готовый вариант первого обращения к заказчику. С таким обращением вероятность того, что заказчик к Вам обратится, близка к 100%. А учитывая, что Вы будете профессионалом, то этот заказчик превратится в постоянного!

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Опрос

Посоветуйте тему для будущего видеокурса

Как задать CSS стиль

Как задать CSS стиль

Существует четыре способа задания CSS стиля для тегов HTML.

1) Inline-стиль.

2) Внедрённый стиль

3) Импортированный стиль.

4) Стиль из файла.

И в этой статье мы разберём все четыре способа.

Для начала первый способ - это inline-стиль. Данный стиль указывается непосредственно в самом теге. Например:

<p style = "font-size: 150%; text-align: center;">текст</p>

В данном случае мы задали, чтобы элемент "текст" будет размером в 150% и выравнен по центру. Это пример inline-стиля.

Второй способ - это внедрённый CSS стиль, то есть стиль, который задаётся в голове документа, в теге <head>. Например, так:

<head>
  <style>
    h1 {
      color: red;
      margin-top: 100px;
    }
  </style>
</head>

Здесь будет происходить следующее: для всех элементов внутри тега <h1> будет сделано следующее: их цвет будет красным и отступ сверху будет 100 пикселей.

Третий способ задания CSS стиля - это импортированные стили. Они также, как и внедрённые задаются в голове документа, но уже из файла. Вот пример:

<head>
  <style>
    @import url("my.css");
  </style>
</head>

Здесь ко всей странице будут применяться стили из файла "my.css".

И последние вид CSS стилей - это стили из файла. Данный способ является самым частым, и заключается он в подключении файла стиля через тег <link> в голове документа. Например, таким образом:

<head>
  <link rel="stylesheet" type="text/css" href="my.css">
</head>

Данный способ очень похож на предыдущий способ, но здесь не используется тег <style>, и есть ещё одно отличие. Причём, это отличие характерно для всех способов задания CSS стиля. И это отличие - приоритет.

Когда проявляется приоритет? А проявляется он при возникновении конфликтных ситуаций, связанных с попыткой одному и тому же элементу задать противоречивый стиль. Например, через inline-стиль пытаемся сделать цвет красным, а через импортированный стиль пытаемся сделать цвет этого элемента чёрным. Во избежание таких противоречивых ситуаций, необходимо расставить приоритеты: какой способ с самым высоким приоритетом, а какой, наоборот, с самым низким. Приоритеты в порядке возрастания следующие:

1) Стиль из файла.

2) Импортированный стиль.

3) Внедрённый стиль.

4) Inline-стиль.

Таким образом, inline-стиль имеет наибольший приоритет. И, пользуясь этим, можно сделать вывод, что в примере выше цвет элемента будет красным, а не чёрным.

Какие выводы можно сделать?

1) Общий стиль для всего сайта должен быть вынесен в отдельный файл и подключаться на каждой странице через тег <link>, ввиду того, что данный стиль является стилем с минимальным приоритетом, его в частных случаях можно будет изменить.

2) Импортированный стиль надо использовать, когда 2 и более страниц (но не все) имеют определённые особенности в стиле.

3) Внедрённый стиль надо использовать для задания уникальных CSS стилей для конкретной страницы. Эти стили уникальны для каждой страницы сайта.

4) Inline-стиль надо использовать, когда отдельный элемент на отдельной странице требует особенного вида.

Руководствуясь данными принципами, Вы никогда не запутаетесь в CSS-стилях.

Напоследок, хочется привести небольшой пример, как надо следовать этим принципам. Допустим, Вы хотите по-разному выводить элемент внутри тега <p>. Перед Вам стоят такие задачи:

1) Размер шрифта на всех страницах сайта должен быть 15pt, а цвет чёрным.

2) На всех страницах, кроме одной, цвет текста внутри этого элемента должен быть красным.

3) На каждой странице, отступы будут разными.

4) В отдельных случаях может быть изменён размер и цвет текста.

Я, думаю, что здесь всё прозрачно, но тем не менее, давайте поясню порядок действий:

1) В отдельный файл вынести стиль, где задаётся размер и цвет. Потом подключить данный стиль через тег <link>.

2) В отдельный файл вынести стиль, где задаётся красный цвет текста. Потом подключить его, как импортированный стиль к нужным страницам.

3) На каждой странице внутри тега <style> сделать разные отступы для тега <p>.

4) У нужных тегов <p> настроить должным образом размер и цвет текста.

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

С Уважением, Михаил Русаков!

P.S. Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://burjuy.issohost.com)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.