предпочтительный способ сделать это - использовать каскадную таблицу стилей (CSS) . Это позволяет редактировать визуальные аспекты сайта, не разбираясь с самим HTML-кодом.
Объяснение:
<[tag] style="[css]"> Content </[tag]>
Где [tag] может быть чем угодно. Например, «p» (абзац), «span», «div», «ul», «li» и т. Д.
и где [css] - любой допустимый CSS. Например, «цвет: красный; размер шрифта: 15 пикселей; вес шрифта: полужирный»
<Ч />
Рекомендуемый способ добавить стиль к элементу html - присвоить ему «класс» (идентификатор, который может повторяться в документе) или «id» уникальный идентификатор, который не должен повторяться в документе.
Например:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Где тег - это любой действительный HTML-тег. id - это уникальное произвольное имя, а class - произвольное имя, которое может повторяться.
Затем в CSS (внутри тегов вашего документа):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
Для этого примера и для простоты для новых пользователей я назвал класс "красный". Однако class = "red" не лучший пример того, как назвать. Классы CSS лучше называть по их семантическому значению, а не по стилям, которые они реализуют. Поэтому class = "error" или class = "hilight" могут быть более подходящими. (Спасибо Гранту Вагнеру за указание на это)
Краткое объяснение CSS:
Поскольку большинство ответов, которые вы получаете, содержат упоминание CSS, я добавлю небольшое руководство о том, как это работает:
Где поставить CSS
Прежде всего, Вы должны знать, что CSS должен быть добавлен в теги вашего документа. Теги, используемые для определения того, где будет CSS:
<style type="text/css"> <!-- Your CSS here --> </style>
Это называется встроенным CSS, поскольку он находится внутри документа. Тем не менее, рекомендуется связать «включить» непосредственно из внешнего документа с помощью следующих тегов:
<link href="file.css" media="all" rel="stylesheet" type="text/css"/>
Где file.css - это внешний файл, который вы хотите включить в документ.
Преимущества использования тега "link" в том, что вам не нужно редактировать встроенный CSS. Допустим, если у вас есть 10 документов HTML, и вы хотите изменить цвет шрифта, вам просто нужно сделать это во внешнем файле CSS.
Это два наиболее популярных способа включения CSS. Тем не менее, есть еще один способ - сделать встроенные настройки CSS, например:
<[tag] style="<!-- CSS HERE -->"> Content </[tag]>
Общая структура CSS
Когда вы пишете код CSS, первое, что вам нужно знать, это что такое классы и что такое id. Поскольку я уже упоминал, что они делают выше, я собираюсь объяснить, как их использовать.
Когда вы пишете CSS, вам сначала нужно указать, какие элементы вы собираетесь «выбрать», например:
Допустим, у нас есть элемент "div" с классом "basic", и мы хотим, чтобы он имел черный цвет фона, белый шрифт и серую рамку.
Для этого нам сначала нужно «выбрать» элемент:
.[identifier] { }
Поскольку мы используем класс, мы используем "." перед идентификатором, который в данном случае является «базовым», поэтому он будет выглядеть так:
.basic { }
Это не единственный способ, потому что мы говорим, что ЛЮБОЙ элемент, который имеет класс "basic", будет выбран, поэтому допустим, что мы ПРОСТО хотим получить элементы "div". Для этого мы используем:
[html-tag].[identifier] { }
Так что для нашего примера это будет выглядеть так:
div.basic { }
Теперь мы выбрали "div" с классом "body". Теперь нам нужно применить визуальный стиль, который мы хотим. Мы делаем это в скобках:
div.basic {
background-color:black;
color:white;
border:1px solid gray;
}
С этим мы только что успешно применили визуальный стиль к всем элементам "div", к которым прикреплен "базовый" класс.
Помните, что это относится не только к «классу», но и к «идентификатору», но с небольшим изменением, здесь пример окончательного кода, но вместо класса мы просто скажем, что это «идентификатор»
#unique-basic {
background-color:black;
color:white;
border:1px solid gray;
}
Для полного руководства по CSS вы можете перейти по этой ссылке:
http://www.w3schools.com/css/
Помните:
Содержите ваш HTML-код в чистоте и используйте CSS для изменения ЛЮБОГО визуального стиля, который необходим. CSS действительно мощный и он сэкономит вам много времени.