Jaunie radioamatieri

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Pilnībā
Aptauja

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

Как задать 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://sacensibas.xyz)!

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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