Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...

Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...

Теоретическая значимость работы: Описание теоретической значимости (ценности) результатов исследования должно присутствовать во введении...

Интересное:

Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...

Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...

Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Структура разметки страницы в HTML5

2020-11-19

249

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 2 из 16Следующая ⇒

При использовании обычной структуры страницы сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (<div class="header">, <div class="nav">, <div class="aside">, <div class="section">, <div class="footer"> и пр.).

Каскадные таблицы стилей CSS

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

Применение каскадных таблиц стилей.

Внутренние стили

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

<p style="color:blue">Абзац с текстом синего цвета</p>

<p style="color:red">Абзац с текстом красного цвета</p>

Глобальные стили

Глобальные стили CSS располагаются в контейнере <style>...</style>, расположенном в свою очередь в контейнере <head>...</head>.

Атрибут type="text/css", ранее обязательный для тега <style>, в стандарте HTML5 можно опускать.

Глобальные стили являются универсальным средством, позволяющим не только оперативно изменять внешний вид Web-страницы, но и бороться с перегруженностью документа оформительскими тегами. Проблема в том, что такое стили надо прописывать на каждой странице сайта.

Пример

<html>

<head>

.........

p {color:#808080;}

</style>

.........

</head>

<body>

<p>Серый цвет текста во всех абзацах Web-страницы</p>

</body>

</html>

Синтаксис CSS.

Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:

p {

text-indent: 30px;

font-size: 14px;

color: #666;

}

Селекторы CSS

Селектор	Описание	Подробнее
*	Любой элемент	Универсальный селектор
E	Элемент, определенный тегом E	Селекторы тегов
E#myid	Элемент E с идентификатором "myid"	Селекторы идентификаторов
E.myclass	Элемент E класса "myclass"	Селекторы классов
E[atr]	Селектор существования атрибута	Селекторы атрибутов
E[atr="val"]	Селектор равенства атрибута	Селекторы атрибутов
E[atr~="val"]	Селектор атрибута со списком значений	Селекторы атрибутов
E[atr^="val"]	Селектор префикса атрибута	Селекторы атрибутов
E[atr$="val"]	Селектор суффикса атрибута	Селекторы атрибутов
E[atr*="val"]	Селектор подстроки атрибута	Селекторы атрибутов
E:link	Элемент E – еще не посещенная пользователем ссылка	Динамические псевдоклассы
E:visited	Элемент E – уже посещенная пользователем ссылка	Динамические псевдоклассы
E:hover	Элемент E при наведении на него указателя мышки	Динамические псевдоклассы
E:active	Элемент E, активированный пользователем	Динамические псевдоклассы
E:focus	Элемент E в фокусе	Динамические псевдоклассы
E:target	Элемент E, который является целью ссылки	Целевой псевдокласс
E:lang	Элемент E, написанный на указанном языке	Псевдокласс языка
E:enabled	Элемент E – доступный элемент формы	Псевдоклассы состояний
E:disabled	Элемент E – недоступный элемент формы	Псевдоклассы состояний
E:checked	Элемент E – включенный флажок или переключатель	Псевдоклассы состояний
E:indeterminate	Элемент E – неопределенный флажок или переключатель	Псевдоклассы состояний
E:root	Элемент E, корень документа	Структурные псевдоклассы
E:nth-child(n)	Элемент E, n-й ребенок родительского элемента	Структурные псевдоклассы
E:nth-last-child(n)	Элемент E, n-й ребенок родительского элемента, считая с конца	Структурные псевдоклассы
E:nth-of-type(n)	n-й элемент типа E	Структурные псевдоклассы
E:nth-last-of-type(n)	n-й элемент типа E, считая с конца	Структурные псевдоклассы
E:first-child	Элемент E, первый дочерний элемент родителя	Структурные псевдоклассы
E:last-child	Элемент E, последний дочерний элемент родителя	Структурные псевдоклассы
E:first-of-type	Первый элемент типа E	Структурные псевдоклассы
E:last-of-type	Последний элемент типа E	Структурные псевдоклассы
E:only-child	Единственный у родителя дочерний элемент	Структурные псевдоклассы
E:only-of-type	Единственный у родителя элемент типа E	Структурные псевдоклассы
E:empty	Элемент E, не содержащий дочерних элементов	Структурные псевдоклассы
E:not(X)	Элемент E, который не соответствует простому селектору X	Псевдокласс отрицания
E::first-line	Первая строка элемента E	Псевдоэлементы
E::first-letter	Первая буква элемента E	Псевдоэлементы
E::before	Содержимое до элемента E	Псевдоэлементы
E::after	Содержимое после элемента E	Псевдоэлементы
E::selection	Выделение в элементе E	Псевдоэлементы
E F	Элемент F, который находится внутри элемента E	Контекстные селекторы
E > F	Элемент F, который находится непосредственно внутри элемента E	Дочерние селекторы
E + F	Элемент F, который следует сразу после элемента E	Соседние селекторы
E ~ F	Элемент F, который следует после элемента E	Смежные селекторы

Javascript

Javascript – это язык программирования, с помощью которого веб-страницам придается интерактивность. С его помощью создаются приложения, которые включаются в HTML-код (например, анкеты или формы регистрации, которые заполняются пользователем). Часто Javascript путают с языком программирования Java, однако общего между ними очень мало. К тому же, некоторые сравнивают Javascript с языками Python, Self, Ruby. Однако это особенный язык, который существует сам по себе.

С помощью Javascript можно изменять страницу, изменять стили элементов, удалять или добавлять теги. С его помощью можно узнать о любых манипуляциях пользователя на странице (прокрутка страницы, нажатие любой клавиши, клики мышкой, увеличение или уменьшение рабочей области экрана и т. д.). Используя JavaScript можно получить доступ к любому элементу HTML-кода и делать с этим элементом множество манипуляций. Можно загружать данные не перезагружая страницу, выводить сообщения, считывать или устанавливать cookie и выполнять множество других действий.

Вся уникальность данного языка программирования заключается в том, что он поддерживается практически всеми браузерами и полностью интегрируется с ними, а все что можно сделать с его помощью – делается очень просто. Ни одна другая технология не вмещает в себе все эти преимущества вместе.

Material Design

Material Design – это концепция дизайна от компании Google, которая была прежде всего создана для собственной операционной системы Android. Став популярной, данная концепция стала трендом в дизайне вообще и в веб-дизайне в частности.

Данная концепция вобрала в себя много от концепции плоского дизайна (Flat), эволюционировала и стала применяться для интерфейсов, как для больших устройств и экранов, так и для мобильных устройств.

⇐ Предыдущая 123 4 5 6 7 8 9 10 Следующая ⇒

Поделиться с друзьями:

Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...

Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...

Кормораздатчик мобильный электрифицированный: схема и процесс работы устройства...

Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...