Как задать 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
-
Создано 19.07.2010 22:52:12
-
Михаил Русаков
Комментарии (33):
Здравствуйте. Не могу выполнить задание. С помощью импортированных стилей сделать цвет фона зеленым. вот что я сделал в главе <head> <style> @import url( "my.css"); </style> создал файл my.css в нем dody{ background-color: red; color: black }
Ответить
body, а не dody. И зелёный - это green, а не red.
Ответить
Ну, красный фон я сам захотел,а вот dody............ дааа. Спасибо!!!
Ответить
Около часа голову ломал.
Ответить
Михаил, у вас ошибка в начале статьи! У вас написано "Для начала первой способ - это inline-стиль." Не первой, а первый
Ответить
Спасибо, исправил!
Ответить
МИхаил, добрый вечер. подскажите, что не так сделано. хочу фотку разместить слева, а чтоб 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>
Ответить
У Вас для этого текста используется абсолютное позиционирование и все координаты жестко заданы. Поэтому он и не будет обтекать картинку.
Ответить
если я задаю позиционирование relative, то текст справа, но слои текста разлетаются.
Ответить
Тут ничего не поделать. Обтекание при фиксированных координатах не будет. Только если вручную разделять, опять же по координатам.
Ответить
а как это сделать?
Ответить
Вы же задаете координаты для div. Просто прописывайте их с учетом размера картинки.
Ответить
хм. если текст короче, то все умещается. т.е. объемные тексты можно выравнивать относительно картинок только за счет размеров? <!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>
Ответить
Можно ещё попробовать разбить текст и картинку на разные блоки, чтобы они не смешивались.
Ответить
Спасибо большое! Вы очень помогаете
Ответить
Здравствуйте. Можете пожалуйста показать что должно быть написано в том "my.css" файле например с зеленным цветом текста. И в каком формате файл сохранять.
Ответить
Всё точно так же, как и код между тегами <style> </style>. Файл сохраняется как обычный текстовый файл, просто с расширением .css
Ответить
Здравствуйте, Михаил. Имеется 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> *** Спасибо.
Ответить
Это полный код? Тогда почему тег <style> находится за </html>. А если стиль из отдельного файла, тогда тег <style> не нужен.
Ответить
Оперативный и качественный ответ, спс. Прошу сообщить Ваш Yandex-кошелек. Считаю что труд хотя бы небольшими суммами, но должен быть оплачиваемым.
Ответить
41001561125605 - и у меня есть платные обучающие курсы: http://srs.myrusakov.ru/list , поэтому просто так переводить деньги смысла не вижу, лучше что-нибудь приобретите из курсов.
Ответить
Михаил, как правильно прописать это в inline-стиле, то бишь в самом теле кода? И куда вставлять текст заголовка? h1 { color: red; margin-top: 100px; } По всякому разному пробовал.. ничего не выходит. А вот когда указываю такой код во внедренном стиле все работает.
Ответить
<h1 style="color: red; margin-top: 100px;">Заголовок</h1>
Ответить
Все получилось!) Спасибо большое за помощь!
Ответить
Получается стили можно задавать одновременно несколькими способами. И импортом и онлайном.
Ответить
Да.
Ответить
В последнем примере закрывающий слеш у тега линк не указан.
Ответить
link - это одиночный тег. По стандарту HTML4 он пишется так, как и написано сейчас.
Ответить
Здравствуйте, Михаил! Примите старичка-новичка в свою компанию. Несколько месяцев присматривался к Вашей тусовке, а ранее несколько лет штудировал web-технологии в ИНТУИТе. Нужда заставила просить помощи. Несколько дней не могу выяснить, почему у меня в простеньком сайте внедренный стиль и inline-стиль прекрасно работают, а импортированный стиль и стиль из файла работают через пень-колоду. К примеру, в css-файле рарзмещаю единственную запись: body { background-color: silver; color: red; }. Но это работает не сразу, какое-то время отображаются цвета прежних настроек. И лишь после десятков пусков, а иногда только на следующий день после включения ПК, появляются новые цвета. Создается впечатление, что в силу некой инерционности прежние цвета какое-то время "давят" новые настройки. Использую локальный OpenServer, может там заложены "мины". Мне даже стало интересно, и время от времени периодически менял цвета, отключал/включал сервер но никакой закономерности не нахожу. Буквально лишь пару раз новые настройки срабатывали с первого пуска. После отключения/включения ПК - да, старые настройки теряются, но, снова меняю цвета, и ситуация повторяется. Любой Ваш ответ для меня интересен.
Ответить
Здравствуйте, Геннадий. Попробуйте почистить кэш браузера, так же проверьте на наличие других стилей, возможно они где-то перекрывают те, что Вы хотите использовать.
Ответить
Здравствуйте Александр! Спасибо за оперативный отклик, признаюсь, не ожидал. Чистку выполняю периодически с помощью CCleaner. А вот, насчет наличия других стилей, спасибо за подсказку. На своем ноутбуке работаю один, сервер локальный, никаких других скриптов вроде нет. Но только сейчас заметил, что не работают настройки в том случае, если в браузере находятся сразу несколько копий моего простенького сайта, каждая копия размещается на отдельной вкладке и, естественно, каждая копия имеет свои пробные отличающие настройки для цветов. Но для всех копий срабатывают настройки той копии, которая стартовала первой. И это все под «крышей» локального сервера. Если html-файл напрямую передается браузеру, минуя локальный сервер, то все работает нормально, т.е. на всех вкладках браузера для каждой копии сайта в этом случае правильно отображаются свои собственные цвета независимо от способа задания CSS стилей. Похоже, в оперсервере ошибка, при использовании внешнего css-файла одна и та же копия обработчика css-стилей работает на несколько вкладок. Поэтому настройки программы, которая запущена первой, видимо, сохраняются и в следующих вкладках браузера. Происходит своего рода нежелательное наследование стилей от одной вкладки к другой. Стили первой вкладки «давят» стили других вкладок. И это, конечно, относится к любым другим настройкам, а не только к цветам. Спасибо еще раз Александр за наводку.
Ответить
Здравствуйте Михаил! У меня следующая проблема. Я периодически обновляю CSS таблицы своего сайта, импортируя в уже существующие файлы новые блоки через @import. Так вот, новые изменения стилей вступают в силу только после перезагрузки страницы, как этого избежать???? Видимо таблицы стилей CSS грузятся их кеша браузера (в моём случае это IE11), а как сделать так, чтобы страницы стилей всегда грузились только с сервера?????
Ответить
В данном случае мы задали,ЧТОБЫ элемент "текст" будет размером в 150% и выравнен по центру. Это пример inline-стиля.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.