-Поиск по дневнику

Поиск сообщений в Сергей_Прико

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.11.2009
Записей:
Комментариев:
Написано: 22

Записи с меткой css каскадная таблица стилей

(и еще 2 записям на сайте сопоставлена такая метка)

Другие метки пользователя ↓

css css каскадная таблица стилей css каскадная таблица стилей css каскадная таблица стилей таблица стилей javascript каскадная таблица стилей таблица стилей
Комментарии (0)

Урок 11

Дневник

Понедельник, 14 Декабря 2009 г. 12:12 + в цитатник
Рамки

Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.
border-width
border-color
border-style
Примеры определения рамок
border
Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:


Цвет рамки [border-color]



Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .
Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.


Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для

,

,
    и

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

    h1 {
    border-width: thick;
    border-style: dotted;
    border-color: gold;
    }

    h2 {
    border-width: 20px;
    border-style: outset;
    border-color: red;
    }

    p {
    border-width: 1px;
    border-style: dashed;
    border-color: blue;
    }

    ul {
    border-width: thin;
    border-style: solid;
    border-color: orange;
    }


    Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

    h1 {
    border-top-width: thick;
    border-top-style: solid;
    border-top-color: red;

    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-color: blue;

    border-right-width: thick;
    border-right-style: solid;
    border-right-color: green;

    border-left-width: thick;
    border-left-style: solid;
    border-left-color: orange;
    }

    Сокращённая запись [border]

    Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

    p {
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    }


    можно объединить в:

    p {
    border: 1px solid blue;
    }

    Резюме

Рубрики:  PHP , CSS, JAVASCRIPT

Метки:  
Комментарии (0)

Урок 9

Дневник

Понедельник, 14 Декабря 2009 г. 12:06 + в цитатник
Боксовая модель

Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена боксовая модель:
Боксовая модель в CSS




Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из Всеобщей Декларации Прав Человека):

Article 1:



All human beings are born free
и equal in dignity и rights.
They are endowed with reason и conscience
и should act towards one another in a
spirit of brotherhood




Добавив цвет и информацию шрифта этот пример можно представить так:



В этом примере - два элемента :

и

. Боксовая модель этих элементов выглядит так:



Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом. Боксом, который можно настроить с помощью CSS.

Рубрики:  PHP , CSS, JAVASCRIPT

Метки:  

 Страницы: [1]