Когда у нас уже есть базовые знания HMTL5 и CSS3, мы можем приступить к более подробному объяснению. Как упоминалось в других руководствах, посвященных этой теме, HTML помогает нам структурировать контент веб-сайта, а CSS, с другой стороны, помогает придавать этому контенту графический контент. В этом уроке мы представим структуру HTML некоторых общих элементов веб-сайта и графические атрибуты, которые мы можем предоставить им через CSS, способы, которые существуют для связи стилей CSS и структуры HTML.
Более конкретно, мы увидим структуру HTML и стиль 2 тегов: и
который был обозначен как контейнер заголовка примера веб-сайта.
Требование 1
Знать основную структуру HTML5, эту информацию можно найти в:
HTML5 и CSS3: первые шаги
Требование 2
Знать общие элементы веб-дизайна, эту информацию можно найти в учебнике:
HTML5 и CSS3: общие элементы в веб-дизайне
Требование 3
В нашем случае в редакторе выбран редактор кода Dreamweaver CC 2014:
Основы Dreamweaver CS6
Характеристики приложения, которые остаются неизменными, описаны, несмотря на разницу в их версиях.
1. Образец дизайна
Для этого урока мы будем использовать дизайн, разработанный для домашней страницы веб-сайта //www.egloffgroup.com, мы объясним вышеупомянутые элементы блоком с их соответствующим графическим стилем.
2. Связь между CSS3 и HTML5
Связать таблицу стилей с документами HTML можно двумя способами:
A) Непосредственно в файле HTML: он состоит из размещения всего кода CSS внутри тега. Этот способ идеален для выполнения первых шагов, однако это не самый рекомендуемый вариант, поскольку, если у нас много стилей в одном файле Редактирование кода будет намного сложнее.
B) С помощью тега: этот тег позволяет нам связать файл HTML с другими файлами или документами (в данном случае это таблица стилей .css), в которых отдельно указаны стили графики и содержимое веб-страницы. В приведенном ниже примере делается ссылка на файл с именем styles.css, расположенный в каталоге css корня файловой системы нашего хостинг-сайта. (корневой каталог CSS)
3. Элемент
Как упоминалось в других руководствах, этот тег предназначен для того, чтобы содержать метаинформацию сайта, связанные файлы (например, таблицы стилей favicon и css).
инициирование: Указывает базовый URL нашего сайта
: Атрибут charset определяет кодировку символов для документа HTML.
: Имя, которое будет отображаться в качестве заголовка на нашей странице
Как было сказано выше, этот тег помогает нам связать наш HTML-файл с другими типами файлов, в данном случае с конкретным источником из службы Google Fonts, favicon и таблицей стилей layout.css.
4. Элемент
Для данного примера этот элемент имеет: логотип и панель навигации.
- Зона участников
- О нас
- Работа доска
- решения
- обновления
- контакт
Логотип находится внутри ярлыка, который связывает его с начальным или базовым URL нашего веб-сайта, а панель навигации находится в списке, который позволяет нам лучше контролировать ваши стили.
Код CSS этого элемента выглядит следующим образом:
1 .header-index {height: 95px} 2 .header-index img.logo {width: 155px; отступы: 30px 15px 0 30px; float: left} 3 .header-index ul {padding-top: 74px; } 4 .header-index ul li {font-size: 15px; вес шрифта: 300; высота строки: 18 пикселей; Стиль списка: круг; поле: 0 0 5px 16px; display: inline-block} 5 .header-index ul li a {text-украшение: нет; text-shadow: 1px 1px 1px # 222;} 6 .header-index ul li a: hover {color: # EFAD3D} 7 .header-index ul li a.current {color: # EFAD3D} - Высота 95 пикселей определяется для этого класса.
- Класс создан для тега
где его ширина определена в 155 пикселях, верхний пробел в 30 пикселях, пробел справа в 15 пикселях, нулевой нижний пробел и пробел слева в 30 пикселях. Кроме того, атрибут float: left позволяет расположить элемент слева от элемента div, где он находится.
- Список
- создается превосходный интервал в 74 пикселя.
- Для списков мы назначаем такие параметры, как размер шрифта, его значение, интервал, тип элемента, который будет украшать каждый элемент списка и его общие поля.
- В этом утверждении мы будем назначать графические атрибуты таким меткам, как: украшение, которое они будут нести, и эффект тени.
- Цвет, который элементы будут иметь при наведении курсора на эти элементы, обозначен.
- Цвет элементов будет обозначен, когда активна ссылка на веб-сайт, на который вы ссылаетесь.
5. Подробно
Прежде чем мы перейдем к объяснению атрибутов, которые мы только что видели, важно прояснить разницу между двумя атрибутами, которые могут сбить нас с толку при попытке применить стили к нашим HTML-документам: разница между отступом и полем
Маржа: как следует из названия - это разница между двумя или более элементами.
Заполнение: это пространство, которое создается между содержимым и краями контейнера.
Следующее изображение иллюстрирует концепцию, которая будет объяснена.
Просмотренные атрибуты CSS3:
- Высота: установите высоту.
- Ширина: установите ширину.
- Заполнение: это пространство, которое генерируется между содержимым и краями контейнера, есть два способа объявить его, поместив все значения, соответствующие его верхнему, правому, нижнему и левому интервалу, в один и тот же атрибут, например
обивка: 20px 15px 10px 5px
Или, объявив ссылку на отступ напрямую:
- padding-top: верхний интервал.
- отступ справа: интервал справа .
- padding-bottom: расстояние снизу .
- отступ слева: интервал слева .
- margin-top: верхний интервал.
- Поля справа : интервал справа.
- поле снизу: нижний интервал.
- Поля слева : интервал слева.
- Вес шрифта: значение шрифта .
- Высота строки: межстрочный интервал.
- Стиль списка: Орнамент списков.
- Дисплей: указывает, как должен отображаться элемент.
- Цвет: назначает цвет для элемента.
Это примеры того, как применять атрибуты к классам или идентификаторам, которые мы присвоили нашим тегам в структуре html, есть много способов сделать операторы CSS, это лишь некоторые из многих атрибутов, которые могут быть применены.
- 0
СТАТЬИ