CSS = стили и цвета
Стайлинг HTML с CSS
CSS означает каскадные таблицы стилей
Стайлинг могут быть добавлены к HTML-элементов в 3 способами:
- Инлайн - с использованием атрибута стиля в HTML - элементов
- Внутренний - с помощью <style> элемент в HTML <head> раздел
- Внешний - с помощью одного или нескольких внешних CSS файлов
Самый простой способ добавить стиль, чтобы сохранить стили в отдельных CSS-файлов. Но, в этом учебнике мы используем внутренний стиль, потому что это проще показать, и проще для вас, чтобы попробовать это самостоятельно.
Вы можете узнать гораздо больше о CSS в нашем CSS Учебник .
Встроенный Styling (Inline CSS)
Инлайн моделирования используются для применения уникального стиля для одного HTML элемента:
Встроенный стиль использует style атрибут.
Этот пример изменяет цвет текста <h1> элемента в синий:
Внутренний Styling (Internal CSS)
Внутренний стиль используется для определения стиля для одного HTML-страницы.
Внутренний стиль определяется в <head> сечение HTML страницы, в пределах <style> элемента:
пример
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Попробуй сам " Внешний стайлинг (External CSS)
Внешний лист стилей используются для определения стиля для многих страниц.
С внешней таблицы стилей, вы можете изменить внешний вид всего веб - сайта путем изменения одного файла!
Для того, чтобы использовать внешнюю таблицу стилей, добавьте ссылку на него в <head> раздел страницы HTML:
пример
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Попробуй сам " Внешняя таблицу стилей можно записать в любом текстовом редакторе. Файл не должен содержать HTML-тегов. Файл таблицы стилей должен быть сохранен с .css расширением.
Вот как « styles.css » выглядит:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS шрифты
CSS color свойство определяет цвет текста , который будет использоваться для элемента HTML.
CSS font-family свойство определяет шрифт , который будет использоваться для элемента HTML.
CSS font-size свойство определяет размер шрифта , который будет использоваться для элемента HTML.
пример
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Попробуй сам " CSS Box Model
Каждый элемент HTML имеет рамку вокруг него, даже если вы не можете увидеть его.
CSS border свойство определяет видимую рамку вокруг HTML элемента:
CSS padding свойство определяет отступ (space) внутри границы:
CSS margin свойство определяет запас (space) за пределами границы:
Примеры CSS выше использования px определить размеры в пикселях.
id Атрибут
Все приведенные выше примеры использования CSS для стилизации HTML-элементы в общем виде.
Для того, чтобы определить специальный стиль для одного специального элемента, первый добавить идентификатор атрибута к элементу:
<p id="p01">I am different</p>затем определить стиль для элемента с конкретным id :
class Атрибут
Для того, чтобы определить стиль для особого типа ( class ) элементов, добавить class атрибут к элементу:
<p class="error">I am different</p>Теперь вы можете определить различные стили для элементов с определенным классом:
Используйте id для решения single элемента. Используйте class для решения groups элементов.
Краткое содержание главы
- Используйте HTML style атрибут для встроенного стиля
- Используйте HTML <style> элемент для определения внутреннего CSS
- Используйте HTML <link> элемент ссылаться на внешний файл CSS
- Используйте HTML <head> элемент для хранения <style> и <link> элементы
- Используйте CSS color свойство для цвета текста
- Используйте CSS font-family свойства для текстовых шрифтов
- Используйте CSS font-size свойство для размеров текста
- Используйте CSS border свойство для видимых границ элементов
- Используйте CSS padding свойства для пространства внутри границы
- Используйте CSS margin свойство для пространства за пределами границы
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
HTML Style Теги
| Тег | Описание |
|---|---|
| <style> | Определяет информацию о стиле для HTML документа |
| <link> | Определяет связь между документом и внешним ресурсом |