Новые сообщения на форуме · Пользователи · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Форум » Ucoz и все что с ним связано » Сss, Html - Примеры изменения кода » Стили сайта - "Просто о сложном"
Стили сайта - "Просто о сложном"
ElectromasterДата: Понедельник, 23.08.2010, 23:06 | Сообщение # 1
Сообщений: 270
Статус: Offline
1) Фон (background)

  • background-color - цвет фона
    background-color: #FFOOOO;
    background-color: red;
    background-color: rgb(0,0,0);

  • background-image - фоновое изображение
    background-image: url(/images/logo.jpg);

  • background-repeat - повтор фонового изображения
    background-repeat: repeat; // повтор по обеим осям
    background-repeat: repeat-x; // повтор только по оси x
    background-repeat: repeat-y; // повтор только по оси y
    background-repeat: no-repeat; // запрещает повтор
    Значение по умолчанию - repeat

  • background-position - позицию фонового изображения относительно блока
    background-position: top left; // вверху слева
    background-position: top center; // вверху по центру
    background-position: top right; // вверху справа
    background-position: left center; // по центру слева
    background-position: center center; // по центру блока
    background-position: right center; // по центру справа
    background-position: left bottom; // внизу слева
    background-position: center bottom; // внизу по центру
    background-position: right bottom; // внизу справа

  • background-attachment - поркручивать фоновое изображение вместе со страницей/блоком, или нет.
    background-attachment: fixed; // фон не прокручивается
    background-attachment: scroll; // фон прокручивается
    Значение по умолчанию - scroll

    2)Цвет (color)

  • color - определяет непосредственно сам цвет.
    #000000 - black #808080 - gray #FFFFFF - white #FF0000 - red #FF00FF - fuchsia #800080 - purple
    #008000 - green #00FF00 - lime #000080 - navy #0000FF - blue #FFFF00 - yellow #808000 - olive
    #00FFFF - aqua

    3)Прозрачность (opacity)

  • opacity - значения указываются числами от 0.0 до 1.0 (по умолчанию 1)
    opacity: 0.5; // прозрачность элемента ровно на половину

    4)Текст (text)

  • text-align - определяет выравнивание текста по горизонтали.
    text-align: left; // Выравнивание по левому краю
    text-align: right; // Выравнивание по правому краю
    text-align: center; // Выравнивание по центру
    text-align: justify; // Выравнивание по всей ширине блока
    Значение по умолчанию - left

  • vertical-align - определяет выравнивание текста по вертикали.
    vertical-align: middle; // Выравнивание по центру высоты
    vertical-align: bottom; // Выравнивание по нижней части контейнера
    vertical-align: top; // Выравнивание по верхней части контейнера
    Значение по умолчанию - top

  • letter-spacing - определяет межбуквенное расстояние.
    letter-spacing: 3px; // Межбуквенное расстояние 3 пикселя

  • line-height - определяет высоту строки.
    line-height: 16px; // Высота строки 16 пикселей
    line-height: 70%; // Высота строки 70% от размера шрифта
    line-height: 1.5; // Высота строки ровно полтора размера шрифта
    line-height: normal; // Высота строки стандартная
    Значение по умолчанию - normal

  • text-decoration - Определяет подчеркивание, перечеркивание, линию над текстом и мигание.
    text-decoration: blink; // Мигающий текст
    text-decoration: line-through; // Перечеркнутый текст
    text-decoration: underline; // Подчеркнутый текст
    text-decoration: overline; // Линия над текстом
    text-decoration: none; // Отменяет все вышеописанные свойства
    Значение по умолчанию - none

  • text-indent - определяет отступ первой строки в абзаце.
    text-indent: 25px; // Отступ первой строки 25 пикселей

  • text-transform - позволяет совершать различные манипуляции с регистром.
    text-transform: capitalize; // Каждое слово начинается с заглавной буквы
    text-transform: lowercase; // Все символы будут строчными
    text-transform: uppercase; // Все символы будут прописными
    text-transform: none; // Ничего не изменяет
    Значение по умолчанию - none

  • white-space - способы отображения переносов строк и пробелов в самом коде.
    white-space: nowrap; // Текст выводится в одну строку, игнорируя переносы
    white-space: pre; // Текст выводится точно так же, как и написан в коде
    white-space: normal; // Текст выводится как обычно по умолчанию
    Значение по умолчанию - normal

  • word-spacing - определяет расстояние между словами.
    Можно указывать любыми величинами имеющимися в CSS.
    word-spacing: 10px; // Расстояние между словами 10 пикселей
    word-spacing: normal; // Расстояние между словами стандартное
    Значение по умолчанию - normal

    5) Шрифт (font)

  • font-family - определяет тип шрифта.
    font-family: Verdana, Arial, Helvetica, sans-serif;

  • font-size - определяет размер шрифта.Устанавливается любыми величинами имеющимися в CSS.
    font-size: 12px; // Размер шрифта 12 пикселей

  • font-style - определяет стиль шрифта.
    font-style: normal; // Обычный
    font-style: oblique; // Наклонный шрифт
    font-style: italic; // Курсивный шрифт
    Значение по умолчанию - normal

  • font-weight - определяет жирность шрифта. Устанавливается целыми числами от 100 до 900 (шаг 100), или стандартными словами.
    font-weight: bold; // Жирный
    font-weight: bolder; // Полужирный
    font-weight: lighter; // Светлый
    font-weight: normal; // Обычный
    Значение по умолчанию - normal

  • font-variant - может сделать заглавные буквы размером в строчные.
    font-variant: small-caps; // Заглавные буквы размером в строчные

    6)Рамки (border)

  • border-width - определяет ширину рамки. Значения устанавливаются в пикселях.
    border-width: 3px; // Ширина рамки 3 пикселя

  • border-width: 1px 2px 3px 4px;- в данном случае ширина сторон будет такая:
    Верхняя - 1 пиксель, Правая - 2 пикселя, Нижняя - 3 пикселя, Левая - 4 пикселя.

  • border-style - определяет стиль рамки.
    border-style: solid; // Сплошная рамка
    border-style: double; // Двойная сплошная линия
    border-style: groove; // Выдавленная рамка
    border-style: ridge; // Поднятая рамка
    border-style: inset; // Выдавленная область внутри рамки
    border-style: outset; // Поднятая область внутри рамки
    border-style: dotted; // Рамка в виде мелкого пунктира
    border-style: dashed; // Рамка в виде крупного пунктира

  • border-color - определяет цвет рамки.
    border-color: #FFOOOO; // Один цвет для всей рамки
    border-color: #FFOOOO #EE55AA #OOOOOO #FFFFFF; // для каждой рамки определенный цвет

    7)Форматирование

  • width - определяет ширину элемента. Значение указывается всеми величинами
    width: 200px; // Ширина элемента 200 пикселей
    Значение по умолчанию - auto

  • height - определяет высоту элемента. Значение указывается всеми величинами
    height: 100px; // Высота элемента 100 пикселей
    Значение по умолчанию - auto

  • max-width - определяет максимальную ширину элемента. Значение указывается всеми величинами
    max-width: 300px; // Максимальная ширина элемента 300 пикселей

  • max-height - определяет максимальную высоту элемента. Значение указывается всеми величинами
    max-height: 150px; // Максимальная высота элемента 150 пикселей

  • clear - запрещает обтекание элемента другими с указанной стороны.
    clear: both; // Запрещает обтекание слева и справа от элемента
    clear: left; // Запрещает обтекание слева от элемента
    clear: none; // Разрешает обтекание
    Значение по умолчанию - none

  • display - определяет нужный вариант отображения элемента в странице.
    display: block; // Элемент отображается как блочный
    display: inline; // Элемент отображается на одной линии с предыдущим
    display: list-item; // Элемент отображается как блочный список
    display: none; // Элемент невиден, но продолжает занимать место

  • float - определяет по какой стороне выравнивать элемент относительно подительского контейнера.
    float: left; // Выравнивание по левой стороне
    float: right; // Выравнивание по правой стороне
    float: none; // Выравнивание не указывается
    Значение по умолчанию - none

  • overflow - определяет что делать, если содержание элемента выходит за его границы.
    overflow: visible; // Элемент виден даже за пределами границ
    overflow: hidden; // Выступающие части будут обрезаны
    overflow: scroll; // Выступающие части будут видны с помощью прокрутки
    overflow: auto; // Полосы прокрутки добавляются только при необходимости.
    Значение по умолчанию - auto

  • visibility - определяет видимость элемента.
    visibility: visible; // Элемент видим
    visibility: hidden; // Элемент невидим
    Значение по умолчанию - visible

    8)Позиционирование

  • position - устанавливает откуда брать точки отсчета при позиционировании.
    position: absolute; // Отсчет берется относительно всей страницы
    position: relative; // Отсчет берется относительно родительского контейнера
    position: fixed; // Элемент не меняет своего положения даже при прокрутке
    position: static; // Элемент отображается как и расположен в коде
    Значение по умолчанию - static

  • top - определяет место расположения элемента от верхней границы контейнера. Значения указываются всеми измерениями
    top: 20px; // Элемент располагается на расстоянии 20 пикселей от верха

  • left - определяет место расположения элемента от левой границы контейнера.
    left: 30px; // Элемент располагается на расстоянии 30 пикселей слева

  • right - определяет место расположения элемента от правой границы контейнера.
    right: 40px; // Элемент располагается на расстоянии 40 пикселей справа

  • bottom - определяет место расположения элемента от нижней границы контейнера.
    bottom: 50px; // Элемент располагается на расстоянии 50 пикселей от низа

  • z-index - при перекрывании элемента другими определяет какой из них будет находится выше.
    Значения указываются целыми числами. Например элемент со значением 5 перекрывает элемент со значением 4 и меньше.
    z-index: 10; // Элемент перекрывает другие, у которых значение 9 и меньше
    z-index: auto; // Элементы перекрываются относительно расположения в коде
    Значение по умолчанию - auto

    9) Списки (list-style)

  • list-style-image - указывает адрес изображения, которое будет использоваться вместо маркера.
    list-style-image: url(images/list.gif);

  • list-style-type - определяет вид маркера.
    list-style-type: disc; // Закрашеный кружок
    list-style-type: circle; // Незакрашеный кружок
    list-style-type: square; // Закрашеный квадрат
    Значение по умолчанию - disc

  • list-style-position - определяет позицию маркера.
    list-style-position: inside; // Маркер находится внутри списка
    list-style-position: outside; // Маркер находится за границей списка

    10) Отступы (margin)

  • margin - определяет величину отступов. Значения задаются любыми способами измерения принятыми в CSS.
    margin: 10px; // Отступ от всех сторон элемента 10 пикселей
    margin: 5px 10px 15px 20px; // верхний правый нижний левый
    margin-left: 10px; // Отступ задан только для левой стороны

    11) Поля (padding)

  • padding - определяет величину полей. Значения задаются любыми способами измерения принятыми в CSS.
    padding: 10px; // Поле со всех сторон элемента 10 пикселей
    padding: 5px 10px 15px 20px; // верхний правый нижний левый
    padding-left: 10px; // Поле задано только для левой стороны

    12)Таблицы (table)

  • border-collapse - определяет способ отображения рамок вокруг ячеек таблицы.
    border-collapse: collapse; // Между ячеек отображается только одна линия
    border-collapse: separate; // Вокруг ячеек отображается собственная рамка

  • border-spacing - определяет расстояние между ячейками.
    border-spacing: 10px; // Расстояние между ячеек 10 пикселей
    border-spacing: 10px 20px; // По вертикали 10, по горизонтали -20 пикселей

  • caption-side - определяет на какой стороне будет находится заголовок таблицы.
    caption-side: top; // Заголовок вверху таблицы
    caption-side: left; // Заголовок по с левой стороны таблицы
    caption-side: right; // Заголовок по с правой стороны таблицы
    caption-side: bottom; // Заголовок внизу таблицы

    13)Ставим в начало <li> свои картинки

    <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    </ul>

    Эти самые кружки меняются очень просто: в ваш файл с CSS пишем следующее:

    ul.menu {list-style: none;margin: 0;padding-left: 0px;}

    Определим для нашего списка класс:

    <ul class="menu">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    </ul>

    Этим мы пока лишь только убрали этот черный кружек и убрали отступ от левого края (margin и padding).
    Для того, чтобы появилась наша картинка, пишем в CSS

    li.pu {margin: 0;padding: 3px 3px 3px 25px;background: url('*.png') left no-repeat center;}

    В значении padding ключевым является последнее число, т.к. оно отвечает за отступ слова (Главная, Внутренняя) от нашей иконки. left и no-repeat отвечает за прижатие иконки к левой стороне и запрещает повторятся иконке во всех плоскостях.

    Для наших тегов li припишим класс:

    <ul class="menu">
    <li class="pu">Пункт 1</li>
    <li class="pu">Пункт 2</li>
    </ul>

    14) Делаем высоту 100%, прибиваем подвал к низу страницы.
    html, body {margin: 0;padding: 0;height: 100%}

    15)Отличия атрибутов ID и CLASS

    Id – уникальный определитель объекта.
    #test {font: 12px Arial;}

    Class – определитель стиля объекта, или группы объектов на странице.
    <div class=”test”>Содержание блока</div>
    .test {font: 12px Arial;}

    Id имеет больший вес, а значит стили под этим атрибутом – значительнее.
    <div id=”test” class=”test2”>Содержание блока</div>

    #test { font-size: 12px; }
    .test2 { font-size: 14px; }

    Текст в блоке получится размером 12 пикселей, а не 14, как того требует class.

    2. Возможность проставления якорных ссылок.
    Использования атрибута id позволяет поставить якорную ссылку на объект страницы.

    <div id="test">Содержание блока</div>

    Ссылка на содержания блока будет иметь следующий вид:
    http://site.ru/cat/#test

    Якорные ссылки чаще всего используются в длинных документах для мгновенного перемещения.

    3. Дополнительные функции id.
    Для атрибута id существует функция .getElementById().

    4. Запись множественных атрибутов.
    Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:

    <div class=”test test2”>Содержание блока</div>

    При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:

    .test.test2 { font-size: 14px; }

    Для id – будет так:

    #test, #test2 { font-size: 14px; }

    Вот и все основные отличия атрибута id от class.

  •  
    Форум » Ucoz и все что с ним связано » Сss, Html - Примеры изменения кода » Стили сайта - "Просто о сложном"
    • Страница 1 из 1
    • 1
    Поиск: