Руководство HTML Styles

HTML Styles
Inline Style
CSS Class
CSS файл

1. HTML Styles

История про HTML Styles началась с 1994 года, в то время когда website начали использовать как платформа для электронной публикации. Люди осознали, что очень сложно создать web страницу с лэйаутом и стилем (style) похожим на традиционные газеты. Это вызвало потребность в наличии "язык стилей таблиц" (style sheet language), потом вышел язык CSS (Cascading Style Sheets).

CSS это интересная тема про которую много что можно рассказать, стоит его представить в деталях в отдельной статье, включая историю и преимущества, что приносит CSS. Будет прекрасно если вы прочитаете мою статью про CSS указанная по ссылке ниже:
Lich su cua CSS

В основном CSS определяет стили (style), которые можно применить элементам HTML, например линейку, цвет, шрифт,...

В данной статье я покажу вам как использовать Style в HTML, и некоторые основные свойства (property) CSS, у нас есть отдельная тема про CSS и вы можете изучить более подробно здесь.

Pуководства CSS

2. Inline Style

Самый простой способ применения стиля к элементу это использовать атрибут (attribute) style.

<tagname style="property1:value1; property2: value2">

Например:

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue; font-weight:bold">I am blue and bold</p>

<p style="font-size:35px; font-style:italic">I am big and italic</p>

color, font-size, font-style, font-weight являются свойствами (property) у CSS. Каждое свойство CSS определяет аспект стиля для элемента.

OK, мы познакомимся с некоторыми распространенными свойствами (property) CSS через примеры ниже:

CSS background-color

Свойство (property) CSS background-color используется для определения цвета фона для элемента, оно так же работает для подэлементов текущего элемента.

background-color-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Style</title>
    <meta charset="UTF-8"/>
</head>
<body style="background-color: AliceBlue;">
     <h1>CSS background-color</h1>

     <p style="background-color:yellow">My Background Color is yellow!</p>
</body>
</html>

CSS color

Свойство (property) CSS color используется для отпределения цвета текста (text color) для элемента, оно так же работает для подэлементов текущего элемента.

<p style="color:red;">I am red</p>

CSS font-family

Свойство (property) CSS font-family используется для настройки шрифта текста для элемента, оно так же работает для подэлементов текущего элемента.

font-family-example.html

<h1>CSS font-family</h1>
<hr/>
<div style="font-family: 'Comic Sans MS';">
  <h3>This is a Heading h3</h3>
  <p>This is a Paragraph</p>
</div>
<hr/>
<p style="font-family: Arial;">
  This is a Paragraph
</p>

CSS font-size

Свойство (property) CSS font-size используется для определения размера шрифта для элемента, оно так же работает для для подэлементов текущего элемента.

font-size-example.html

<p>
    This is a Paragraph (Default font-size)
</p> 
<p style="font-size: 150%">
    This is a Paragraph (font-size: 150%)
</p>
<p style="font-size: 35px">
    This is a Paragraph (font-size: 35px)
</p>

CSS text-align

Свойство (property) CSS text-align используется для горизонтального выравнивания (horizontal text alignment). Оно имеет 3 значения: left, center, right.

text-align-example.html

<p style="background-color:AliceBlue;text-align:left;">
    This is a Paragraph (text-align:left;)
</p>
<p style="background-color:AliceBlue;text-align:center;">
    This is a Paragraph (text-align:center)
</p>
<p style="background-color:AliceBlue;text-align:right;">
    This is a Paragraph (text-align:right)
</p>

3. CSS Class

CSS позволяет вам создать (class), группу свойств (property), и вы можете применить данный класс к одному или более элементам. Классы определяются внутри открытого тега <style> и закрытого тега </style>.

Тег <style> можно расположить в любом месте в документе HTML, но рекомендуется расположить его в теге <head>.

Например, определим класс с названием "app-note" внутри тега <style></style>. Примечание: Нужна точка ( . ) перед названием класса.

<style>
    .app-note  {
        font-size:90%;
        font-style: italic;
        color: red;
    }
</style>

Потом вы можете применить данный класс к элементам HTML:

<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>

Смотрите полный код примера.

css-class-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class</title>
    <meta charset="UTF-8"/>
    <style>
        .app-note  {
            font-size:90%;
            font-style: italic;
            color: red;
        }
    </style>
</head>
<body>
<h3>CSS Class</h3>
<hr/>
<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>
</body>
</html>

Например, определим группу свойств (property), которые применяются к определенному тегу.

<style>
    div  {
        font-size:120%;
        color: CadetBlue;
    }
    code {
       font-weight: bold;
       font-style: italic;
       background-color: yellow;
       color: blue;
    }
</style>

<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>

Xem code đầy đủ của ví dụ trên:

styles-for-tag-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Styles for a Tag</title>
    <meta charset="UTF-8"/>
    <style>
        div  {
            font-size:120%;
            color: CadetBlue;
        }
        code {
           font-weight: bold;
           font-style: italic;
           background-color: yellow;
           color: blue;
        }
    </style>
</head>
<body>
<h3>Styles for a Tag</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
</body>
</html>

4. CSS файл

Часто вы пишете style в одном отдельном CSS файле, это делает файл используемым многими разными HTML документами.

Например, создайте файл с названием main.css:

main.css

div  {
    font-size:120%;
    color: CadetBlue;
}

code {
   font-weight: bold;
   font-style: italic;
   background-color: yellow;
   color: blue;
}

.app-note  {
    font-size:90%;
    font-style: italic;
}

и объявите для использования вышеупомянутого CSS файла в HTML документе:

using-css-file-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Using CSS File</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
<h3>Using CSS File</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
<br/> <br/>
<div class="app-note">
    This is a DIV with class 'app-note'
</div>
</body>
</html>