<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

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

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

  1. Кнопка:

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

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

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

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

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

wwwu1 wwwu1 29.05.2012 21:27:21

Здравствуйте. Не могу выполнить задание. С помощью импортированных стилей сделать цвет фона зеленым. вот что я сделал в главе <head> <style> @import url( "my.css"); </style> создал файл my.css в нем dody{ background-color: red; color: black }

Ответить

Admin Admin 29.05.2012 21:30:48

body, а не dody. И зелёный - это green, а не red.

Ответить

wwwu1 wwwu1 29.05.2012 21:38:34

Ну, красный фон я сам захотел,а вот dody............ дааа. Спасибо!!!

Ответить

wwwu1 wwwu1 29.05.2012 21:40:12

Около часа голову ломал.

Ответить

lev_100rus lev_100rus 18.07.2012 19:38:00

Михаил, у вас ошибка в начале статьи! У вас написано "Для начала первой способ - это inline-стиль." Не первой, а первый

Ответить

Admin Admin 18.07.2012 21:00:41

Спасибо, исправил!

Ответить

bosna bosna 06.09.2012 23:17:22

МИхаил, добрый вечер. подскажите, что не так сделано. хочу фотку разместить слева, а чтоб 3-D текст ее обтекал справа. но почему-то текст все время наезжает на картинку и не хочет выравниваться. вот код <html> <head> <title>Трехмерный заголовок</title> <style type="text/css"> div.a1, div.a2 {text-align: right;} div.a1{color: #fb0505; font-size: 100px; font-width: bold; } div.a2{color: #000000; font-size: 100px; font-width: bold; } body{background-color: yellow; } body{font-family: calibri} </style> </head> <body> <img src="кроко.jpg" align="left" hspace="10" vspace="10"> <div class="a1" style="position:absolute; top:100px; left:40px; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:99px; left:41px; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:98px; left:42px; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:97px; left:43px; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:96px; left:44px; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:95px; left:45px; color: #06d014; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:94px; left:46px; color: #06d014; z-index:3">только крокодилы спасут эту страну от мудаков</div> <div class="a2" style="position:absolute; top:93px; left:47px; color: #06d014; z-index:3">только крокодилы спасут эту страну от мудаков</div><br> </body> </html>

Ответить

Admin Admin 07.09.2012 13:08:06

У Вас для этого текста используется абсолютное позиционирование и все координаты жестко заданы. Поэтому он и не будет обтекать картинку.

Ответить

bosna bosna 07.09.2012 13:12:54

если я задаю позиционирование relative, то текст справа, но слои текста разлетаются.

Ответить

Admin Admin 07.09.2012 13:24:09

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

Ответить

bosna bosna 07.09.2012 13:39:21

а как это сделать?

Ответить

Admin Admin 07.09.2012 14:00:48

Вы же задаете координаты для div. Просто прописывайте их с учетом размера картинки.

Ответить

bosna bosna 07.09.2012 14:06:41

хм. если текст короче, то все умещается. т.е. объемные тексты можно выравнивать относительно картинок только за счет размеров? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Трехмерный заголовок</title> <style type="text/css"> div.a1, div.a2 {text-align: right;} div.a1{color: #fb0505; font-size: 100px; font-width: bold; } div.a2{color: #000000; font-size: 100px; font-width: bold; } body{background-color: yellow; } body{font-family: calibri} </style> </head> <body> <img src="кроко.jpg"> <div class="a1" style="position:fixed; top:100px; right:40px; z-index:3">убейся ап стену,<br> пожалуйста</div> <div class="a2" style="position:fixed; top:99px; right:41px; z-index:3">убейся ап стену,<br> пожалуйста</div> <div class="a2" style="position:fixed; top:98px; right:42px; z-index:3">убейся ап стену,<br> пожалуйста</div> <div class="a2" style="position:fixed; top:97px; right:43px; z-index:3">убейся ап стену,<br> пожалуйста</div> <div class="a2" style="position:fixed; top:96px; right:44px; z-index:3">убейся ап стену,<br> пожалуйста</div> <div class="a2" style="position:fixed; top:95px; right:45px; color: #06d014; z-index:3">убейся ап стену,<br> пожалуйста </div> <div class="a2" style="position:fixed; top:94px; right:46px; color: #06d014; z-index:3">убейся ап стену,<br> пожалуйста</div> <div class="a2" style="position:fixed; top:93px; right:47px; color: #06d014; z-index:3">убейся ап стену,<br> пожалуйста</div> </body> </html>

Ответить

Admin Admin 07.09.2012 20:43:48

Можно ещё попробовать разбить текст и картинку на разные блоки, чтобы они не смешивались.

Ответить

bosna bosna 08.09.2012 21:39:48

Спасибо большое! Вы очень помогаете

Ответить

all be all be 20.09.2012 17:08:08

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

Ответить

Admin Admin 20.09.2012 17:27:06

Всё точно так же, как и код между тегами <style> </style>. Файл сохраняется как обычный текстовый файл, просто с расширением .css

Ответить

totfedot38 totfedot38 18.04.2013 12:20:39

Здравствуйте, Михаил. Имеется html страница с подключенным файлом стилей, но стиль для элемента <body> не применяется, хотя на элемент <nav> стиль успешно применяется. Почему на <body> не применяется стиль? *** <!DOCTYPE html> <html> <head> <title>Тестовый сайт</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> Боди <nav> Нав </nav> </body> </html> *** <style type="text/css"> body { background: #f00; } nav { background: #00f; } </style> *** Спасибо.

Ответить

Admin Admin 18.04.2013 21:16:48

Это полный код? Тогда почему тег <style> находится за </html>. А если стиль из отдельного файла, тогда тег <style> не нужен.

Ответить

totfedot38 totfedot38 19.04.2013 05:17:10

Оперативный и качественный ответ, спс. Прошу сообщить Ваш Yandex-кошелек. Считаю что труд хотя бы небольшими суммами, но должен быть оплачиваемым.

Ответить

Admin Admin 19.04.2013 10:36:43

41001561125605 - и у меня есть платные обучающие курсы: http://srs.myrusakov.ru/list , поэтому просто так переводить деньги смысла не вижу, лучше что-нибудь приобретите из курсов.

Ответить

Sty1erman Sty1erman 20.06.2013 15:40:20

Михаил, как правильно прописать это в inline-стиле, то бишь в самом теле кода? И куда вставлять текст заголовка? h1 { color: red; margin-top: 100px; } По всякому разному пробовал.. ничего не выходит. А вот когда указываю такой код во внедренном стиле все работает.

Ответить

Admin Admin 20.06.2013 21:39:45

<h1 style="color: red; margin-top: 100px;">Заголовок</h1>

Ответить

Sty1erman Sty1erman 21.06.2013 01:46:54

Все получилось!) Спасибо большое за помощь!

Ответить

pavell pavell 22.06.2013 16:14:22

Получается стили можно задавать одновременно несколькими способами. И импортом и онлайном.

Ответить

Admin Admin 22.06.2013 21:35:46

Да.

Ответить

pavell pavell 03.07.2013 00:31:38

В последнем примере закрывающий слеш у тега линк не указан.

Ответить

Admin Admin 03.07.2013 04:23:56

link - это одиночный тег. По стандарту HTML4 он пишется так, как и написано сейчас.

Ответить

dedok41 dedok41 03.12.2013 12:30:42

Здравствуйте, Михаил! Примите старичка-новичка в свою компанию. Несколько месяцев присматривался к Вашей тусовке, а ранее несколько лет штудировал web-технологии в ИНТУИТе. Нужда заставила просить помощи. Несколько дней не могу выяснить, почему у меня в простеньком сайте внедренный стиль и inline-стиль прекрасно работают, а импортированный стиль и стиль из файла работают через пень-колоду. К примеру, в css-файле рарзмещаю единственную запись: body { background-color: silver; color: red; }. Но это работает не сразу, какое-то время отображаются цвета прежних настроек. И лишь после десятков пусков, а иногда только на следующий день после включения ПК, появляются новые цвета. Создается впечатление, что в силу некой инерционности прежние цвета какое-то время "давят" новые настройки. Использую локальный OpenServer, может там заложены "мины". Мне даже стало интересно, и время от времени периодически менял цвета, отключал/включал сервер но никакой закономерности не нахожу. Буквально лишь пару раз новые настройки срабатывали с первого пуска. После отключения/включения ПК - да, старые настройки теряются, но, снова меняю цвета, и ситуация повторяется. Любой Ваш ответ для меня интересен.

Ответить

tikkiwiki tikkiwiki 03.12.2013 15:23:20

Здравствуйте, Геннадий. Попробуйте почистить кэш браузера, так же проверьте на наличие других стилей, возможно они где-то перекрывают те, что Вы хотите использовать.

Ответить

dedok41 dedok41 04.12.2013 00:51:45

Здравствуйте Александр! Спасибо за оперативный отклик, признаюсь, не ожидал. Чистку выполняю периодически с помощью CCleaner. А вот, насчет наличия других стилей, спасибо за подсказку. На своем ноутбуке работаю один, сервер локальный, никаких других скриптов вроде нет. Но только сейчас заметил, что не работают настройки в том случае, если в браузере находятся сразу несколько копий моего простенького сайта, каждая копия размещается на отдельной вкладке и, естественно, каждая копия имеет свои пробные отличающие настройки для цветов. Но для всех копий срабатывают настройки той копии, которая стартовала первой. И это все под «крышей» локального сервера. Если html-файл напрямую передается браузеру, минуя локальный сервер, то все работает нормально, т.е. на всех вкладках браузера для каждой копии сайта в этом случае правильно отображаются свои собственные цвета независимо от способа задания CSS стилей. Похоже, в оперсервере ошибка, при использовании внешнего css-файла одна и та же копия обработчика css-стилей работает на несколько вкладок. Поэтому настройки программы, которая запущена первой, видимо, сохраняются и в следующих вкладках браузера. Происходит своего рода нежелательное наследование стилей от одной вкладки к другой. Стили первой вкладки «давят» стили других вкладок. И это, конечно, относится к любым другим настройкам, а не только к цветам. Спасибо еще раз Александр за наводку.

Ответить

Plan1977 Plan1977 14.10.2014 10:14:43

Здравствуйте Михаил! У меня следующая проблема. Я периодически обновляю CSS таблицы своего сайта, импортируя в уже существующие файлы новые блоки через @import. Так вот, новые изменения стилей вступают в силу только после перезагрузки страницы, как этого избежать???? Видимо таблицы стилей CSS грузятся их кеша браузера (в моём случае это IE11), а как сделать так, чтобы страницы стилей всегда грузились только с сервера?????

Ответить

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