Читайте также:
|
<div class=“h”>Текст</div>
Это наиболее распространенный способ.
Псевдоклассы и псевдоэлементы применяются для форматирования на основании информации, не включенной в состав документа.
Динамические псевдоклассы: hover,: active предназначены для форматирования элементов в момент, когда пользователь указывает на элемент (:hover) или выбирает его (:active).
16. Определение стилей – id селекторы
Атрибут ID задает HTML элементу уникальный в пределах документа идентификатор, который может быть использован в различных целях, в частности, для задания стиля этому элементу. Значение атрибута ID отделяется от имени HTML-элемента символом #. Символ * вместо конкретного имени HTML-элемента сопоставляет правило стиля любому элементу, у которого значение атрибута ID равно указанному. Как уже отмечалось в предыдущем разделе, символ * можно опускать, т.е. следующие определения равносильны:
*#comment {color:red}
#comment {color:red}
Например, пусть описаны (скажем, во внешнем файле) следующие правила стиля:
h1#special {color:green}
#comment {color:red}
Первое правило (зеленый цвет символов) будет сопоставлено элементу h1, у которого значение атрибута id равно special.
Второе правило (красный цвет символов) будет сопоставлено любому элементу, у которого значение атрибута id равно comment.
В отличие от элементов, которым сопоставлен определенный класс CSS (см. Селекторы класса) и которых в документе может быть много (скажем, терминов, цитат, сносок, комментариев и т.д.), элемент с заданным id должен быть уникален в пределах документа. Смысл такого подхода становится ясным, когда мы представим себе некий шаблон документа, в котором крупные структурные блоки снабжены уникальными идентификаторами. Естественные практически для любого сайта блоки такого типа легко представить: шапка, основная навигация, дополнительная навигация, зона контента, подвал и т.д. И в каждом из этих блоков могут быть заголовки, гиперссылки, абзацы... И они обязаны выглядеть по-разному.
Сославшись на id, каждому структурному блоку мы можем задать общие параметры его отображения. А используя селекторы потомков - конкретизировать, как же в этом блоке должен выглядеть тот или иной его элемент: заголовок, гиперссылка, список и т.д.
17 определение стилей - Тэги.
Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.
Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком sign ">".
Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/".
Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.
Н, как говорится, из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />.
HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.
Стиль можно определить для
1.тега (селектора)
2.класса
3.идентификатора
В этом случае форматирование будет применено к содержимому, находящемуся внутри всех тегов, для которых определен стиль (если для них не указан класс или идентификатор)
Пример
P {font-size: 12pt; color: #0000aa;}
18 CSS Наследование и специфичность
Наследование – это механизм, с помощью которого некоторые значения свойств передаются от элемента к его потомкам. Определяя, какие значения должны быть применены к элементу, агент пользователя должен учитывать не только наследование, но и специфичность объявлений, а также их происхождение.
Пример
h1 {color: red;}
body h1 {color: green;}
Для каждого правила агент пользователя вычисляет специфичность селектора и прикрепляет ее к каждому объявлению правила. Если элемент имеет несколько конфликтующих объявлений свойства, выигрывает то, которое имеет наибольшую специфичность.
Наследование является фундаментальной концепцией CSS.
Наследование определений строится в зависимости от родительских элементов (если для дочерних не задано своих определений)
Пример
P {color: red}
…
<p>Пример <span> текста </span></p>
Отображение: весь фрагмент красным, т.к. Span не имеет своего определения.
Большинство свойств блочной модели, в том числе отступы, выравнивание, фон и рамки, не наследуются.
Унаследованные значения вообще не
имеют специфичности, даже нулевой.
19. HTML фреймворки. Twitter Bootstrap. HTML Boilerplate
CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы).
Преимущества
· Позволяет не искушенному в тонкостях вёрстки программисту или дизайнеру правильно создать HTML-макет.
· Вёрстка на базе слоёв, а не таблиц.
· Более быстрая разработка.
· Кроссбраузерность.
· Возможность использования генераторов кода и визуальных редакторов.
· Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.
Недостатки
· Библиотеки бывают сильно «раздуты» — может быть много лишнего кода, который не будет использоваться в проекте.
· Дизайн будет зависеть от css-библиотеки.
Boilerplate является шаблоном для быстрого старта при разработке fron-end’а, который содержит в себе наилучшие готовые образцы, взятые из практики веб-разработки. Данный шаблон предлагает готовую общую структуру папок и файлов будущего проекта, готовый HTML5-шаблон и основные конфигурации для взаимодействия с сервером. На первый взгляд Boilerplate может показаться достаточно простым шаблоном. Но на самом деле он готов предоставить вам множество преимуществ, которые не заметны изначально. Давайте рассмотрим некоторые из них:
· Готовый HTML5-шаблон совместно с базовой структурой файлов и папок под будущий проект;
· Готовые к использованию, оптимизированные стили печати;
· Кросс-браузерная совместимость;
· Оптимизация под мобильные браузеры;
· Прогрессивное улучшение (progressive enhancement) и постепенная деградация (graceful degradation);
· Улучшенная конфигурация взаимодействия с сервером;
· Правила для сжатия и оптимального кеширования;
· Оптимизированный под Google Analytics сниппет сайта;
· и многое другое …
Bootstrap является фреймворком для front-end разработки и набором инструментов веб-дизайнера для создания современных web-сайтов. С помощью фреймворка Bootstrap вы можете создать полностью функциональный web-сайт с нуля. То есть, он предоставляет вам не только стартовую точку, но и все строительные материалы, которые могут потребоваться при создании сайта. Скачиваемый архив Bootstrap содержит в себе только файлы для CSS и JS компонентов, плюс набор шрифтовых иконок. В дополнение к этому, вы можете скачать основной шаблон для начала создания сайта. Структуры файлов и папок для будущего проекта или конфигураций для взаимодействия с серверной частью сайта – не существует.
Преимущества и основные характеристики:
· Ориентированность в первую очередь на мобильные устройства;
· Кросс-браузерная совместимость;
· Легкость использования;
· Система CSS-сетки;
· Готовые к использованию компоненты и утилиты;
· и многое другое …
Список компонентов и утилит фреймворка Bootstrap представлен ниже:
· Grid – утилита для создания разметки дизайна сайта;
· Icons – набор иконок, отсортированных по размерам;
· CSS classes – набор основных классов стилей для разработки сайта;
· CSS components – стилизованные HTML-компоненты;
· JS widgets – замечательный набор интерактивных компонентов на Javascript;
· Шаблоны и примеры для начала работы.
20. Макет страницы
В макете страницы CSS для организации содержимого на веб-странице вместо традиционных таблиц и фреймов используется формат каскадных таблиц стилей. Основным строительным блоком макета CSS является тег Div — тег HTML, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. При создании макета CSS теги Div размещаются на странице, в них добавляется содержимое, и они позиционируются в различных местах. В отличие от ячеек таблицы, которые существуют только внутри строк и столбцов таблицы, теги Div можно поместить в любое место веб-страницы. Можно выполнять позиционирование тегов div абсолютно (указывая координаты X и Y) или относительно (указывая его размещение относительно его текущего положения). Расположить теги div также можно, указав отступы, заполнения и поля, что по современным стандартам является предпочтительным методом.
Создание макетов CSS из набросков может быть затруднительным, т.к. способов сделать это существует достаточно много. Простой макет CSS, состоящий из двух столбцов, можно создать, различным образом устанавливая поля, заполнения и другие свойства CSS и используя почти бесконечное количество их комбинаций. Кроме того, проблема отображения в различных браузерах заставляет определенные макеты CSS правильно отображаться в некоторых браузерах и неправильно в других.
Основным строительным блоком макета CSS является тег Div — тег HTML, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. Следующий пример демонстрирует страницу HTML, содержащую три отдельных тега div: один большой тег-контейнер и два других тега — тег боковой панели и тег основного содержимого внутри тега-контейнера.
21. Основные принципы PHP
PHP (рекурсивный акроним словосочетания "PHP: Hypertext Preprocessor") - это широко используемый язык программирования общего назначения с открытым исходным кодом.
Разработка PHP началась в 1994 году, первая версия появилась в 1995, сейчас используются в основном версии 4 и 5.
Достоинство PHP – мультиплатформенность, гибкость, простота использования.
Для добавления кода PHP используются теги <?php и?> (допускается использовать <? и?>).
Каждое предложение завершается;
Пример
<?php
Дата добавления: 2015-02-16; просмотров: 130 | Поможем написать вашу работу | Нарушение авторских прав |