PhotoSektor - Скачать все для программы photoshop

Правила подачи

Photoshoper — Fri, 07 Nov 2025 12:57:11 GMT

Форум: Услуги/Резюме
Описание темы: *icon-0*
Автор темы: Photoshoper
Автор последнего сообщения: ttaletdbno
Количество ответов: 1

Сокращения в CSS: пишите код компактнее

Photoshoper — Fri, 10 Jan 2025 05:55:04 GMT

Краткость - сестра таланта . Это выражение смело можно применять и к CSS . Ведь уменьшая размер CSS - файла, мы увеличиваем скорость загрузки страниц, делаем работу с кодом более удобной и снижаем количество времени на разработку. Да и вообще, если есть возможность сделать что-то быстрее и компактнее, почему бы ей не воспользоваться!

Начнем с мелочей:

Сокращения шестнадцатеричных кодов цвета

Как Вы знаете, каждому цвету соответствует определенный 16-ричный код. Оказывается, если все 6 знаков данного кода одинаковы, то его можно сократить до 3-х знаков. Например:

Code

Белый → #FFFFFF → #FFF
Черный →#000000→ #000

Думаю суть понятна...

Ноль - он и в Африке ноль

Неважно, в каких единицах будет НОЛЬ! От этого его значение не изменится.

Например, вместо margin:0px; - лучше написать margin:0;

Аналогично и с другими стилевыми правилами.

Если описание класса(или id) включает менее 2-х свойств, то рациональнее записать его в одну строку

Например, вместо этого:

Code

.test {
color:#333
}

Лучше написать так:

Code

.test {color:#333}

По возможности группируйте стили

Если какие либо элементы имеют одинаковые свойства, не обязательно писать стиль для каждого из них. Можно просто объединить их с помощью запятой.

Например вместо этого:

Code

.test {color:#333}
.test1 {color:#333}

лучше написать так:

Code

.test,.test1 {color:#333}

В конце последнего свойства, можно не ставить точку с запятой

Code

.test {
  color:#333;
  text-decoration:underline
  }

Обратите внимание, что после свойства text-decoration:underline нет точки с запятой.

В CSS существуют ряд свойств, имеющих как полные, так и сокращенные формы записи. Давайте кратенько по ним пройдемся:

Сокращенное свойство BACKGROUND

То что записано в обычной форме

Code

BODY {
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right
}

Можно записать одной строчкой:

Code

BODY {background: #ffee8c url(smile.png) no-repeat fixed top right }

После ключевого слова background , перечисляем через пробел значения свойств. Последовательность особого значения не имеет. Если чего-то не указать, автоматически подставится значение по умолчанию.

Сокращенное свойство BORDER

То , что записано в обычной форме

Code

h1 {
  border-width:30px;
  border-style:solid;
  border-color:#333;
  }

Можно записать одной строчкой

Code

h1 {border:30px solid #333}

В данном сокращении, важно строго соблюдать порядок свойств.

border-width затем через пробел border-style затем border-color .

Аналогичным образом действуют сокращения и для border-bottom, border-left, border-top, border-right.

Например:

Code

h1 {border-left:30px solid #333}

Если какое либо свойство не указано, устанавливается значение по умолчанию.

Сокращенное свойство FONT

Полная форма

Code

p {
  font-style: italic;
  font-variant: normal ;
  font-weight: bold;
  font-size: 30px;
  font-family: arial, sans-serif
  }

Сокращенная форма

Code

p { font:italic normal bold 30px arial,sans-serif}

Как видите, после ключевого слова font , через пробел перечисляются значения свойств в таком порядке:

font-style_ font-variant _font-weight_font-size_font-family

Если какое либо свойство не указать, установится значение по умолчанию.

Сокращенное свойство LIST-STYLE

Полная форма:

Code

ul {
  list-style-type:square;
  list-style-position: inside;
  list-style-image: url(galka.gif)
  }

Сокращенная форма:

Code

ul {list-style:square inside url(galka.gif) }

Опять же, значения свойств перечисляются через пробел. В данном случае порядок роли не играет.

Сокращения для свойств, имеющих значения право, лево, верх, низ

У таких свойств как margin, padding и border имеются уточнения, типа справа(right), слева(left), сверху(top), снизу(bottom)...

Например:

Code

border-left:10px;

означает рамка слева толщиной в 10 пикселей.

Либо

Code

margin-bottom:20px;

означает отступ снизу 20 пикселей.

Так вот, если имеются четыре значения для всех сторон, например:

Code

border-top:10px;
  border-right:15px;
  border-bottom:10px;
  border-left:15px

то сократить эту запись можно используя перечисление значений свойств через пробел ПО ЧАСОВОЙ СТРЕЛКЕ.

Code

border:10px 15px 10px 15px;

Если значения право/лево , либо верх/низ совпадают, то можно еще больше сократить запись:

Code

border:10px 15px;

В данном случае, первое значение, это величина верх/низ, а второе - лево/право.

Если , все значения совпадают, то можно еще более укоротить запись.

Например:

Code

border:10px;

означает рамку со всех сторон, толщиной 10 пикселей

Как центрировать вебсайт с помощью CSS

Photoshoper — Wed, 16 Nov 2011 12:55:10 GMT

Центрирование вебсайта является основной многих CSS схем расположения. Существует множество разных способов и техник осуществления этого, однако в нашем уроке я расскажу Вам про методику использующую только CSS. Вам не надо будет бороться с процентами и Ваш сайт будет работать во всех современных браузерах.

Для начала необходимо будет сбросить установленные по умолчанию браузерами расстояния. У каждого браузера есть встроенные таблицы стилей, которые загружаются автоматически и являются основой для любых других таблиц стилей. У Firefox, например, по умолчанию значение margin для тега body равняется 8-ми пикселям. Ниже представлен самый простой способ обнулить все необходимые для нашего примера значения.

Хочу заметить, что существуют более продвинутые варианты сброса, но для нашего урока будет достаточно и этого.

Code

*{     margin:0;
          padding:0;
    }

Я буду использовать для нашего урока слой с идентификатором “wrapper”. Вы можете задать любую ширину (но помните о расширении мониторов Ваших посетителей). Я решил сделать ширину 960 пикселей, что подходит для разрешений выше средних (1024х768). Снизу Вы можете увидеть структуру страницы:

Для начала мы назначим слою #wrapper стиль, который будет центрировать его в браузере. Это сделано используя параметр margin. Не забудьте указать ширину слоя #wrapper или же элемент не будет центрирован. Трудно центрировать то, что занимает 100% ширины. Для удобства тестирования Вам необходимо также назначить другой цвет фона и высоту к слою #wrapper. Это поможет Вам увидеть результат.

Code

#wrapper{
      width:960px;
      margin:0 auto;
          }

С Internet Explorer не все так просто. Для правильного результата нам необходимо добавить еще следующий стиль (необходимо выровнять текст по центру, для того чтобы слой выровнялся по центру в Internet Explorer):

Code

body{
text-align:center; /*For IE6 Shenanigans*/
}

Тег body включает в себя wrapper, и поэтому выравнивание текста передается и на него. Обычно необходимо, чтоб текст был слева, поэтому нам необходимо добавить это условие в стиль #wrapper:

Code

#wrapper{
      width:960px;
      margin:0 auto;
      text-align:left;
         }

Все - мы закончили! Этот маленький блок CSS поможет Вам центрировать любой сайт, только подстройте ширину под себя. Весь код выглядит так:

Code

*{
      margin:0;
      padding:0;
      }
   body{
          text-align:center; /*For IE6 Shenanigans*/
       }

       #wrapper{
          width:960px;
          margin:0 auto;
          text-align:left;
       }

Метатэг Refresh - обновление страницы и перенаправление

Photoshoper — Wed, 21 Sep 2011 14:35:41 GMT

Если у Вас возникла ситуация, когда страницу сайта нужно периодически обновлять или просто перенаправить посетителя на другую страницу через определенный промежуток времени, то решением здесь может послужить использование специального метатэга "Refresh".

Вот пример для простой перезагрузки страницы, через определенный интервал времени:

Code

где 10 - интервал обновления страницы в секундах.

Вот пример для перевода посетителя на другую страницу (сайт), через определенное время:

Code

где после URL указывается страница (сайт), куда нужно перенаправить посетителя.

Этот прием может пригодиться Вам при использовании формы обратной связи. Когда человек заполнил форму, нажал кнопку "отправить" и его перебрасывает на обработчик, здесь можно поблагодарить человека и поставить метатэг "Refresh" для автоматического перенаправления человека на главную страницу сайта.

Аккуратный HTML

Photoshoper — Mon, 05 Sep 2011 08:12:44 GMT

Любая работа должна быть выполнена аккуратно и красиво. Особенно если ее могут увидеть много людей. А это напрямую касается разработки сайтов, и в частности некоторых технологий, используемых при этом — HTML и CSS.

Просматривая страницы в Интернете, мы, как правило, не смотрим в код HTML. Да и зачем это нужно обычному пользователю? Но часто бывает важно взглянуть на код, чтобы составить некоторое впечатление о создателях этого веб-сайта. Код HTML, это как зеркало умений, возможностей и желаний разработчика сайта.

Заглянув туда можно с легкостью узнать о том, как сделана страничка — «программой-клепалкой» или человеком, его умом и знаниями. Чтобы вам легче было понять мою мысль, я проведу отличную параллель. Возьмите музыку. Есть композиции, написанные одним человеком за компьютером, с помощью несложной программки. На всех инструментах он «играет» сам. Ему не нужен ударник с чувством ритма, ему не нужен гитарист с виртуозной техникой, басист тоже ни к чему, и клавишник лишний... Он нажимает кнопку, и программа сама все играет. И получается наводнившая радио и клубы бессмысленная «туцкатня». Искусство и творчества нет. Так и в написании кода. Программа ведь глупая — засоряет все комментариями, ненужными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Oper'у и NN он даже не знает, которые предъявляют особые требования к оформлению кода страницы.

Создание эффективного и аккуратного кода HTML — это своеобразное, но искусство, где надо думать. Особенно это почувствуется, когда будете создавать сайт не для себя, а для кого-то. Причем встречаются сайты с очень сложной структурой, где труд верстальщика занимает половину времени работы над всем сайтом. Вложенные по нескольку раз таблицы, нестандартное позиционирование и оформление теста... Без личного опыта написания HTML именно ручками здесь никак не обойтись. Тем более одну и ту же задачу можно решить разными путями, среди которых нужно выбрать самый оптимальный.

Чтобы ваш код страницы выглядел достойно, аккуратно и «неискусственно», вам было легко в нем ориентироваться, то внимательно изучите ниже перечисленные пункты и придерживайтесь их при написании HTML:

Старайтесь не писать тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в Интернете все-таки написано строчными буквами (table, body, img).
Атрибуты всегда записывайте в кавычки (напр., align="right"), что придаст вашему коду аккуратность и совместимость с языком XML.
Присваивая какое-либо значение (ширины, высоты) в пикселях, не забывайте это указать, т.е. width="5px".
Есть тэги, для которых необязательно ставить тэг закрывающий. Но я рекомендую все-таки ставить их в любом случае. Во-первых, так легче ориентироваться в коде, а во-вторых, для полной совместимости со всеми браузерами и их версиями (смотрели свой сайт под Netscape 1.0?).
Старайтесь не оставлять стили в страничке. Выводите их в отдельный файл — так проще что-либо поменять и код страницы уменьшится (иногда очень заметно).
У каждого символа есть своя так называемая подстановка. Например, для тире это — (—), а для кавычек « («) и » (»). В любом справочнике по HTML вы найдете список таких символов и их подстановок. Всегда используйте их, иначе могут возникнуть проблемы с их корректным отображением.

Напоследок скажу, что «программами-клепалками» лучше не пользоваться, потому что они замусоривают код и в конце концов это отупляет. Используйте многофункциональные блокноты, где вы пишите все сами, но этот процесс ускоряется за счет дополнительных возможностей.

Часто при разработке сайта много времени уделяется на визуальный дизайн — ведь его видят посетители. А то, что скрыто (код HTML), то можно сделать и по-быстрому. Из-за такого отношения в нашем Рунете множество сайтов с замечательным внешним дизайном имеют отвратительный код, сделанный на скорую руку в «клепалке». Не повторяйте ошибок таких сайтостроителей, верстайте аккуратно и красиво, выделяйте структуру кода, и всегда помните, что язык HTML — основа сайта.

Позиционирование объектов и определение их размеров в CSS

Photoshoper — Mon, 05 Sep 2011 08:07:59 GMT

До этого момента, работая над размещением элементов Web-страницы по всему пространству окна броузера, мы часто пользовались таблицами. Новые возможности для задания размеров объекта и его положения относительно других элементов Web-страницы предоставляют стилевые таблицы.

Свойства для задания размеров объекта:
width – ширина элемента. Значение атрибута вводится цифрами в абсолютных единицах или в процентах;
height – высота элемента. Способ задания значений – аналогично ширине элемента.

Размещение (позиционирование) объектов на странице происходит на основе определения точки, на которую приходится левый верхний угол позиционируемого элемента. Используемая система координат имеет начало (точка 0,0) в левом верхнем углу документа, а оси Х и У простираются соответственно вправо и вниз.

Можно выделить три способа позиционирования: абсолютное (задается относительно начала системы координат), относительное (относительно элемента-родителя) и статическое (распределение элементов производится броузером так, как это в нем задано по умолчанию). На практике нет необходимости в задании статического размещения объектов, поскольку этот способ выбирается автоматически при отсутствии других указаний.

Свойства позиционирования:
position – атрибут, определяющий способ позиционирования. Допустимые значения: absolute (абсолютное позиционирование), relative (относительное позиционирование), static (статическое позиционирование);
left – смещение элемента вправо от его текущей позиции на web-странице. Текущая позиция – это та, которую элемент занял бы без использования позиционирования. Значение атрибута выражается в единицах длины; это может быть и отрицательная величина;
top – смещение элемента вниз от его текущей позиции на Web-странице. Значение атрибута выражается в единицах длины; это может быть и отрицательная величина;
z-index – этим атрибутом задается очередность наложения элементов (номер слоя). В случае абсолютного и относительного позиционирования есть большая вероятность того, что располагаемые на Web-странице элементы наложатся друг на друга.

Задавая числовое значение атрибута z-index, указывают броузеру, в какой очередности он должен располагать слои элементов. Так контролируется третье измерение документа. Если порядок наложения элементов несуществен, можно в поле значения атрибута указать ключевое слово auto.

Поля в CSS

Photoshoper — Mon, 05 Sep 2011 08:03:05 GMT

На уровне языка HTML содержимое каждой табличной ячейки отстоит от ее стенок на расстоянии, определенном параметром padding. Это внутренние поля.

Подобное форматирование элементов документа доступно и на уровне CSS. Здесь можно задавать как внешние поля отдельных элементов, так и внутренние поля – между границами блока, внутри которого отображается данный элемент и его содержимым. Вводя значения атрибутов полей, можно применять числовые единицы длины или процентные значения.

Свойства, задающие размеры полей:
margin-top – верхние поля: расстояние от начала документа или между предыдущим элементом и текущим элементом;
margin-bottom – нижние поля: расстояние от конца документа или между последующим элементом и текущим элементом;
margin-left – левые поля;
margin-right – правые поля;
margin – концентрированная декларация размеров полей.

Примеры:
P {margin: 10px}

Все поля будут иметь размер 10 пикселей.
P {margin: 1cm 2cm}

Верхние и нижние поля будут иметь размер 1 см, правые и левые – 2 см.
P {margin: 1cm 2cm 3cm 4cm}

Последовательные значения определяют размеры полей: верхних, правых, нижних и левых.
padding-top – внутренние верхние поля;
padding-bottom – внутренние нижние поля;
padding-left – внутренние левые поля;
padding-right – внутренние правые поля;
padding – концентрированная декларация внутренних полей, окружающих данный элемент. Здесь действуют те же правила, что и для внешних полей.

Как изменить маркер списка в HTML?

Photoshoper — Sun, 28 Aug 2011 08:21:12 GMT

Примеры, использования разных видов маркеров для списков в языке HTML.

В этой статье мы с вами рассмотрим примеры установки трех видов маркеров для списков средствами языка HTML.

Пример #1. Вид маркера – disc.

Параметром type тега

type

disc (

)

вид кружочка

Code

   Маркер

Список

Сентябрь

Октябрь

Ноябрь

Декабрь

Пример #2. Вид маркера-circle.

type html

circle

вид кольца

Code

   Маркер

Список

Сентябрь

Октябрь

Ноябрь

Декабрь

Пример #3. Вид маркера-square.

вид квадратика

type html

Code

   Маркер

Список

Сентябрь

Октябрь

Ноябрь

Декабрь

Название цвета на английском

Photoshoper — Sat, 16 Jul 2011 07:41:50 GMT

Форум: Вёрстка
Описание темы: *icon-10*
Автор темы: Photoshoper
Автор последнего сообщения: Photoshoper
Количество ответов: 0