The OpenNET Project / Index page

[ новости/++ | форум | wiki | теги ]

Краткое описание CSS (Cascading Style Sheets) на примерах. (web http css)


<< Предыдущая ИНДЕКС Поиск в статьях src Установить закладку Перейти на закладку Следующая >>
Ключевые слова: web, http, css,  (найти похожие документы)
From: wtReu <wtreu@zmail.ru > Subject: Краткое описание CSS (Cascading Style Sheets) на примерах. CSS - Cascading Style Sheets Copyright (c) 1999 wtReu <wtreu@zmail.ru >. All rights reserved. ------------------------------ About Css Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ). Css - это язык содержащий набор свойств для определения внешнего вида документа. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы. Это гораздо проще использования обычного набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый текст. HTML EXAMPLE: <font color="red"><strong><u>Hello World</u></strong></font> А если подобный стиль нужно использовать несколько раз? Ничего если раз 5..а если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей ( Inline Style Sheets ) мало чем отличаются от HTML тегов. Глобальные ( Global Style Sheets ) определяют стиль элементов во всем документе. Связанные ( Linked Style Sheets ) могут быть использованы для нескольких документов и хранятся во внешем файле. Подробней об этом написано ниже. ------------------------------ Structure&Rules Селекторы (Selectors): Любой элемент HTML может иметь CSS селектор. Селектор определяет стиль элемента для которого он создан. EXAMPLE: H1 {color:red;size:20pt;} Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt , point). Классовые селекторы (Class Selectors): CLASS -- класс стилей в css. Для определения в css используется знак "." + имя. Все селекторы могут иметь разные классы. Это позволяет одинаковым элементам иметь различные стили. EXAMPLE: H1.blue {color:blue;size:20pt;} Все элементы H1 с атрибутом CLASS=blue стануть синими. Классы могут быть также описаны без превязывания их к определенным элементам. EXAMPLE: .green {color:green;} В данном случае все элементы с указанным отрибутом CLASS=green станут зелеными. ID селекторы (ID Selectors): ID -- индивидуально именованный стиль. C его помощью можно создавать cреди элементов одного класса стилистические исключения. Для определения в css используется знак "#" + имя. Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойст. Скажем Вы создали класс blue -- синий курсив. Но вам понадобился жирный подчеркнутый текст синим курсивом. Конечно можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жырным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и индификатора boldunderline. EXAMPLE: <html> <head> <title> Example </title> </head> <style> .blue {color:blue;font-style:italic} #boldunderline {text-decoration:underline;font-weight:bold} </style> <body> <p class="blue"> Hello! Welcome To My Homepage!</p> <p class="blue" id="boldunderline">Will Be Soon</p> <p id="boldunderline">Under Constraction</p> </body> </html> Как видно из примера ID может быть использован без указания класса (последний параграф примера). Тогда параграф будет обладать только свойствами ID ( в примере - жирный подчеркнутый текст ). Контекстуальные селекторы (Contextual Selectors): Контекстуальные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка. EXAMPLE: P EM {color:silver;} В данном примере все элементы EM внутри элементов P будут иметь заданный стиль. Придание нескольки элементам одинаковых свойств: Скажем Вам нужно придать нескольким элементам Вашей веб страници одинаковых свойств. В этом случае при определении элементы перечисляутся через запятую. h1,h2,h3,p,strong {color:green} Все элементы h1, h2, h3, p и strong будут серебристыми. Псевдоклассы: Псевдокласс состоит из элементов одного типа, отвечаюшему определенному критерию. Псевдоклассы при определении отделяются знаком ":" . Список псевдоклассов : Anchor Pseudo Classes -- Эти псевдоклассы элемента <a> обозначающего ссылки.Псевдоклассы этого элемента -- link( линк ), active( активная ссылка ), visited( посещенный ранее URL ), hover( при поднесении курсора, не работает в Нетскейпе ) First Line Pseudo-element -- first-line. Этот псевдо элемент может быть использован с block-level элементами ( p, h1 и т.д. ). Он изменяет стиль первой строки этих элементов First Letter Pseudo-element -- first-letter. То же самое что и first-line, только влияет не на всю строку, а только на первый символ Пример : a:link,a:visited {color:blue} a:active {color:red} a:hover {text-decoration:none} В данном примере все элементы Anchor (ссылки) будут синими, при нажатии ( в активном состоянии ) меняя цвет на красный, и при подведении курсора мышки исчезнет подчеркивание. ------------------------------ Inline Style Sheets Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу дакумента при помоши атрибута style в HTML таге. HTML EXAMPLE: <font color="blue" size="3" face="Arial">Hello World!</font> RESULT: Hello World! INLINE STYLE SHEET EXAMPLE: <font style="color:blue;font-size:12pt;font-family:Arial">Hello World</font> RESULT: Hello World! Как можно заметить код Inline Style Sheet Example получился больше чем HTML Example. По этому иногда разумнее использовать обычные HTML теги. ------------------------------ Chapter I >> What Is Css Global Style Sheets Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа. Пример: <html> <head> <title> Example Of Global Style Sheets </title> </head> <style> h1 {color:red;font-style:italic;font-size:35;} .blue {color:blue;} #bold {font-weight:bold;} </style> <body> <h1> Этот заголовок написан крупным красным курсивом </h1> Вот <font class="blue"> это </font> слово - синие, a <font id="bold">это</font> -- жирное!!! </body> </html> В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими , а а все элементы с индификатором ID со значении Bold станут жирными. ------------------------------ Linked Style Sheets Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл styles.css): <style> body {background:black;font-size:9pt;color:red;font-family:Arial Black} .base{color:blue;font-style:italic} h1 {color:white} #bold {font-weight:bold} </style> Как видите это очень похоже на Global Styles Sheets. Так оно и есть. Все что относилось к Глобальным стилям справедливо и здесь. В самих же документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так - <link REL="STYLESHEET" TYPE="text/css" HREF="путь до файла"> EXAMPLE: File [ styles.css ] <style> body {background:black;color:red;font-size:9pt} h1 {color:white} a:link,a:visited,a:active {color:green} a:hover {font-weight:bild} </style> File [ Index.html ] <html> <head> <title> Example &glt;/title> </head> <link rel="stylesheet" type="text/css" href="styles.css"> <body> [ Содержание Документа ] </body> </html> ------------------------------ Font Properties font-family Possible Values: Любой шрифт Applies to : All elements Описание: Это свойство определяет используемый элементом шрифт. Если указать УРЛ - то шрифт автоматически установится на компьютер пользователя EXAMPLE: font-family: Arial Black URL('arialblack.tff') font-style Possible Values: normal - без изменений italic - курсив Applies to : All elements Описание: Стиль элемента. Курсивный или обычный EXAMPLE: font-style:italic font-variant Possible Values: normal - без изменений smallcaps - заменяет все буквы на маленькие Applies to : All elements Описание: К сожалению не работает т.к. IE не отличает маленькие буквы от больших, а Netscape вообще не поддерживает это свойство. EXAMPLE: font-variant:smallcaps font-weight Possible Values: normal - без изменений bold - жирный bolder - очень жирный ( не отличается от bold ) lighter - тонкий ( не отличается от normal ) любое значение от 100 до 900 Applies to : All elements Описание: Выделение ( жирность ) элемента EXAMPLE: font-weight:bold font-size Possible Values: размер xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений smaller, larger - любое из этих значений Applies to : All elements Описание: Размер шрифта EXAMPLE: font-size:30pt font Possible Values: Applies to : All elements Описание: Обобщает все вышеперечисленные свойства EXAMPLE: font: italic bolder Arial 12pt ------------------------------ Text Properties letter-spacing Possible Values: длинна normal - без изменений Applies to : All elements Описание: Расстояние между буквами. Не работает в Нетскейпе EXAMPLE: letter-spacing:100 text-decoration Possible Values: none - нет underline - подчеркнутый overline - надчеркнутый line-through - перечеркнутый blink - мигающий ( не поддерживается в IE ) Applies to : All elements Описание: "Украшение" текста EXAMPLE: text-decoration:line-through word-spacing Possible Values: длинна normal - без изменений Applies to : All elements Описание: Расстояние между буквами. Не работает в Нетскейпе EXAMPLE: letter-spacing:100 vertical-align Possible Values: baseline sub super top-text top middle bottom bottom-text процент Applies to : Inline elements Описание: Позиционирование элементов по отношению к другим элементам стоящих в одном ряду. EXAMPLE:vertical-align:top-text text-transform Possible Values: none - нет Capitalize - каждое слово начинается с большой буквы UPPERCASE - каждая буква текста становится заглавной lowercase - каждая буква текста становится маленькой Applies to : Inline elements Описание: Изменение текста EXAMPLE: text-transform:Capitalize text-align Possible Values: left - текст слева right - текст справа center - текст по центру justify - текст "растянут" ( не работает в Нетскейпе ) Applies to : Block-level elements Описание: Положение текста EXAMPLE: text-align:right text-indent Possible Values: длинна процент Applies to : Block-level elements Описание: Отступ ( не работает в IE ) EXAMPLE: text-indent:30 em line-height Possible Values: normal - без изменений длинна процент Applies to : All elements Описание: Отступ сверху EXAMPLE: line-height:100% ------------------------------ Color and Background Properties color Possible Values: цвет Applies to : All elements Описание: Цвет EXAMPLE: color:#f00000 backgroung-color Possible Values: цвет Applies to : All elements Описание: Цвет фона элемента EXAMPLE: background-color:#f00000 background-image Possible Values: none - нет URL Applies to : All elements Описание: Фоновое изображение EXAMPLE: background-image:URL(cool.gif) background-repeat Possible Values: repeat - размножает фоновое изображение во всех направлениях repeat-x - размножает фоновое изображение вертикально repeat-y - размножает фоновое изображение горизонтально no-repeat - не повторяющиеся изображение Applies to : All elements Описание: Повторения фонового изображения EXAMPLE: background-repeat:no-repeat background-attachment Possible Values: scroll - фоновое изображение скроллится всесте с содержанием документа fixed - не скроллится. Фиксируется в одном месте Applies to : All elements Описание: Возможность прокрутки фонового изображения EXAMPLE: background-attachment:fixed background-position Possible Values: процент от длинны + процент от высоты top, middle, bottom - одно из значений left, center, right - одно из начений расстояние от левого края + расстояние от вершины Applies to : Block-level and replaced elements Описание: Положение фонового изображения ( работает с background-repeat если оно равно repeat-x или repeat-y ) EXAMPLE: background-position:50%0% background Possible Values: ^ Applies to : All elements Описание: Обобщает все вышеперечисленные свойства EXAMPLE: background:no-repeat black fixed 50%0% ------------------------------ Classification display Possible Values: none - не отображается block - разбивает линию ( = строку ) до и после элемента. inline - не разбивает линию ( = строку ). Т.е. элемент можен находится на одной линии с другими элементами. list-item - разбивает линию ( = строку ) до и после элемента + добавляет маркер как у list-item элементов Applies to : All elements Описание: Определяет как будет отображатся элемент. EXAMPLE: display:none white-space Possible Values: normal - "сжимает" несколько подряд идущих пробелов в один pre - допускает отображение несколькольких подряд идущих пробелов nowrap - не допускает перенос строки без тага <BR> Applies to : Block-level elements Описание: Оприделяет как будут отображатся пробелы между элементами EXAMPLE: white-space:nowrap list-style-type Possible Values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha none - никакой Applies to : Elements with display value list-item Описание: Определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено EXAMPLE: list-style-type:lower-alpha list-style-image Possible Values: none - нет URL Applies to : Elements with display value list-item Описание: Задает вид list-item маркера в виде картинки EXAMPLE: list-style-image:URL(cool.gif) list-style-position Possible Values: inside - при переносе следующие строки будут отображатся без отступа outside - по умолчанию Applies to : Elements with display value list-item Описание: Определяет положение маркера в зависимости от list item элемента EXAMPLE: list-style-position:inside ------------------------------ Box Properties margin-top Possible Values: длинна процент auto - автоматически Applies to : All elements Описание: Определяет отступ сверху EXAMPLE: margin-top:100 margin-right Possible Values: длинна процент auto - автоматически Applies to : All elements Описание: Определяет отступ справа EXAMPLE: margin-right:100% margin-bottom Possible Values: длинна процент auto - автоматически Applies to : All elements Описание: Определяет отступ снизу EXAMPLE: margin-bottom:100em margin-left Possible Values: длинна процент auto - автоматически Applies to : All elements Описание: Определяет отступ слева EXAMPLE: margin-left:100pt margin Possible Values: ^ Applies to : All elements Описание: Обобщает все вышеперечисленные свойства EXAMPLE: background:100pt padding-top Possible Values: длинна процент Applies to : All elements Описание: Отступ от верхнего border'а EXAMPLE: padding-top:100pt padding-right Possible Values: длинна процент Applies to : All elements Описание: Отступ от правого border'а EXAMPLE: padding-right:100% padding-bottom Possible Values: длинна процент Applies to : All elements Описание: Отступ от нижнего border'а EXAMPLE: padding-bottom:100em padding-left Possible Values: длинна процент Applies to : All elements Описание: Отступ от левого border'а EXAMPLE: padding-top:100 padding Possible Values: ^ Applies to : All elements Описание: Обобщает все вышеперечисленные свойства EXAMPLE: padding:100px border-top-width Possible Values: длинна thin, medium или thick Applies to : All elements Описание: толщина верхнего border'а EXAMPLE: border-top-width:100pt border-right-width Possible Values: длинна thin, medium или thick Applies to : All elements Описание: толщина правого border'а EXAMPLE: border-right-width:thick border-bottom-width Possible Values: длинна thin, medium или thick Applies to : All elements Описание: толщина нижнего border'а EXAMPLE: border-bottom-width:100em border-left-width Possible Values: длинна thin, medium или thick Applies to : All elements Описание: толщина левого border'а EXAMPLE: border-left-width:medium border-color Possible Values: color Описание: Цвет border'а Applies to : All elements EXAMPLE: border-color:green width Possible Values: длинна процент Applies to : Block-level and replased elements Описание: ширина элемента EXAMPLE: width:10% height Possible Values: длинна процент Applies to : Block-level and replaced elements Описание: высота элемента EXAMPLE: height:100pt float Possible Values: left - слева right - справа none - по умолчанию Applies to : All elements Описание: расположение элемента EXAMPLE: float:right clear Possible Values: left - слева right - справа both - c двух сторон none - по умолчанию Applies to : All elements Описание: расположение других элементов вокруг данного EXAMPLE: clear:both ------------------------------ Length Units Syntax : "+" или "-" затем [число] плюс [еденица измерения] ( без пропусков ) Example : -566pt Единицы длинны : em - ems , высота используемого элементом шрифта ex - x-height, ширина буквы "x" используемого элементом шрифта px - pixels, пикселы in - inches, дюймы cm - centimeters, сантиметры mm - millimeters, миллиметры pt - points, точка ( 1pt = 1/72in ) pc - picas ( 1pc = 12pt ) ------------------------------ Percentage Units Syntax : "+" или "-" затем [число] плюс "%" ( без пропусков ) Example : -566% ------------------------------ Color Units Syntax : [color] Example : magenta Значением цвета может быть его название ( red , lightgreen, coral и т.д. ) или RGB значение Способы выразить цвет в RGB ( red green blue ) : #rrggbb ( например, #00cc00 ) rgb(x,x,x) -- где "х" число от 0 до 255 ( например, rgb(0,204,0 ) ) #rgb ( например, #0c0 ) rgb (x%,x%,x%) -- где "х%" число от 0.0 до 100.0 ( например, 0%,80%,0%) Все примеры отображают один и тот же цвет ------------------------------ URLs Syntax : "URL" потом в скобках приводится ссылка.Ссылку также можно помимо скобок заключить в одинарные или двойные кавычки ( без пропусков ) Example : URL('cool.gif') Copyright (c) 1999 wtReu <wtreu@zmail.ru>. All rights reserved. Данная статья является моей интелектуальной собственностью и защищается законом РФ об авторском праве. Любое комерческое использование материалов данной статьи без письменного разрешения автора запрещено. При некомерческом использовании ссылка на автора обязательна. Disclaimer (отмазка) : Возможно наличие ошибок и опечаток в этой статье. Все мы люди и не застрахованы от неожиданностей. Если онные будут Вами замечены - сообщите мне и я их обязательно исправлю. Также можете присылать предложения и дополнения касательно этой статьи.

<< Предыдущая ИНДЕКС Поиск в статьях src Установить закладку Перейти на закладку Следующая >>

Обсуждение [ RSS ]
 
  • 1, Лохматый, 18:27, 07/02/2003 [ответить] [смотреть все]
  • +/
    Спасибо за классную статейку, если честно есть
    ошибки, но не в этом дело. Узнал много нового и интересного. Еще раз спасибо...
     
  • 2, tiHo, 21:36, 19/05/2007 [ответить] [смотреть все]
  • +/
    да, есть коешто интересное :)
     
  • 3, BlackCat, 16:44, 24/07/2007 [ответить] [смотреть все]
  • +/
    Super!Byli neskolko voprosov i vse otvety nashla zdes.Korotko i jasno,imenno etogo i iskala. ;)
     
  • 5, Paristo, 11:34, 19/05/2009 [ответить] [смотреть все]
  • +/
    На данный момент ничего более радующего мои глаза не видел. Коротко, емко, по-существу.
    Огромное человеческое спасибище
     

    Ваш комментарий
    Имя:         
    E-Mail:      
    Заголовок:
    Текст:





      Закладки на сайте
      Проследить за страницей
    Created 1996-2017 by Maxim Chirkov  
    ДобавитьРекламаВебмастеруГИД  
    Hosting by Ihor