АРМАДА
Таблицы стилей или что такое CSS
На страницу 1, 2  След.
Новая тема Написать ответ

Annita
Super Girl
Зарегистрирован: 22.09.2005
Сообщений: 578
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Вт Апр 04, 2006 3:15 amДобавить в избранноеОтветить с цитатой
Таблицы стилей или что такое CSS


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

Иными словами, нам без CSS не обойтись Smile


Методы использования CSS. Таблица связанных стилей

Все стили, использующиеся на сайте (или даже на нескольких сайтах) можно хранить в одном специальном файле с расширением css, ссылка на который помещается во всех документах сайта. При изменении одного этого файла, меняется стиль на всех страницах, связанных с этим файлом.

Для подключения файла css к документу в <HEAD> прописывается тег <LINK>:

Код:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css"
href="http://www.armadaboard.com/main.css">
</head>



Здесь href задает путь к CSS-файлу (относительный или абсолютный).

Пример файла со стилем ( style.css ):

Код:
H1 {
  color: #8A2BE2;
  font-family: Arial;
  text-align: center
}

H2 {
color: #800000;
  font-family: Verdana;
  text-align: left
}



В документе, к которому подключен такой файл, при заключении текста в
теги H1 или H2, к нему(тексту) будет применяться соответствующее форматирование.

Таблица глобальных стилей

Кроме этого свойства CSS можно описывать не в отдельном файле, а в самом документе с помощью тега <STYLE>:

Код:
<style type="text/css">
H1 {
  color: #8A2BE2;
  font-family: Arial;
  text-align: center
}
</style>



Здесь определен стиль тега <H1>, который можно использовать на данной веб-странице.

Внутренние стили

Можно также определять стиль только для конкретного тега:
Код:
<H1 style=" color: #8A2BE2; font-family: Arial; ">Текст</H1>



Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. При этом

первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных
стилей.


Синтаксис CSS

CSS имеет следующий синтаксис:
селектор { свойство1: значение; свойство2: значение; ... }
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции.

Некоторые возможные свойства селекторов и их значения

Код:
font-family: Arial, Verdana (Семейство шрифта)
font-size: 80% (Размер шрифта)
font-weight: normal (Ширина шрифта)
color: #800000 (Цвет текста)
background: #FFE4E1 (Цвет фона)
text-align: justify (Выравнивание по ширине)
font-style: italic (Курсив)



Классы

Классы удобно использовать, когда хочется задать несколько стилей для одного тега.

Синтаксис задания стиля будет следующий:
тег.имя_класса { свойство1: значение; свойство2: значение; ... }
Синтаксис использования заданного стиля:
<тег class="имя_класса">Текст</тег>

Пример:
Код:
<html>
<head>
<style type="text/css">
P { color: red;
     font-style: italic }
P.class1 { color: blue;
           text-align: justify }
P.class2 { color: black }
</style>
</head>
<body>
<p>Текст будет написан курсивом красного цвета </p>
<p class="class1">Текст будет написан курсивом синего цвета и выровнен
по ширине</p>
<p class="class2">Текст будет написан курсивом черного цвета</p>
</body>
</html>



Можно, также создавать классы, не привязывая их к определенному тегу:
Код:
<style type="text/css">
.class3 { color: blue }
</style>
<b class="class3">Текст синего цвета</b>



Идентификаторы

Идентификатор позволяет управлять стилем элемента динамически.

Синтаксис задания стиля идентификатора:
#Имя_идентификатора { свойство1: значение; свойство2: значение; ... }

Синтаксис использования заданного стиля:
<тег id="Имя_идентификатора">Текст</тег>

Пример:
Код:
<html>
<head>
<style type="text/css">
  #id1 { color: red }
</style>
</head>
<body>
<p id="id1">Текст крастого цвета</p>
</body>
</html>



Как и при использовании классов, идентификаторы также можно определять только для конкретного тега. Синтаксис при этомбудет следующий:
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Пример:
Код:
<html>
<head>
<style type="text/css">
P { color: green }
P#id2 { color: red; }
</style>
</head>
<body>
<p> Текст зеленого цвета </p>
<p id="id2">Текст красного цвета</p>
</body>
</html>



(с) Annita
Продолжение следует…
резка проемов

Вацлав
Banned
Зарегистрирован: 21.02.2006
Сообщений: 4966
Обратиться по нику
# Добавлено:Вт Апр 04, 2006 2:54 pmОтветить с цитатой
Это конено же познавательно, но таким циклом статей (даже очень длинным) никому пользы не будет, имхо. CSS штука на самом деле ооочень сложная для начального понимания. А еще больше ее осложняет неполные совместимости браузеров со стандартами css-1/2
Хотя я обоими руками за css и работаю только с ним. очень удобно автоматически генерить темплеты для доров Smile

Annita
Super Girl
Зарегистрирован: 22.09.2005
Сообщений: 578
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Ср Апр 05, 2006 12:39 pmОтветить с цитатой
Вацлав писал(а):
CSS штука на самом деле ооочень сложная для начального понимания.


Мне кажется, что если человек знает html, то и css ему изучить будет не сложно
резка проемов

Вацлав
Banned
Зарегистрирован: 21.02.2006
Сообщений: 4966
Обратиться по нику
# Добавлено:Ср Апр 05, 2006 2:01 pmОтветить с цитатой
Очень и очень немногие действительно знают HTML. Даже те кто думают что его знают, на самом деле только так думают. Это как в ситуации с MS WORD /Write.OpenOffice. Мы же его пользуем в основном как блокнот и не более чем на 5-10%.
Так и с HTML. А при изучении верстки сайтов с помощью CSS очень мешают знания по табличной верстке HTML. Философия мышления немного другая нужна. Не строко-столбцевая, а блоковая. Плюс - килограммы сложностей из-за багов разных браузеров.
Но учить CSS стоит. Очень удобно и быстро верстать, когда руку набьешь.

Z00M
Опытный
Зарегистрирован: 09.01.2006
Сообщений: 187
Обратиться по нику
# Добавлено:Ср Апр 05, 2006 2:05 pmОтветить с цитатой
Бля я так и не научился этому css
хотя знаю, что штука полезная и вес страницы здорово помогает облегчить.
И согласен с Вацлавом по его последнему посту. Не даво была необходимость плотно работать с Экселем, так я оказывается и 1/20 не знаю его возможностей! Ну и так во всех продуктах, ИМХО.
здоровье человека

inna
Свой
Зарегистрирован: 25.02.2006
Сообщений: 5
Обратиться по нику
# Добавлено:Ср Апр 05, 2006 8:59 pmОтветить с цитатой
Не обижайте девушку z40 Полезная статья. Annita спасибо. r4

Rabbit
Кролики - это не только ценный мех
Зарегистрирован: 01.08.2005
Сообщений: 19788
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Чт Апр 06, 2006 3:33 amОтветить с цитатой
Цитата:

Не обижайте девушку


а мы не обижаем! статья полезная, как и другие, которые Аннита писала.
Новое. Прибыльное. Скоро!

No
я здесь ельцин
Зарегистрирован: 01.08.2005
Сообщений: 3746
Обратиться по нику
# Добавлено:Чт Апр 06, 2006 3:53 amОтветить с цитатой
я за несколько лет так и не научился толком использовать CSS Smile

Annita
Super Girl
Зарегистрирован: 22.09.2005
Сообщений: 578
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Чт Апр 06, 2006 4:29 pmОтветить с цитатой
inna, Rabbit, спасибо за поддержку Smile
А ты, No, учись
резка проемов

Apple_Macintosh
Русский Стив Джобс
Зарегистрирован: 08.12.2005
Сообщений: 3208
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Чт Апр 06, 2006 6:28 pmОтветить с цитатой
Annita респект, спасибо за статью, добавлю ее в свою коллекцию статей.
Вы спросите, есть ли у меня синдром Бога? Я и есть БОГ!!!

No
я здесь ельцин
Зарегистрирован: 01.08.2005
Сообщений: 3746
Обратиться по нику
# Добавлено:Пт Апр 07, 2006 1:40 amОтветить с цитатой
Annita писал(а):
inna, Rabbit, спасибо за поддержку Smile
А ты, No, учись

поздно мне уже учится Sad

kapon
Banned
Зарегистрирован: 31.12.2005
Сообщений: 1990
Обратиться по нику
# Добавлено:Пт Апр 07, 2006 3:04 amОтветить с цитатой
+ 1 за то что на CSS мона мозг свихнуть, так и не разобрался..доверяю это щастие дезигнерам и верстальщикамSmile)

и +1 что девушков не нуно обижатьSmile

Annita
Super Girl
Зарегистрирован: 22.09.2005
Сообщений: 578
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Пт Апр 07, 2006 10:20 pmОтветить с цитатой
No писал(а):
поздно мне уже учится Sad


Учится никогда не поздно
резка проемов

brush
V.I.P.
Зарегистрирован: 29.09.2005
Сообщений: 2566
Обратиться по нику
# Добавлено:Сб Апр 08, 2006 3:36 amОтветить с цитатой
Вацлав писал(а):
Очень и очень немногие действительно знают HTML. Даже те кто думают что его знают, на самом деле только так думают. Это как в ситуации с MS WORD /Write.OpenOffice. Мы же его пользуем в основном как блокнот и не более чем на 5-10%.
Так и с HTML. А при изучении верстки сайтов с помощью CSS очень мешают знания по табличной верстке HTML. Философия мышления немного другая нужна. Не строко-столбцевая, а блоковая. Плюс - килограммы сложностей из-за багов разных браузеров.
Но учить CSS стоит. Очень удобно и быстро верстать, когда руку набьешь.



+1

в статье тема сисек не раскрыта
волшебные конструкции
td.Content table td a:visited и тд
грабли браузеров - это просто алилуйя (кстати читать можно xpoint.ru)
разные устройства вывода (вот простор для спамаWink))
вообще по полезности цсс можно сравнить с возможностью что-нить инклюдить во что-нить, и то непонятно, что полезней

Annita
Super Girl
Зарегистрирован: 22.09.2005
Сообщений: 578
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Сб Апр 08, 2006 10:15 amОтветить с цитатой
brush писал(а):
в статье тема сисек не раскрыта


если раскрывать тему полностью, то получится ну о-о-о-очень длинная статья
Поэтому я решила не пихать весь материал в одну
резка проемов
Новая тема Написать ответ    ГЛАВНАЯ ~ ПОЛЕЗНЫЕ СТАТЬИ

Перейти:  





Генеральный спонсор



Партнеры