Уроки по CSS.
Урок 1:
Если вы зайдете по этой ссылке: http://www.livejournal.com/customize/options.bml?group=customcss
то увидите внизу textarea (форму для ввода текста).
В нее вы можете вписать лично для своего журнала любой CSS код.
Внимание не забудьте выбрать "YES" в параметре: Use Layout's stylesheet(s)
Так, а теперь переходим непосредственно к изучению CSS.
CSS это абревиатура, расшифровывается как - Cascading Style Sheets (Каскадная Таблица Стилей).
Используется преимущественно для оформления HTML- и XHTML-документов.
Здесь я разберу пример, как разукрасить ссылку у себя на сайте (в ЖЖ).
По приведенной выше ссылке, введите в окно такой текст:
A
{
Text-decoration: underline;
color: YELLOW;
BackGround-color: BLACK;
}
A:hover
{
Text-decoration: underline;
color: #000099;
BackGround-color: GRAY;
}
А теперь разъесняю, что к чему.
< a href="http://site.ru" >текст ссылки< /a > - это всем известный оператор HTML для создания ссылок.
A /* буква А здесь обозначает, тот самый тэг ссылку, из HTML.
*Внимание в следующих уроках я буду делать коментарии прям в CSS коде! (начало коментариев обозначаются - "/*" - а далее идет текст зеленым цветом).
A:hover /* слово hover здесь обозначает, момент, когда курсор оказывается прямо над ссылкой. Тут я думаю более подробные объяснения не нужны.
{ /* эти фигурные скобки, обозначают завершения блока.
}
Text-decoration: underline; /* Text-decoration - обозначает декоротивные элементы шрифта (такие как: подчеркивание, курсив, полужирное начертание) в нашем случае - underline (подчеркивание) -
*ВНИМАНИЕ! Никогда не убирайте с ссылок подчеркивание! Это дурной тон, вы запутаете посетителей!
color: YELLOW;/* color - здесь все видно из названия - цвет текста.
BackGround-color: BLACK;/* BackGround-color - является определением цвета заднего фона.(будьте более разумны используя этот элемент, если использовать его не с умом то он только испортит внешний вид).
Знак двоеточие ":" в CSS используется, как знак равно "=" в математике.
Знак точка с запятой ";" в CSS используется, как обозначение конца строки (свойства).
Альтернативный способ вживления CSS в страницу
< a style="Text-decoration: underline;color: YELLOW;BackGround-color: BLACK;" href="http://site.ru" > текст ссылки < /a >
style - Это свойство тэгов HTML для ввода CSS стилевых свойств.
Урок закончен. Прошу раскритиковать, не бойтесь спрашивать того чего вы не поняли. Если нашли ошибки - сообщите мне и я исправлю.
Если вы зайдете по этой ссылке: http://www.livejournal.com/customize/options.bml?group=customcss
то увидите внизу textarea (форму для ввода текста).
В нее вы можете вписать лично для своего журнала любой CSS код.
Внимание не забудьте выбрать "YES" в параметре: Use Layout's stylesheet(s)
Так, а теперь переходим непосредственно к изучению CSS.
CSS это абревиатура, расшифровывается как - Cascading Style Sheets (Каскадная Таблица Стилей).
Используется преимущественно для оформления HTML- и XHTML-документов.
Здесь я разберу пример, как разукрасить ссылку у себя на сайте (в ЖЖ).
По приведенной выше ссылке, введите в окно такой текст:
A
{
Text-decoration: underline;
color: YELLOW;
BackGround-color: BLACK;
}
A:hover
{
Text-decoration: underline;
color: #000099;
BackGround-color: GRAY;
}
А теперь разъесняю, что к чему.
< a href="http://site.ru" >текст ссылки< /a > - это всем известный оператор HTML для создания ссылок.
A /* буква А здесь обозначает, тот самый тэг ссылку, из HTML.
*Внимание в следующих уроках я буду делать коментарии прям в CSS коде! (начало коментариев обозначаются - "/*" - а далее идет текст зеленым цветом).
A:hover /* слово hover здесь обозначает, момент, когда курсор оказывается прямо над ссылкой. Тут я думаю более подробные объяснения не нужны.
{ /* эти фигурные скобки, обозначают завершения блока.
}
Text-decoration: underline; /* Text-decoration - обозначает декоротивные элементы шрифта (такие как: подчеркивание, курсив, полужирное начертание) в нашем случае - underline (подчеркивание) -
*ВНИМАНИЕ! Никогда не убирайте с ссылок подчеркивание! Это дурной тон, вы запутаете посетителей!
color: YELLOW;/* color - здесь все видно из названия - цвет текста.
BackGround-color: BLACK;/* BackGround-color - является определением цвета заднего фона.(будьте более разумны используя этот элемент, если использовать его не с умом то он только испортит внешний вид).
Знак двоеточие ":" в CSS используется, как знак равно "=" в математике.
Знак точка с запятой ";" в CSS используется, как обозначение конца строки (свойства).
Альтернативный способ вживления CSS в страницу
< a style="Text-decoration: underline;color: YELLOW;BackGround-color: BLACK;" href="http://site.ru" > текст ссылки < /a >
style - Это свойство тэгов HTML для ввода CSS стилевых свойств.
Урок закончен. Прошу раскритиковать, не бойтесь спрашивать того чего вы не поняли. Если нашли ошибки - сообщите мне и я исправлю.