Css [Cascading Style Sheets / Таблицы Каскадных Стилей] - это язык содержащий набор свойств для определения внешнего
вида документа. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы.
Это гораздо проще использования обычного набора HTML тегов. Пример: Вам нужно создать жирный серый подчеркнутый текст:
(<font color="gray"><b><u>Hello World</u></b></font>). А если подобный стиль нужно использовать несколько раз?
Ничего если разa 3-4..а если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей: Внутренние таблицы
стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей ( Inline Style Sheets ) мало
чем отличаются от HTML тегов. Глобальные (Global Style Sheets) определяют стиль элементов во всем документе. Связанные
(Linked Style Sheets) могут быть использованы для нескольких документов и хранятся во внешем файле.
Structure & Rules
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 будут цвета Silver. Псевдоклассы:
Псевдокласс состоит из элементов одного типа, отвечаюшему определенному критерию. Псевдоклассы при определении отделяются знаком ":" .
Список псевдоклассов :
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
Inline Style Sheets
Как уже говорилось, использование внутренних стилей мало чем отличается от использования обычных HTML тегов.
Они задают стиль только одному элементу документа при помоши атрибута style в html-теге. Example:
<font color="#EEEEEE" size="2" face="Arial">Hello World!</font>
Result:Hello World!
Inline Style Sheet Example:<font Style="color:#EEEEEE;font-size:10pt;font-family:arial">Hello World</font>
Result:Hello World!
Как можно заметить код Inline Style Sheet Example получился больше чем с обычными атрибутами тега. Поэтому иногда разумнее использовать просто теги обычные теги с атрибутами...
Global Style Sheets
Global Style Sheets
Глобальные стили задают вид элементов всего документа. Для этого используется тег <Style>. Он размещается в заголовке документа. Example:
<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
Linked Style Sheets
Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл style.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. Все что относилось к Глобальным стилям справедливо и здесь.
В самих же документах делается ссылка на этот файл при помощи тега . Выглядит это так -
Example:
File [style.css]:
body {background:black;color:red;font-size:9pt}
h1 {color:white}
a:link,a:visited,a:active {color:green}
a:hover {font-weight:bild}
File [index.html]:
<html>
<head>
<title> Example </title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
[Содержание]
</body>
</html>
Style Properties
Style Properties
font-family
Possible Values: Любой шрифт
Описание: Это свойство определяет используемый элементом шрифт. Если указать URL - то шрифт автоматически установится на компьютер пользователя(?)
Example: font-family:Arial Black URL('arialblack.tff');
font-style
Possible Values: [1] normal - без изменений [2] italic, oblique - курсив
Описание: Наклон текста: курсивный или обычный
Example:font-style:italic;
font-variant
Possible Values:
[1] normal - без изменений / значение по умолчанию;
[2] small-caps - заменяет строчные буквы на заглавные такой же высоты
Example: font-variant:small-caps;
font-weight
Possible Values:
[1] normal, lighter - тонкий / по дэфолту стоит ;)
[2] bold - жирный
Описание: Толщина букв
Example:font-weight:bold;
font-size
Possible Values:
[1] значение, задаваемое в пикселях(px) или в пунктах(pt) / Example: 10pt==12px / px-значение по умолчанию
[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений (?)
Описание: Размер шрифта
Example:font-size:30pt; letter-spacing
Possible Values: (+) Определяет добавочное расстояние между буквами с указанием едениц измерения.
Example:letter-spacing:100px;
text-decoration
Possible Values:
[1] none - нет
[2] underline - подчеркнутый
[3] overline - над текстом
[4] line-through - перечеркнутый [!] Hint: при использовании такого синтаксиса: text-decoration:underline overline; будут задействованы оба стиля!
Example:text-decoration:line-through;
vertical-align
Possible Values:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] (%)
Описание: Выравнивание элементов по отношению к другим элементам стоящих в одном ряду.
Example:vertical-align:middle;
text-transform
Possible Values:
[1] none - нет
[2] Capitalize - слова начинаются с большой буквы
[3] UPPERCASE - слова начинаются с заглавной
[4] lowercase - каждая буква текста становится маленькой
Описание: Изменение отображения текста
Example:text-transform:capitalize;
text-align
Possible Values:
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст выравнивается по "ширине"
Описание: Выравнивание текста
Example:text-align:justify;
text-indent
Possible Values: (+) добавочное расстояние в еденицах измерения (pt,px,%)
Описание: Обозначает опступ
Example:text-indent:30pt;
line-height
Possible Values: (+) добавочное расстояние в еденицах измерения (pt,px,%)
Описание: Определяет сжатие или растяжение по вертикали
Example:line-height:150%;
color
Possible Values:
[1] цвет (+)
*Applies to : All elements
Описание: Цвет может быть задан или с помощью ключевого слова(silver,red, lightblue, итд) или же в 16-ти ричной системе (#708090,#FF00FF,#3d5e7f)
Example:color:#708090;
backgroung
Possible Values: тоже самое, что и Color
Описание: Цвет фона элемента
Example:background:#345678;
background-image
Possible Values: none - нет, URL - адрес картинки
Описание: Фоновое изображение
Example:background-image:URL(cool.gif);
background-repeat
Possible Values:
[1] repeat - размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает фоновое изображение вертикально
[3] repeat-y - размножает фоновое изображение горизонтально
[4] no-repeat - не повторяющиеся изображение
Описание: Повторения фонового изображения
Example:background-repeat:repeat-y;
background-attachment
Possible Values:
[1] scroll - фоновое изображение прокручивается всесте с содержанием дока / по default'у
[2] fixed - не прокручивается
Описание: Возможность прокрутки фонового изображения
Example:background-attachment:fixed;
background-position
Possible Values:
[1] расстояние от левого края + расстояние от вершины
[2] top, middle, bottom, left, center, right - одно из начений
Описание: Положение фонового изображения (работает с background-repeat если оно равно repeat-x или repeat-y)
Example:background-position:50%0%; или background-position:center;
white-space
Possible Values:
[1] normal - "сжимает" несколько подряд идущих пробелов в один
[2] pre - допускает отображение несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тeга <br>
Описание: Определяет как будут отображатся пробелы между элементами(?)
Example:white-space:nowrap;
list-style-type
Possible Values:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none - никакой
Описание: Определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено
Example:list-style-type:lower-alpha;
list-style-image
Possible Values: none - нет, URL
Описание: Задает вид list-item маркера в виде картинки
Example:list-style-image:URL(UL.jpg);
margin-top
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Определяет отступ сверху
Example:margin-top:100;
margin-right
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Определяет отступ справа
Example:margin-right:200;
margin-bottom
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Определяет отступ снизу
Example:margin-bottom:100pt;
margin-left
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Определяет отступ слева
Example:margin-left:50pt;
margin
Possible Values: ($)
Описание: Определяет отступ со всех 4-х сторон
Example: margin:0px;
padding-top
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Отступ от верхнего border'а
Example:padding-top:100pt;
padding-right
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Отступ от правого border'а
Example:padding-right:100%;
padding-bottom
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Отступ от нижнего border'а
Example:padding-bottom:100px;
padding-left
Possible Values: расстояние в еденицах измерения (pt,px,%)
Описание: Отступ от левого border'а
Example:padding-top:100;
padding
Possible Values: ($)
*Applies to : All elements
Описание: Отступ четырех сторон
Example:padding:0;
border-top-width
Possible Values: определяет толщины рамки
[1] расстояние в еденицах измерения (pt,px,%)
[2] thin, medium или thick
Описание: толщина верхнего border'а
Example:border-top-width:10;
border-right-width
Possible Values: определяет толщины рамки
[1] расстояние в еденицах измерения (pt,px,%)
[2] thin, medium или thick
Описание: правого верхнего border'а
Example:border-right-width:thick;
border-bottom-width
Possible Values: определяет толщины рамки
[1] расстояние в еденицах измерения (pt,px,%)
[2] thin, medium или thick
Описание: толщина нижнего border'а
Example:border-bottom-width:10;
border-left-width
Possible Values: определяет толщины рамки
[1] расстояние в еденицах измерения (pt,px,%)
[2] thin, medium или thick
Описание: толщина левого border'а
Example:border-left-width:medium;
border-color
Possible Values: color
Описание: Color
Example:border-color:green; border-color:green red black blue;
border-spacing
Possible Values: число
Описание: Space of td table...
Example:border-spacing:0;
border-collapse
Possible Values: collapse
Описание: Space of td table... ???
Example:border-collapse:collapse;
width
Possible Values: $(pt,px,%)
Описание: ширина элемента в еденицах измерения (pt,px,%)
Example:width:10%;
height
Possible Values: $(pt,px,%)
Описание: высота элемента в еденицах измерения (pt,px,%)
Example:height:100%;
display
Possible Values: block , inline, none
Описание: Это свойство указывает будет ли показан элемент.
Example:display:none;
position
Possible Values:
[1] absolute - относительное положение, будет двигаться вместе с фоном, но при
изменении окна браузера элемент останется на том же месте...
[2] relative - по умолчанию
[3] static - ...., но не будет двигаться при прокручивании //лично у меня не сработало...
Описание: Установливает каким образом вычисляется положение в плоскости.
Example: position:absolute;
visibility
Possible Values:
[1] visible - элемент виден на экране (по умолчанию)
[2] hidden - не виден
[3] inherit - элемент виден, если его родительский элемент является видимым
Описание: видимость элемента на странице
Example: visibility:hidden;
z-index
Possible Values: полож. или отриц. любое целое число
Описание: свойство, определяющее расположение элементов на странице, в виде слоёв
Example: z-index:-1;
border
border:толщина тип цвет;
Это свойство используется для задания рамки таблицы нужного стиля ;)
[1]толщина: значение, указываемое в пикселях(2px)
[2]тип: значения: inset, outset, double, groove, solid, dashed, dotted, hidden
[3]цвет: цвет задаётся как обычно в той же системе, что и "color:;"
Example: border:1px inset #000000; или border:double silver;
// Если нужно задать стиль для определенной стороны, то используется синтаксис: border-side:; (?)где side - сторона: left, right, top, bottom