Внедрения индивидуальных шрифтов.

До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:

@font-face {font-family: fontName; src: url(failMame.eot) }

значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:

   <style>    @font-face{ font-family: demoFont; src: url(http://myweb.ru/superFont.eot)}    H1 {font-family: demoFont, Arial, sans-serif;}    </style>    <h1> Текст отображается с использованием загружаемого шрифта </h1>

после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.

Свойства цвета и фона

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

      color  

Определяет цвет текста. Значение:

• любое соответствующее стандарту значение цвета.

• inherit - применяется значение родительского элемента.

   p{color:red}    p{color:rgb(255,0,0)}    p{color:#ff0000}

      background-color  

Определяет цвет фона. Значение:

• любое соответствующее стандарту значение цвета.

• transparent - фон элемента делается прозрачным (по умолчанию).

• inherit - применяется значение родительского элемента.

    body{background-color: black}

      background-image  

Определяет фоновое изображение элемента. Значение:

• none - фоновое изображение не устанавливается.

• любое соответствующее стандарту значение URL фонового изображение.

• inherit - применяется значение родительского элемента.

    h1{background-image: url(pictures.gif)}

      background-repeat  

Определяет направление, по которому экран будет заполняться копиями фонового изображения. Значение:

• repeat - фоновое изображение повторяется по горизонтали и по ветикали (по умалчанию).

• repeat-x - фоновое изображение повторяется только по горизонтали.

• repeat-y - фоновое изображение повторяется только по вертикали.

• no-repeat - фоновое изображение не повторяется.

• inherit - применяется значение родительского элемента.

   body {background-image: url(pictures.gif); background-repeat: repeat-x }

     background-attachment  

Определяет, будет ли фоновое изображение зафиксировано в окне браузера или будет прокручиваться вместе с документом. Значение:

• scroll - фоновое изображение прокручивается вместе с документом (по умолчанию)

• fixed - фоновое изображение фиксируется в окне браузера.

• inherit - применяется значение родительского элемента.

   body{background-image: url(pictures.gif); background-attachment: fixed;}

      background-position  

Определяет положение изображения относительно верхнего левого угла содержащего его элемента. Одиночное значение устанавливает расстояние по горизонтали и вертикали. Смещение по умолчанию равно 50%. Возможно сочетание нескольких ключевых слов. Значение:

• Первое стандартное значение длины - расстояние по горизонтали от левого края элемента до изображения. Допускаются и отрицательные значения.

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

• Первое, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображение от левого края по горизонтали к длине содержащего его элемента. Значение по умолчанию 0%, что равносильно верхнему левому углу.

• Второе, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображения от левого края по вертикали к высоте содержащего его элемента.

• top - размещение фонового изображение по верхнему краю

• center - размещение фонового изображение по центру содержащего его элемента.

• bottom - размещение фонового изображения по нижнему краю.

• left - размещение фонового изображение по левому краю.

• light - размещение фонового изображение по правому краю.

• inherit - применяется значение родительского элемента.

   body {background-image : url(pictures.gif); background-position : center;}

      background  

Удобное свойство для установки сразу всех параметров фона. Если какие либо параметры будут пропущены, то берутся их значения по умолчанию. Значение:

• background-color - значение цвета фона.

• background-image - значение фонового изображения.

• background-repeat - значение повторения фонового изображения.

• background-attachment - значение фиксации фонового изображения.

• background-position - значение положения фонового изображения.

• inherit - применяется значение родительского элемента.

   body{background:black url(graf/bomba.jpg) center no-repeat;}

      opacity  

Свойство opacity устанавливает уровень прозрачности. Данное свойство является нововведением в CSS3 и на сегодняшний день поддерживается только браузерои Firefox (с приставкой –moz-) и Opera 9. Значение:

• число от 0-1 – уровень прозрачности элемента.

• inherit - применяется значение родительского элемента.

Для браузера Firefox

   div{-moz-opacity:0.5;}

Для браузера Opera 9

   div{opacity:0.5;}