Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Руководствуются, как часто бывает, тем, что это модно. А многие, в общем-то, и не спешат уходить от таблиц, не считая, что в них есть что-то плохое. Я собираюсь написать длинный цикл статей о веб-разработке новыми методами. Главная моя цель - структурировать на русском языке те знания, которых полно в разрозненном виде по всей сети.
В этой первой статье я постараюсь рассказать о самой сути современных стандартов разметки веб-страниц и о целях, которые преследовались при их написании. То есть, эта статья о том, “что это” и “зачем это”, а не “как это”.
В CSS единиц измерения гораздо больше, чем в языке HTML, что обеспечивает большую гибкость при создании интерфейса.
Для начала определимся с форматом значения длинны. Он состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного идентификатора размерности - двухбуквенная аббревиатура. Идентификатор размерности после числа 0 не обязателен. Для некоторых свойства можно использовать отрицательные единицы длины, но так делать нежелательно.
Единицы измерения можно условно разделить на следующие группы:
Первый и самый простой способ – задать стиль непосредственно в самом теге. Для этого используется атрибут style со списком свойств и их значений:
<p style=”color:#005500; margin-left:30px; font-style:italic”> Зелёный текст ... </p>
Этот стиль будет действовать только на содержание данного тега. Такое включение стилей используется очень редко, т.к. для изменения дизайна придётся редактировать содержимое страницы.
Ещё один способ задания стилей – использование тега <style>. Эти стилевые правила будут действовать на весь документ. Тег <st
... Читать дальше »
Semantic web. Заметка о логичной и нелогичной верстке
В прошлых материалах мы рассматривали - планирование веб-сайта, анализ целей и задач, разработка информационной архитектуры веб-проекта, базовые навигационные элементы и т.д. А сейчас - тема для веб-разработчиков, дизайнеров, верстальщиков, всех, кто создает веб-страницы, веб-сайты - для себя, для пользователей, для заказчиков ли, для поисковых машин... Небольшая заметка о логичной и нелогичной верстке.
Факт: у человека есть два полушария головного мозга. Исследования ученых: левое полушарие отвечает за логику и аналоговые сигналы (знаки), правое – за образы.... Читать дальше »
При верстке сайта с помощью CSS вы обязательно наткнетесь на множество проблем. И всякий раз вы будете биться головой об стену в попытках обойти очередной глюк. Данный документ призван облегчить вам процесс разработки, и служит кратким справочником, к которому вы можете обращаться всякий раз, когда столкнетесь с непреодолимым препятствием.
Все в гиперпространстве связанно между собой гиперссылками. Почти каждый переход с одной страницы на другую страницу подразумевает предварительный щелчок мышью по определенной ссылке. Как дать посетителю сайта знать о том, что он уже посещал страницу, на которую ведет определенная ссылка?
Известно достаточно много методов для того, чтобы дать пользователю знать о том, что он уже посещал конкретную страницу в интернете. Какой из этих методов самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? При ответе на этот вопрос не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере - всеми любимый ослик - Internet Explorer. Появившуюся седьмую версию этого
... Читать дальше »
HTML представляет возможность задавать различные таблицы стилей для различных устройств (например для, графических дисплеев, телевизионных экранов, принтеров, мобильных устройств и т.д.). Для этого существует атрибут media.
Пример:
<style> <style type="text/css" media="projection"> LI { color: blue } </style>
<style type="text/css" media="print"> LI { text-align: center } </style> </head>
На проекторе элементы списков будут отображаться зелёным цветом, а при печати – синим.
Особенно удобно при работе с различными устрой
... Читать дальше »
Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов “id” и “class”. Ведь эффект, вроде бы, одинаковый.
Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.
Суть
id
уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать id="title".
class
вольный признак, который дается обычно нескольким элементам, чтобы отличать их от других. Например, картинкам, которые просто сопровождают те
... Читать дальше »
Очевидным недостатком HTML является отсутствие возможности однозначно и просто позиционировать блок там, где хочется. Например, я хочу, чтобы блок был смещен на 250 пикселей от верхнего края, и на 45 от левого. Конечно, в HTML можно реализовать такое положение блока с помощью таблиц и распорок, но хочется простоты. В CSS такая возможность обеспечивается свойством position, самое популярное значение у которого absolute. Для задания смещения существуют свойства top и left. Мое желание с помощью каскадных таблиц стилей реализуется вот так:
Плавающая модель в теории вещь крайне простая и понятная. В CSS существует возможность создавать блоки, которые будут не следовать друг за другом, как в нормальном потоке, а прилипать к краю контейнера, выстраиваясь в колонки.
При плавающей модели блок вырывается из нормального потока и смещается максимально вверх и влево (или вправо). Получается, что если, скажем, создать три блока, суммарная ширина которых не превышает 100%, то получится три колонки.
Для объявления блока плавающим имеется свойство float, которое может принимать значения left и right. Как вы догадываетесь, значения определяют сторону, к которой блоки будут прилипать. Сразу небольшой пример для наглядности. Создадим три блока с
... Читать дальше »
Копирование материалов разрешено,