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

View more Tutorials:

1- HTML Styles

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

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 используется для настройки шрифта текста для элемента, оно так же работает для подэлементов текущего элемента.
<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 используется для определения размера шрифта для элемента, оно так же работает для для подэлементов текущего элемента.
<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>

View more Tutorials: