Компьютерные языки разметки Доц каф. Исит жиляк Надежда Александровна
жүктеу/скачать 1,01 Mb.
|
Компьютерные языки разметкиДоц. каф. ИСиТ Жиляк Надежда Александровна311-1ОИТ ЭКЗАМЕН HTML, CSS, JS, XML, HTML-5 Основы CSS http://code.mu/books Введение в CSS. Синтаксис CSS. Способы внедрения CSS. Работа с тегами через CSS. Селекторы атрибутов. Основные свойства стилей. Вложенность и наследование в CSS. Приоритеты стилей. Псевдоклассы и псевдоэлементы. HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS . Этот язык отвечает за внешний вид HTML-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств. Введение в CSS. CSS - Cascading Style Sheets Каскадные таблицы стилей. Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а HTML — за содержание и логическую структуру документа. Содержимое страницы почти не связано с дизайном её внешнего вида. Изменив всего одну строку в css-стилях, дизайнер сайта может радикально изменить оформление многих тысяч страниц сайта, сделав все заголовки, скажем, зелёными, переместив блок новостей в угол или изменив фон страниц. Таблицы CSS предлагают логический способ оформления документа. Т.е. в любом правильно составленном тексте можно отделить такие понятия, как заголовки, параграфы, термины, ссылки друг от друга. К тому же CSS охватывает и такие области, как оформление изображений, таблиц и прочих визуальных элементов. Главные преимущества CSS: 1.Более чистый код
2.Модульный код 3.Точность контроля (позиционирование, размер, поля и др.). 4.Разделение труда 5.Лучшая доступность Синтаксис CSS. Стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид: Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения. Примеры правил CSS: Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило. Три основных вида селекторов:
HTML селекторы. Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Селекторы класса. «Класс» - это некое имя, строка, которое мы можем применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса: ID селекторы (или идентификаторы) Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа: CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить. Так, существует две разновидности оформления селекторов и их правил: расширенная и компактная. Расширенная форма записи: Компактная форма записи: Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже. В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту. Как применить один стиль к нескольким селекторам. Это делается просто– достаточно перечислить селекторы через запятую: Комментарии. Комментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают. Содержимое комментариев, браузеры игнорируют. Примеры: Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
Применение внешних стилей (в виде отдельного текстового .css-файла) с помощью элемента link Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций. Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link. Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более. Пример: Создадим текстовый файл со следующим содержанием, сохраним как file.css (сохраняется в папке, в которой находится файл .html, но не с .html расширением, а с .css). Пример(продолжение): Сам html документ: Внедрение стилей непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style. Внутреннее подключение. Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль). CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style: Атрибут со значениями type="text/css" внутри тега жүктеу/скачать 1,01 Mb. Достарыңызбен бөлісу:
|