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