 |
Форум вебмастеров на AlfaSpace.NET / Создание сайта / [CSS]То, что важно знать, и не стоит забывать. |
| Автор | Сообщение |
| Андрей Алексеевич  2106 |
# Дата: 17 Авг 2005 16:15 ° Поправил: Андрей Итак, «САБЖ» =) §1 как строиться CSS Итак, надеюсь, что вы знаете html, и долго объяснять как css работает с html я не буду... Вот что нужно знать: Css можно «Вставить» двумя способами, которые подрузамивают одно и тоже, через: <LINK href="имя файла.css" rel=stylesheet type=text/css> или в теге <style></style> Теперь передём к «конструкции» css. Если вы программист, то css вам будет напоминать класс, в котором нет методов, только свойства. Если вы новичок то вот вам краткое описание примера: a{ Название класса, в данном случае это «абсолютный» тег и открывающая скобка<a> font-color:black; Цвет текста (можно использовать как и #FFFFFF-вида, так и простого (white) вида. font-family: verdana, tahoma, arial, sans-serif; «Семья» шрифтов, первый - основной, если на машине посетителя нет первого, то шрифт будет второй. (verdana есть у всех) font-size:10px;Размер шрифта в пикселах (можно использовать pt напр. 10pt/8pt) } закрывающая скобка. т.е вид css класса - имя{ ... св-ва ... } §2 Основные св-ва. Тут я перечислю «Основные св-ва» и даже попытаюсь описать каждое из них. Цвета\фон background : #FFFFFF; Цвет фона background-attachment : scroll\fixed; Св-во прокрутки background-color : Aqua; Цвет фона background-image : none; Картинка фона background-position : pos; Позиция картинки фона background-repeat : no-repeat\repeat-x\repeat-y; Свойство повторения картинки color : #FFFFFF; Цвет текста Шрифт color : #FFFFFF; Цвет текста font-size : 10px; Размер текста font-style : italic\oblique; Стиль текста наклонный\заострённый font-variant : small-caps;Вариант текста - только строчные буквы font-weight : bold;Тип текста - жирный Боксы (таблицы, td,tr) border-direction:size style color direction - left,right,bottom,top ; size - px or pt; color 16bit or simple; clear : right; Убирание whiteSpace'ов (справа) float : left; «Плавающий» элемент (в этом примере элемент выравнивается по левой стороне) margin-direction:size Отступ «внешний» direction-left,right,top,bottom (слева,справа,сверху,снизу) size в пикселях (или в любом ;). padding-direction:size Отступ «внутрений» direction-left,right,top,bottom (слева,справа,сверху,снизу) size в пикселях (или в любом ;). Списки list-style-image : none; Пользовательская картинка (bullet) list-style-position : inside\outside; позиция bullet в списке (внутри\снаружи) list-style-type : disc\circle\square\decimal\none; «Стиль» bullet'а (если пользательская картинка стоит, то тут ставтье none, иначе opera будет показывать и картинку и кружок) Скролбары (только ie) scrollbar-3dlight-color: color; scrollbar-arrow-color : color; scrollbar-base-color : color; scrollbar-darkshadow-color : color; scrollbar-face-color : color; scrollbar-highlight-color : color; scrollbar-shadow-color : color; scrollbar-track-color : color; Абзацы текста text-align : left; Выравнивать текст по краю. text-decoration : underline\overline\overline; Декарирование текста подчёркнуто\надчёркнуто\перечёркнуто white-space : nowrap\pre; «Пустые» места - непереносить на другую строку\уже форматированый текст §3 значки «.» и «#» Коротко и ясно - .blah{ } Ссылается на любой тег <тег class="blah"> а #blah{ } Ссылается на любой тег <тег id="blah"> §4 Юзаем теги вместо «указаний» Многие люди на своих сайтах используют конструкции вида <font class="ohMyFuckenDog">blah</font>, но мы то с вами образованные - зачем юзать фонт - если есть так много «свободных» тегов, которые только и ждут, когда для них напишут стиль - вот краткий списочек для разметки текста: ABBR ACRONYM ADDRESS BIG BLOCKQUOTE - очень подходит для цитат, если переписать стиль CITE CODE DD DFN EM H1,H2,H3,H4,H5 KBD PRE SAMP SMALL STRONG TT VAR Ведь гораздо удобней написать <tt>blah</tt>. Остальное ждите, когда просплюсь +) |
| h00st RλDIOλCTIVE  2220 |
# Дата: 17 Авг 2005 16:52 Полезный топик %) |
| fIREz Участник 205 |
# Дата: 17 Авг 2005 21:29 вобще-то я по CSS уроки веду, но ладно ::) |
![[Valid RSS]](valid-rss.png "Validate my RSS feed")