Стили HTML CSS - httpdoc.ru

HTML стили

HTML style используется для изменения или добавления стиля к элементу HTML. Самостоятельное присвоение стиля перезапишет стиль элементов по умолчанию.

Некоторые основные свойства CSS являются - color , background-color , text-align , и font-size т.д.

Синтаксис:

Стиль = "свойство: значение;"

Добавление стилей в элементы HTML

Это три метода реализации информации о стилях в HTML-документе.

  • Встроенные стили: указав style атрибут в самом теге HTML.
  • Встроенный стиль: путем написания CSS внутри <style> тега внутри <head> раздела документа.
  • Внешняя таблица стилей: использование <link> тега для добавления внешнего файла CSS на веб-страницу.

Встроенные стили

Встроенный стиль CSS применяется непосредственно внутри самого тега с помощью style атрибута. style Атрибут применяется в открывающем теге парных тегов, и все б / ш открывающейся-закрывающихся тегов получат указанный стиль.

Атрибут style дает несколько пар property: value разделенных точкой с запятой ( ; ) в одной строке.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Inline Styles </title>	
</head>
<body>

<h4 style="color:green"> This is Green Color </h4>  
<h4 style="color:blue"> This is Blue Color </h4>  	

</body>
</html>

Выход

Inline Style

Это зеленый цвет

Это синий цвет


Встроенные таблицы стилей

Встроенные или внутренние таблицы стилей работают только на той веб-странице, в которую они встроены.
Их можно определить в любом месте веб-страницы в <html> тегах, но обычно они определяются в <head> разделе документа HTML с помощью <style> тега. Попробуйте пример ниже -

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Embedded Style Sheets </title>	
 <style>
  body{ background-color:seagreen;}
  </style>
</head>

<body>

<h2>This is a heading.</h2>
<p>This is a paragraph.</p> 	

</body>
</html>

Выход

Embedded Style Sheets

Это заголовок.

Это абзац.


Внешние таблицы стилей

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> External Style Sheets </title>	
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1 style="font-family: “Georgia”, serif;">This is a heading.</h1>
<p style="font-family:courier;">This is a Paragraph.</p>
 
</body>
</html>

Выход

External Style Sheets

Это заголовок.

Это абзац.


Стиль размера шрифта HTML

font-size Свойство определяет разный размер шрифта , который будет использоваться для HTML элемента

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML styles font-size </title>	
</head>
<body>

<h1 style="font-size:200%;"> This is a Heading. </h1> 
<p style="font-size:100%;"> This is a Paragraph. </p>
 
</body>
</html>

Выход

HTML styles font-size

Это заголовок.

Это абзац.