Суббота
04.05.2024
16:13

Сайт своими руками - фото-сайт

Приветствую Вас Гость | RSS Главная | Сайт своими руками | Регистрация | Вход
Меню сайта

Расчет расстояния между городами
От:  
До:  
Через:  
  (на ATI.su)
В гостях у Ирины
Поиск

Главная » FAQ » CSS


CSS. Что это?
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

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

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

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

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

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

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

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

Добавил: (Irina) Рейтинг: 0.0/0
Стилизация границ
Стилизация границ

Стилизация границ включает в себя стилизацию сторон, толщины, начертания и цвета. Для этого можно использовать
различные свойства границы: 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 - граница никогда не будет видна (указывается без толщины и без цвета.)

Добавил: (Irina) Рейтинг: 0.0/0
Как найти и отредактировать класс в CSS?
Как найти и отредактировать класс в CSS?

Метод 1-й - от frozen

1) Открываете Вид-Просмотр ХТМЛ кода нужной страницы.
2) Находите в тексте объект, параметры которого требуется изменить, и смотрите какой у него класс.
3) Затем ищите этот класс в таблице стилей css.
4) И меняете как нужно параметры.

Если отдельного класса нет, то добавляете его в шаблон (через Панель управления), а в таблице стилей css добавляете с нужными параметрами.

Метод 2-й - от booroondook

1) Открываете в браузере нужную страницу сайта.
2) Сохраняете в браузере эту страницу в виде HTML-файла. Например, в IE выполняем команду "Файл - Сохранить как..." и указываем в опциях вариант "Web-страница полностью" - это вызовет также сопутствующее сохранение CSS-файла и ссылку на него в сохраненном HTML-файле.
3) Открываем сохраненный HTML-файл в Frontpage, переходим в режим "Split" (т.е. отображение в нижней части окна дизайна страницы, а в верхнем - исходного кода).
4) В полуокне дизайна становимся мышкой на нужный нам элемент - при этом в полуокне исходного кода курсор автоматически встанет в соответствующее место кода, а на панели тегов высветится соответствующий класс. При желании можно нажать на этот высвеченный класс - тогда в обоих полуокнах выделятся соответствующие участки.
5) Класс нам известен - теперь можно найти его в локальном CSS-файле (см. п.2 - файл был сохранен) и изменить нужным образом.
6) Возвращаемся в Frontpage, нажимаем там клавишу F5 (обновить представление) и сразу же видим и оцениваем изменения.

Если утомительно искать нужный класс в CSS, то есть

Метод 3-й - от Кински

1. Копируем название класса (с точкой или без).
2. Открываем таблицу стилей CSS
3. Вызываем окно поиска сочетанием клавиш ctrl+F
4. Вставляемый нужный класс в строку поиска
5. Нажимаем поиск и смотрим результат

В 9.01 Опере просмотр кода сделан подсвечивающимся. Текст чёрный, код синий, комментарии зелёные и скрипты коричневые. Очень удобно.

Пример:
Очень часто хотят поменять размер шрифта в сообщениях на форуме. Для этого откроем любую тему на форуме и скопируем кусочек текста. Открываем Просмотр ХТМЛ-кода и ищем этот кусочек. Затем смотрим какой у него класс - у текста сообщений class="posttdmessage".

Открываем таблицу стилей форума и находим в разделе /* Posts View */ класс posttdmessage.

.posttdmessage {padding:5px;font-size:8pt;}

Мы видим, что задан только отступ и размер шрифта. Мы можем поменять размер и добавить цвет. В итоге этот класс будет выглядеть как:

.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}

Цвет взят условно.

Добавил: (Irina) Рейтинг: 5.0/1
Форма входа

Мини-чат
200

Друзья сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

IP-3.145.15.1


Статистика посещаемости, мониторинг доступности сайта Пожелания, поздравления и тосты Rambler's Top100 Goon Каталог сайтов Петербург Петербург тест скорости интернета

В гостях у IRINA © 2024