HTML | атрибут стиля

Опубликовано: 1 Марта, 2022

Стили в HTML - это в основном правила, описывающие, как документ будет представлен в браузере. Информация о стиле может быть прикреплена как отдельный документ или встроена в документ HTML.

Есть 3 способа реализовать стиль в HTML:

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

Inline Style : In Inline styling, the CSS rules are directly written inside the starting tag using the style attribute. The style attribute includes a series of CSS property and value pairs. Each ‘ property : value ‘ pair is separated by a semicolon ( ; ).

Example:

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
  
    <h1 style="color:Blue;font-size:25px;">
        Example of Inline Style
    </h1>
  
    <p style="color:red;">First paragraph</p>
  
    <p style="color:green;font-size:40px;">
        Second paragraph
    </p>
  
    <hr style="border-color:orange;">
  
</body>
  
</html>

Output :

Embedded Style : Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> tag.

Example:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style type="text/css">
        body {
            background-color: powderblue;
        }
          
        h1 {
            color: black;
            font-family: arial;
        }
          
        p {
            color: yellow;
            font-family: verdana;
        }
    </style>
</head>
  
<body>
    <h1>Example of Embedded Style</h1>
    <p>First paragraph.</p>
</body>
  
</html>

Output :

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

Связывание внешних таблиц стилей
Импорт внешних таблиц стилей

Linking External Style Sheets :
In this method, an external style sheet is linked to an HTML document using the <link> tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" 
            href="/html/css/externalstyle.css">
</head>
<body>
    <h3>Example of Linking External Style Sheet</h3>
    <p>First paragraph.</p>
</body>
</html>

Output :

Importing External Style Sheets :
External style sheets can be loaded into an HTML document using “@import”. The “@import” statement instructs the browser to load the CSS file. Other CSS rules can also be included using the <style> element.

Example:

<!DOCTYPE html>
<html>
<head>
<style type = "text/css"> 
    @import url("/html/css/importstyle.css");
p{color:powderblue; font - size : 30px;}
</style>
</head>
<body>
    <h3>Example of external style sheet using import</h3>
    <p>First paragraph</p>
</body>
</html>

Output :

Поддерживаемый браузер: браузеры, поддерживаемые атрибутом style , перечислены ниже:

Гугл Хром
Internet Explorer
Fire Fox
Опера
Сафари

HTML

HTML | атрибут стиля

РЕКОМЕНДУЕМЫЕ СТАТЬИ