|
|
 |
|
|
|
|
|
|
|
Главная » CSS
Источник: www.webarchive.ru
Многие мучаются при создании сайта. Во многих случаях на сайте требуется применить нестандартный шрифт или иероглиф. Вы скачиваете красивый шрифт и начинаете верстать страницу, но не у всех пользователей есть такие шрифты. Некоторые не смущаются и просто создают графический файл, используя нужный им шрифт, но дополнительная графика не всегда подходит странице и у многих её и так хватает. Но есть один подходящий выход ! Этим выходом является использования технологии CSS (Cascading Style Sheets) или просто "Каскадных таблиц стилей". Обычно CSS заключается в сам, создаваемый файл, страничку, но можно создать файл CSS (.css) отдельно и соединить его путём прописки между тегом <head> таким образом:
<LINK href="scooter.css" rel=stylesheet type=text/css>
И нам с помошью CSS нужно автоматически закачать и установить файл шрифта True Type Font (.ttf), но у
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
1. Свойства шрифта - font.
font-family - определяет тип используемого шрифта.
Если данное значение не указано, то шрифт выбирается браузером клиента. У клиента может не оказаться нужного Вам шрифта, поэтому можно указывать несколько видов шрифтов в порядке их предпочтения, разделяя названия запятыми. Если ни одного из выбранных шрифтов в распоряжении браузера не окажется, то браузер проигнорирует инструкции и использует свой шрифт для отображения текста.
Свойство поддерживает механизм наследования.
font-size - размер букв.
Допустимые значения:
(xx-small, x-small, small, medium, large, x-large, x-large, xx-large)
(larger, smaller)
(относительные размеры - em, en, ex, px / абсолютные размеры - in, cm, mm, pt, pc)
(значения даны в процентах от родительского размера шрифта)
Если значение не указано, то по умолчанию используется значение medium.
Свой
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае,
Свойство text-align запоминает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами - отвечает за выравнивание текстового блока. Соответственно, оно применяется совместно с так называемыми блоковыми элементами, то есть элементами, поддерживающими отображение текстовых массивов: Р., Н1-Н6, TD, TR и некоторыми другими. Можно использовать одно из четырех значений данного свойства: left - выравнивание по левой границе экрана или ячейки таблицы, right - по правой границе, center - выравнивание по центру и justify - растягивание текста по все ширине экрана или табличной ячейки,
Пример:
Р {text-align: justify:}
Свойства text-decoration. Управляет н
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
Для того, чтобы подсветить ссылку при наведении на неё курсора мышки, необходимо задать такую таблицу стилей:
<style TYPE="text/css"> <!-- a:hover {color: red; mso-bidi-font-size:12pt} --> </style>
В этом случае все ссылки на странице при наведении на них курсора мышки будут подсвечиваться красным цветом и перезаписываться шрифтом размером в 12 pt.
Для того, чтобы с одной из ссылок этого не происходило, необходимо задать для неё принудительно шрифт с помощью тега <font> внутри ссылки, например:
<a href=#>Неподсвеченная ссылка
Для того, чтобы одна группа ссылок подсвечивалась одним цветом, другая другим, необходимо несколько иначе написать таблицу стилей:
<style> body a:Hover {color : red} .group1 {text-decoration: none; font-family: arial;
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Автор: Никита ВакоринИсточник: Umade.Ru
Все в гиперпространстве связанно между собой гиперссылками. Почти каждый переход с одной страницы на другую страницу подразумевает предварительный щелчок мышью по определенной ссылке. Как дать посетителю сайта знать о том, что он уже посещал страницу, на которую ведет определенная ссылка?
Известно достаточно много методов для того, чтобы дать пользователю знать о том, что он уже посещал конкретную страницу в интернете. Какой из этих методов самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? При ответе на этот вопрос не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере - всеми любимый ослик - Internet Explorer. Появившуюся седьмую версию этого браузера можно называть уже посолидней – осел. Но эта тема для отдельной статьи.
Итак, на
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
Глаза разбегаются при виде огромного списка возможностей CSS. Вот немного разобравшись в них я вывел шпоргалку:
@import:url(file) - импорт файла css
color: цвет - цвет текста
width, height - ширина, высота
margin-left: левый внешний отступ. Определяет расстояние от левой границы блока текста до левой границы внутреннего отступа("набивки", padding) охватывающего элемента
margin-right: правый внешний отступ. Определяет расстояние от правой границы блока текста до левой границы внутреннего отступа("набивки", padding) охватывающего элемента
margin-top: верхний внешний отступ. Определяет расстояние от верхней границы блока текста до верхней границы внутреннего отступа("набивки", padding) охватывающего элемента
margin-bottom: нижний внешний отступ. Определяет расстояние от нижний границы блока текста до нижней гр
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
Это описание внутренних отступов блока — то расстояние, которое будет между рамкой блока и содержимым. Почти так мы писали и в BODY, чтоб начать страницу от края экрана.
margin-bottom: 5px; margin-left: 5px;
margin-right: 5px; margin-top: 5px;
Это описание внешних отступов блока — все это сильно похоже на CELLPADDING и CELLSPACING в описании таблицы.
В чем вы будете задавать отступы — ваше личное дело. Можно применять проценты, можно пикселы, можно другие единицы, принятые в CSS.
Стенографическое описание
margin: 12px 12px 12px 12px; описывает верхний, правый, нижний, левый внешние отступы.
margin: 12px 12px 12px; описывает верхний, левый и правый, нижний отступы.
margin: 12px 12px; описывает верхний и нижний и правый и левый отступы.
margin: 12px
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
Начинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной статьи - научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть м
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Источник: www.webarchive.ru
Представьте себе такую ситуацию: вы сделали серьезный сайт. И вдруг через некоторое время понимаете: шрифт не тот, фон не тот, цвета не те и т.д. Все надо менять. Обремененный заботой о любимых посетителях, вы спешите исправить недоработки во всех 500 (к примеру) страницах вашего сайта. На это уходит целый день. В лучшем случае… Как этого избежать? Ответ прост - использовать каскадные таблицы стилей.
Прежде всего, хочу вас предупредить: если вы не знаете HTML, то из этой статьи ничего нового вы не узнаете. Просто потому, что не поймете. CSS придуманы специально для расширения возможностей HTML, поэтому прежде чем браться за каскадные таблицы, я советовал бы вам изучить язык маркировки гипертекстов (то бишь HTML). Тем более что много времени это не займет, а учебников по HTML вы сможете найти великое множество.
Но вернемся к нашим баранам :) .
Все, кто делал веб-страницы, т
...
Читать дальше »
|
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Автор статьи, Иван Сагалаев предупреждает, что данный материал предоставляет собой текущие заметки по теме, а не законченную работу. Ваши комментарии и дополнения к статье приветствуются в авторском блоге Маниакальный Веблог
Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Руководствуются, как часто бывает, тем, что это модно. А многие, в общем-то, и не спешат уходить от таблиц, не считая, что в них есть что-то плохое. Я собираюсь написать длинный цикл статей о веб-разработке новыми методами. Главная моя цель - структурировать на русском языке те знания, которых полно в разрозненном виде по всей сети.
В этой первой статье я постараюсь рассказать о самой сути современных стандартов разметки веб-страниц и о целях, которые преследов
...
Читать дальше »
|
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
|
|
|
|
|
