И хотя данный подраздел относится к рубрике программирование, в ней я собираю материалы не только по WEB программированию, как то например, по JavaScript, а по всему, что относится к технологиям применяемым при построении WEB приложений.
В эту рубрику попали такие технологии как каскадные таблицы стилей CSS, язык гипертекстовой разметки HTML, язык программирования JavaScript, а также библиотеки и технологии WEB разработки.
Этот раздел появился потому, что даже для создания простой страницы в Интернете все равно необходимы некие навыки в этой области, а кроме того очень часто даже создавая серверное приложение так или иначе необходимо взаимодействовать с клиентской частью, а довольно часто и содержать некоторые ее фрагменты. Более того например один из способов написание графических приложений для языка Java это применение JavaFX, которая вобрала в себя очень много элементов из мира WEB технологий, например описание внешнего вида элементов стилями очень похожими на CSS.
То, что раньше можно было сделать в окне браузера только с помощью JavaScript — плавное перемещение и масштабирование блоков, повороты и наклоны — теперь с лёгкостью реализуется на чистом CSS.
Для начала давайте разберёмся с системой координат, в которой перемещается объект: её ключевой особенностью является то, что ось Y направлена вниз, а не вверх, так как веб-страница начинается с левого верхнего угла и идет вниз, а в CSS используется обратная система координат.
SVG — это формат векторной графики. В отличие от растровой графики — PNG, GIF, JPEG — SVG может растягиваться и сжиматься без потери качества, то есть такие картинки будут одинаково чёткими и на обычных экранах, и на ретине. Ещё одно из достоинств SVG — человекопонятный код: его можно не только прочитать, но и написать руками. Также SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript, а кроме того, SVG поддерживается всеми современными браузерами.
SVG-элемент вставляется с помощью тега svg, внутри которого уже находится остальное содержимое: фигуры, картинки или текст.
Пример отображает зеленый круг и прямоугольник:
|
1 2 3 4 5 6 7 8 |
<svg width="200" height="200"> <circle r="50" cx="50%" cy="50%" fill="yellowgreen"/> <rect width="150" height="100"/> <ellipse rx="30" ry="40%" cx="50%" cy="50%"/> <line x1="220" y1="20" x2="20" y2="90" stroke="violet" stroke-width="5" /> <polyline points="10,135 100,10 55,135 10,10 105,135" stroke="violet" stroke-width="5" fill="yellowgreen"/> <polygon points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"/> </svg> |
В SVG есть несколько способов нарисовать фигуру, для простых фигур есть свои теги: прямоугольник rect (Атрибуты width и height управляют, соответственно, шириной и высотой фигуры. Значения можно задавать и в пикселях, и в процентах. Чтобы задать координаты прямоугольника, используются атрибуты x и y. Скруглением углов прямоугольника управляют параметры rx и ry. Атрибут rx задаёт скругление по горизонтали, а ry — по вертикали. Если атрибут ry не задан, он будет равен rx.). Окружность рисуется с помощью тега circle ( В отличие от предыдущих фигур, положение окружности в пространстве определяется координатами центра фигуры: атрибут cx задаёт положение по горизонтальной оси, cy — по вертикальной. По умолчанию координаты центра окружности равны 0,0, поэтому она находится в верхнем левом углу. ). Эллипс ellipse рисуется почти так же, как круг (но у него два радиуса: по горизонтальной оси — rx, и по вертикальной — ry); Линии рисуются с помощью тега line. Координаты начала линии задаются атрибутами x1 и y1, координаты конца — атрибутами x2 и y2 (Координаты можно задавать в процентах Так как линия не образует фигуру с внутренним контуром, для отображения ей нужно задать не заливку, а обводку. Обводкой управляют два атрибута: stroke и stroke-width. Атрибут stroke задаёт цвет обводки, stroke-width — толщину линии). Ломаные линии рисуются с помощью тега polyline (Координаты точек на линии задаются в атрибуте points, как для polygon. Разница между polygon и polyline заключается в поведении обводки: у многоугольника обводка замыкается сама по себе, а у ломаной линии — остаётся незамкнутой).
Для значений в пикселях после значения не нужно писать px, потому что пиксели — единица измерения, используемая в SVG по умолчанию. Проценты рассчитываются относительно размеров всего SVG-изображения: горизонтальные значения относительно ширины, вертикальные — относительно высоты. В современных браузерах размерами и положением фигур нельзя управлять через CSS, но эта возможность появится в будущем.
Обратите внимание: все теги в SVG должны быть закрыты, например, <rect/> или <rect></rect>.
В SVG можно рисовать не только четырёхугольники, но и многоугольники, это делается с помощью тега polygon. В атрибуте points задаются координаты вершин фигуры. Каждая координата задаётся по x и y. Координаты в points нельзя задавать в процентах. Пример звезды: <polygon points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"/> .
При оформлении текста с помощью css чаще всего используют тег span. Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста. Однако, дополнительный смысл данному тегу добавляют с помощью классов.
Cвойство font-size задает размер шрифта. Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы M в данном шрифте. Другие единицы измерения для задания размеров шрифта: Пиксели: 20px Пункты: 15pt Проценты: 80%.
Полужирность текста можно задавать с помощью свойства font-weight, которое имеет два основных значения: normal — обычное начертание; bold — полужирное начертание. На самом деле это свойство имеет много значений: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. Эти значения задают степень толщины шрифта, от самого тонкого, до самого толстого. Но большинство браузеров всё равно умеют отображать только два варианта толщины: обычный и полужирный. Поэтому и остальные значения свойства обычно не используют.
Меню — это список ссылок на страницы, поэтому и размечают его наиболее часто с помощью списков.
В качестве контейнера будем использовать список, добавим ему свой CSS-класс. Каждый браузер по умолчанию отображает списки с внутреними и внешними отступами, а также добавляет маркеры к пунктам списка. Для правильного отображения меню нужно обнулить все отступы у списка, а также убрать маркеры. Маркерами списков управляет свойство list-style. Маркеры исчезнут, если ему задать значение none. Обычно контейнер меню выделяют рамками или фоном. Чтобы пункты меню не прилипали к границам контейнера, добавляют внутренние отступы. В зависимости от дизайна сайта также добавляют внешние отступы и задают ширину. Простейший способ оформить пункты меню — добавить между ними отступы и задать стили ссылок. Хорошим тоном считается задавать стили ссылок для всех состояний: по умолчанию, посещенная, при наведении и щелчке. Но для этого дизайнер должен продумать и отрисовать все состояния ссылок.
Каждый HTML-документ должен начинаться с декларации до версии 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
и с декларации для более поздних версий:
<!DOCTYPE html>
Для правильного указания броузеру в какой кодировке документ используется тег meta внутри тега head: <meta charset="имя кодировки"> Самым правильным будет использования utf-8, но что используется windows-1251. Этот тег используется корректно только в том, случае если сервер не выдает кодировку документа, то этот мета тег поможет броузеру понять кодировку документа. Но важно помнить, что если сервер выдает в ответе на запрос страницы имя кодовой страницы, но значение с сервера все равно переопределит значение в этом теге.
CSS-свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование».
Элементы HTML страницы обычно делятся на блочные и строчные.
К блочным элементам относятся такие теги как: p, h1, h2, ul, div – (просто «блок» или «прямоугольный контейнер») и так далее.
К строчным элементам относятся такие теги как: a, strong, em, span и так далее.
Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.
Стоит отметить, что любой документ HTML представляет из себя дерево элементов расположенных в строгой иерархии, причем у каждого элемента может быть только один родитель и любой число потомков. Кроме того здесь стоит заметить, что при применение селектором разбор дерева идет снизу вверх, то есть сначала ищутся все элементы соответствующие самому правому правилу в селекторе, а затем от них отсеиваются все кроме тех, что соответствуют правилу которое находиться левее, и так далее.
CSS код состоит из блоков описание стилей, в котором есть правило отбора тегов – селектор и описание стиля в виде пар имен свойств и их значений. То есть селектор это правило по которому из всех тегов которые есть на страницы выберутся те, которые соответствуют указанному правилу и к ним применяться стиль, который задан набором свойств внутри селектора. Свойство может быть одно или из может быть много. Вполне нормальной есть ситуация когда селектор ничего не выберет.
Пускай есть некоторое меню
|
1 2 3 4 5 6 7 8 9 |
<div id="menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Joolma</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">HTML5&CSS3</a></li> <li><a href="#">PHP</a></li> </ul> </div> |
Которое мы хотим зафиксировать при прокрутке.