Стили (CSS) в  веб-дизайне при создание сайта

           главная страница сайта              Главная                                     обмен ссылками с тематическими сайтами                 Обмен ссылками                                        гостевая книга             Гостевая                                     обратная связь для отправки почты на e-mail              Обратная связь             |

Webmaster-Soft.ru - программы, скрипты для вебмастера            Меню

 

Книги для веб-мастера, книги програмирования  Программы
Электронные книги  Книги
Журналы для вебмастеров   Журналы вебмастеру
  Скрипты
Статьи
Учебник HTML  Учебник HTML
Базы каталогов для раскрутки сайта  Базы каталогов
Шаблоны, картинки, смайлы, иконки  Архив программ
   Интернет магазин
  Каталог статей
  Доска обьявлений
 

 

 

 

 

Работа в сети интернет
Лучшие системы в сети
для заработка

 

 
 

 


 

 

 

В помощь Web-Дизайнеру

Стили (CSS)  при создание сайта

  Статьи
  Учебник по Веб-Дизайну
 


Стили (CSS).


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

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

    Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :

     

    Описываем стили под именем Example :
    <STYLE><!--
    .Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
    --></STYLE>

    Здесь вызываем описания стилей :
    <div class="Example"> Пример </div>

    Если Вы распологаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:

    <LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

    Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги <STYLE></STYLE>. Например:

     

    У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
    <!--
       A { text-decoration: none; }
       A:hover { color: #FF0000; text-decoration: underline; }
    -->

     
    Ссылка на него в HTML документе будет выглядить так:
    <LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

    Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.

    <H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>

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

     

    Свойства шрифта:
    font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
    Пример:
    P {font-family: Verdana, sans-serif;}
    font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный)
    Пример:
    B {font-weight: bolder;}
    font-size Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
    Примеры использования для тегов H1, H2, H3:
    H1 {font-size: 200%;}
    H2 {font-size: 150px;}
    H3 {font-size: 400pt;}

    Свойства текста:

    text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста
    Пример использования для тега Н4:
    H4 {text-decoration: underline;} (подчеркивание)
    H4 {text-decoration: line-through;} (зачеркивание)
    text-align Определяет выравнивание элемента.
    Пример:
    P {text-align: left} (выравнивание по левому краю)
    P {text-align: right} (выравнивание по правому краю)
    P {text-align: justify} (выравнивание по ширине)
    P {text-align: center} (выравнивание по центру)
    text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
    Пример использования для тега H1:
    H1 {text-indent: 60pt;}
    line-height Управляет интервалами между строками текста.
    Пример:
    P {line-height: 50 %}

    Цвет элемента и фона:

    color Определяет цвет элемента I {color: yellow;}
    Пример использования для тега H3:
    H3 {color: #0000FF;}
    background-color Устанавливает цвет фона для элемента.
    Пример использования для тега H3:

    <H3 style=”background-color:gold; color:brown;”> Пример </H3>
     

    Пример

    Свойства границ:
    margin-left (слево)
    margin-right (справо)
    margin-top (сверху)
    margin-bottom (снизу)
    Устанавливают значения отступов вокруг элемента.
    Пример использования для рисунка:
    IMG { margin-left: 20pt}
    IMG { margin-right: 20pt}
    IMG { margin-top: 20pt}
    IMG { margin-bottom: 20pt}
    Единицы измерения:
    px Пиксели
    cm Сантиметры
    mm Миллиметры
    pt или % проценты
     






 

Страницы < 1 2 3 4 5 6 7>
 

 

<<<В  начало>>>

 


 


 

Ramblers.ru

Rambler's Top100

 

    

  

 
  
  

 

Inet-Bazar.ru
 Интернет магазин цифрового товара.

--==--

 

  

 

Copyright © 2006 Oleg Velikanov