Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Каскадные таблицы стилей - CSS (Теоретические основы)
Каскадные таблицы стилей - CSS
Модератор форума
Сообщение # 1 | 14:09:39
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

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

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу H1. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:


  • использование различных расширений HTML;
  • применение изображений вместо текста;
  • использование рисунков для контроля пустого пространства, так называемые распорки;
  • использование таблиц для верстки веб-страниц;
  • написание программных скриптов вместо использования HTML.


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

Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.


Источник: htmlbook.ru


На uCoz многое в оформлении делается стилями, например, тело форума доступно для изменения только через стили. Очень многим элементам шаблона присвоены идентификаторы: class и ID. Но не все они приводятся в стандартных шаблонах таблиц стилей дизайнов. Обычно в них задействовано около 60% всех идентификаторов. Не указанные в таблицах стилей идентификаторы, можно просмотреть в исходном коде страниц.
Selena
Сообщений: 15657
Сообщение # 2 | 14:09:39
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

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

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу H1. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:


  • использование различных расширений HTML;
  • применение изображений вместо текста;
  • использование рисунков для контроля пустого пространства, так называемые распорки;
  • использование таблиц для верстки веб-страниц;
  • написание программных скриптов вместо использования HTML.


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

Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.


Источник: htmlbook.ru


На uCoz многое в оформлении делается стилями, например, тело форума доступно для изменения только через стили. Очень многим элементам шаблона присвоены идентификаторы: class и ID. Но не все они приводятся в стандартных шаблонах таблиц стилей дизайнов. Обычно в них задействовано около 60% всех идентификаторов. Не указанные в таблицах стилей идентификаторы, можно просмотреть в исходном коде страниц.
Piterski
Сообщений: 387
Репутация: 195

Сообщение # 3 | 14:09:49
Стилизация границ

Стилизация границ включает в себя стилизацию сторон, толщины, начертания и цвета. Для этого можно использовать
различные свойства границы: border-width (толщина) border-style (начертание) border-color (цвет).
Сторона границы указывается между двумя состовляющими названия стойств border-сторона-width.
Также все свойства можно указать в одной строке.
Например - border: 1px dashed red; 1px - Толщина, dashed - стиль, red - цвет (цвет можно указать и как - #ffffff).
В данном случае вся таблица будет с границей толщиной в один пиксель красной и в стиле dashed.

Если например надо следать границу только слева.
border-left: 1px dashed red;

Значения left и right понятны. Чтобы сделать границу только сверху следует написать border-top, с низу border-bottom

Это варианты записи стиля в одной строке. Конечно можно прописывать каждое свойство отдельно, но в одной проще.
Вот например 2 одинаковых варианта по разному написаны:

border-left: 1px dashed red;

и

border-left-width: 1px;
border-left-style: dashed;
border-left-color: red;

Выбирайте сами.

Теперь небольшая таблица начертания границ (типа - dashed и тд.)
dotted - ряд точек
dashed - ряд штрихов
solid - сплошная линия
double - две сплошных линии
groove - углубление на холсте
ridge - выступ на холсте
inset - врезанный вид
outset - Рельефный вид
none - граница никогда не будет видна (указывается без толщины и без цвета.)

А вот примеры начертаний

Прикрепления: 88077581.png(6Kb)
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Каскадные таблицы стилей - CSS (Теоретические основы)
Страница 1 из 11
Поиск: