Привет дорогие друзья! Настало время для изучения следующего урока — мы научимся с вами стилизовать элементы HTML документа с помощью CSS. Делать мы это будем разными способами, о которых вы узнаете в нашем обучающем уроке.
Немного определений.
CSS — обозначает Каскадные Таблицы Стилей (Cascading Style Sheets).
Таблицы стилей описывают как элементы HTML документа должны отображаться на дисплее в браузере или на других медиа средствах.
Благодаря CSS происходит экономия время, причем достаточно большая экономия. Всего лишь задав одно правило для элемента оно распространится на все страницы сайта, т.е нет необходимости к каждой странице прописывать определенные стили.
В HTML CSS можно добавить 3-мя способами:
Самым наиболее распространенным вариантом является создание отдельного файла со стилями и подключение к нему в секции <head>
Однако в этом уроке для большей наглядности примеров мы будем использовать внутристроковый способ.
Содержание
Встроенный внутристроковый CSS используется в том случае, если мы хотим задать стиль к какому-то одному элементу HTML на странице. В примере ниже мы поменяем цвет у заголовка html первого уровня h1 на синий.
|
1
|
<h1 style="color:blue;">Этот заголовок синий</h1>
|
Внутренний CSS используется для определения стиля для одной HTML-страницы. Определяется в разделе <head> страницы HTML в элементе <style> :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Это у нас заголовок</h1>
<p>Это у нас параграф</p>
</body>
</html>
|
Вот как будет выглядеть в результате страница:
Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.
С внешней таблицей стилей вы можете изменить внешний вид всего веб-сайта, сделав изменения всего лишь в одном файле!
Чтобы использовать внешний CSS, добавьте в нее ссылку в разделе <head> на странице HTML:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф</p>
</body>
</html>
|
Результат:
Важно! Будьте внимательны. В используемом примере файл стилей подключен как бы внутри сервера. В вашем случае вам нужно создать папку с любым названием, например SITE, а внутри ее у вас будет два файла — один будет называться index.html, куда вы вставите конструкцию выше, а другой файл — stye.css
Тогда пример сработает!
Вот, что будет внутри отдельного файла style.css:
|
1
2
3
4
5
6
7
8
9
|
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
|
Свойство CSS color для шрифта будет определять его цвет, который будет применен к параграфам на странице.
Семейство шрифта, т.е какое будет использовано начертание с засечками или без них, будет определяться через свойство font-family
Размерность шрифта указывается, как вы уже можете понять из других уроков, через свойство font-size
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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>Это заголовок</h1>
<p>Это, мать его, параграф</p>
</body>
</html>
|
Результат:
Свойство CSS border определяет границу вокруг элемента HTML в виде рамки:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Немного практикуемся</p>
<p>Будет легче изучать</p>
<p>Получите новую профессию</p>
</body>
</html>
|
В итоге получим:
Свойство padding означает количественный отступ в пикселях внутри элемента, например мы можем задать его внутри параграфа, который обрамлен границей рамки. Пример:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>Привет! Я толстый заголовок из Макдака</h1>
<p>Сейчас этот параграф раздует к чертям!</p>
</body>
</html>
|
В браузере увидим картину:
Данное свойство определяет внешний отступ между соседствующими элементами, например мы можем задать определенный интервал между двумя параграфами HTML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>Жирный заголовок, как поезд пассажирный</h1>
<p>Привет брат, ты от меня далеко</p>
<p>Я не могу за тебя ухватиться</p>
</body>
</html>
|
Смотрим и наблюдаем:
Более подробно про отступы в HTML можно почитать в этой статье
Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:
|
1
|
<p id="p01">I am different</p>
|
|
1
2
3
|
#p01 {
color: blue;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p id="p01">Мне стыдно, что я голубой, ладно синий!</p>
</body>
</html>
|
Примечание. Идентификатор элемента должен быть уникальным на странице, поэтому селектор идентификаторов используется для выбора одного уникального элемента!
Чтобы определить стиль для особого типа элементов, добавьте атрибут класса к элементу:
|
1
|
<p class="error">Я элемент у которого присвоен атрибут класс</p>
|
затем определите стиль для элементов с определенным классом:
|
1
2
3
|
p.error {
color: red;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p>На первый второй рассчитайсь!</p>
<p>Первый</p>
<p class="error">Второй</p>
<p>Первый</p>
<p class="error">Я красный расчет закончен!</p>
</body>
</html>
|
Вот, что получается в нашем примере:
На внешние таблицы стилей можно ссылаться с полным URL-адресом или с указанием пути к текущей веб-странице.
В этом примере для ссылки на таблицу стилей используется полный URL-адрес:
|
1
|
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>
<h1>Привет мой тощий друг параграф</h1>
<p>Здарова жирный заголовок</p>
</body>
</html>
|
Получаем:
В нижнем примере ссылка на таблицу стилей находится в папке html на текущем веб-сайте:
|
1
|
<link rel="stylesheet" href="/html/styles.css">
|
Этот пример ссылается на таблицу стилей, расположенную в той же папке, что и на текущей странице:
|
1
|
<link rel="stylesheet" href="styles.css">
|
Подведя итоги мы усвоили за сегодня, что используем:
Если с теорией нам стало более менее понятно, значит самое время закрепить полученные знания на практике. Я подготовил для вас 6 упражнений в которых вы отточите знания и сможете применять HTML CSS на своих сайтах:
Я подготовил для Вас обращение, с ним можете ознакомиться тут
Макс Метелев - автор, блоггер, актер местного театра, ведущий городских мероприятий. Делюсь только лучшим!
Всплывающая форма обратного звонка на сайте WordPress
Как проверить сайт на дубли страниц?
Как добавить Disqus комментарии на сайте WordPress?
11 важных правил первичной оптимизации сайтов
Nrelate — плагин внутренней перелинковки страниц сайта
Как сделать импорт CSV записей в WordPress?
24 плагина обязательных для установки на коммерческие сайты на 2016 год
Создаем красивую форму обратной связи самостоятельно
57 отличных примеров сайтов на WordPress
Как настроить рубрики wordpress с помощью Rich text tags?
Бизнес идея — сухая автомойка
18 способов где брать уникальный контент для сайта
101 полезный совет для начинающего блоггера
Как установить метрику на сайт MODx
Как правильно подключить шрифты в CSS на сайте?
Как ограничить доступ к админке wordpress?
Устанавливаем виджет яндекс пробки без информеров
Как добавить кнопку подписки на канал Youtube?
Как установить фон для сайта?
Как привлечь рекламодателей на сайт
Обучающий тренинг-центр База знаний для интернет предпринимателя. Здесь вы сможете получить полную, проверенную, а самое главное доступную информацию о Wordpress, SEO, научитесь востребованной профессии на рынке IT услуг. Все уроки бесплатные, мы не взымаем плату. Информация постоянно обновляется и пополняется свежими выпусками.
