Прописать стиль в div

Рассмотрим практичный пример с

Например . Html код:

Преобразуется на странице в следующее:

Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов , но и для других. Например, для , и т.д. — для всех тегов, которые поддерживают параметр class.

Выше разобранный пример можно сделать по-другому (не используя class):

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style =" color: blue; font-size:12px; font-family:Arial ". Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class =" какой-то класс "). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом

Таблица стилей CSS

Чтобы упростить работу со стилями, создают специальную "таблицу стилей CSS", которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:

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

Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css , а там где нужно его применить писать .

Плюсы при использовании таблицы стилей

• Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
• Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
• Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.

Использование стилей html через ID

Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:

Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.

Для использования ID, код html страницы должен содержать примерно следующее:

Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.

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

Аргументы и свойства в style

1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

Аналогом является: background-color: цвет .

Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.

2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.

3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:

• repeat-x — повторять фоновое изображение только по горизонтали
• repeat-y — повторять фоновое изображение только по вертикали
• no-repeat — не повторять фоновое изображение

4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:

• dotted — рамка будет покрыта не сплошной линией, а точками
• dashed — рамка будет покрыта тире, пробел, тире и т.д.
• double — двойная рамка
• groove — рифлёная 3D граница

Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов

Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:

• border-bottom: 1px solid red; — линия будет только снизу
• border-top: 1px solid red; — линия будет только сверху
• border-right: 1px solid red; — линия будет только справа
• border-left: 1px solid red; — линия будет слева

Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border

5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:

• Verdana (я пользуюсь этим шрифтом)
• Times New Roman
• Arial
• Courier New
• Comic Sans MS
• Georgia
• Impact

Более подробно про шрифты и их выбор читайте в статьях:

7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .

8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:

• bold — полужирное
• bolder — жирное
• lighter — светлое
• normal — обычный

Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight

9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .

10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.

11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.

12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.

13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.

14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).

15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:

• visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
• hidden — отображается только область внутри элемента, остальное будет обрезано
• scroll — всегда добавляются полосы прокрутки
• auto — полосы прокрутки добавляются только при необходимости

Более подробно читайте в статье: свойство CSS overflow

16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:

• left — по левому краю
• right — по правому краю
• center — по центру
• justify — выравнивание по левому и правому краю
• auto — автоматически
• inherit — наследование значения предка

Более подобно читайте в статье свойство CSS text-align

17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:

• left — по левому краю
• right — по правому краю
• none — отсутствует
• inherit — наследование значения предка

18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height

19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:

• normal — обычное значение
• nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
• pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
• pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
• pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
• inherit — наследование значения предка

Более подробно читайте в статье: свойство CSS white-space

20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:

• block — элемент показывается как блочный
• inline — элемент отображается как встроенный
• inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
• inline-table — элемент является таблицей
• list-item — элемент выводится как блочный и добавляется маркер списка
• none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
• run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
• table — элемент является блочной таблицей
• table-caption — задает заголовок таблицы подробно
• table-cell — элемент представляет собой ячейку таблицы
• table-column — назначает элемент колонкой таблицы
• table-column-group — элемент является группой одной или более колонок таблицы
• table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
• table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
• table-row — элемент отображается как строка таблицы
• table-row-group — создает структурный блок, состоящий из нескольких строк таблицы

Более подробно читайте в статье: свойство CSS display

21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:

• blink — мигающий текст
• line-through — перечеркнутый текст
• overline — верхнее подчеркивание текста
• underline — нижние подчеркивание текста
• none — выводит обычный текст
• inherit — наследуется у предка

Более подробно читайте в статье: свойство CSS text-decoration

22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.

• capitalize — первый символ каждого слова в предложении будет заглавным
• lowercase — перевод всего текста в нижний регистр
• uppercase — перевод всего текста в верхний регистр
• none — не менять ничего
• inherit — наследование предка

Более подробно читайте в статье: свойство CSS text-transform

23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing

Так же стоит обратить внимание на возможности стилей для тега , но они будут рассмотрены отдельно здесь: HTML тег а.

Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег
. Данный тег помещается в контейнер , как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5 CSS 2.1 IE Cr Op Sa Fx

Значение атрибута тега
— rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега
приведено в примере 3.2.

Пример 3.2. Файл со стилем

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Глобальные стили

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

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

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

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

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

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

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

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

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

Здесь будет происходить следующее: для всех элементов внутри тега

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

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

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

Данный способ очень похож на предыдущий способ, но здесь не используется тег создал файл my.css в нем dody

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

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

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

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

МИхаил, добрый вечер. подскажите, что не так сделано. хочу фотку разместить слева, а чтоб 3-D текст ее обтекал справа. но почему-то текст все время наезжает на картинку и не хочет выравниваться. вот код Трехмерный заголовок