Использование css (листов каскадных стилей) Немного о css



Скачать 38.62 Kb.
Дата15.01.2013
Размер38.62 Kb.
ТипДокументы

Прожект Хармони Использование CSS (листов каскадных стилей)

Немного о CSS

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

Селекторы

Синтаксис:

селектор {свойства}
ПРИМЕР:

p {font-size:12pt;}
Текст в любом абзаце (параграфе) будет иметь размер 12 пунктов

Классовые селекторы с привязкой к определенным элементам

Синтаксис:

селектор.класс {cвойства}
ПРИМЕР:

H1.blue {color:blue; size:20pt;}

Все элементы H1 с атрибутом станут синими размером 20 пунктов.

Классовые селекторы без привязки к определенным элементам

Синтаксис:

.класс {свойства}
ПРИМЕР:

.green {color:green;}

В данном случае все элементы с атрибутом станут зелеными.

РАБОТА СО СТИЛЯМИ

Существует 3 варианта размещения стилей при проектировании Web-сайта.
1. Описать стили внутри каждой страницы сайта для каждого конкретного тега (использовать “Внутренние Таблицы Стилей”).

В этом случае внутри тега используется атрибут STYLE, в котором разместить описание стилей.
ПРИМЕР:




Текст этого абзаца



Текст конкретно этого абзаца будет написан шрифтом Verdana, жирным курсивом размером 10 пунктов темнокрасного цвета. В других абзацах эти установки не сохраняются.
2. Описать стили внутри каждой страницы сайта для всех данных страницы (использовать “Глобальные Таблицы Стилей”).

В этом случае в каждой странице сайта внутри блока

нужно записать контейнер , в котором разместить описание стилей.

ПРИМЕР:






В этом примере текст внутри каждой ячейки любой таблицы будет иметь следующие характеристики:

размер - 10 пунктов, шрифт - Verdana, цвет - темнокрасный, начертание - жирное, курсив
Текст внутри параграфа(абзаца): размер - 12 пунктов, шрифт - Cooper, цвет - синий
Там же, где будет использован класс maintext, характеристики текста следующие:

шрифт - Times New Roman, размер шрифта - 16 пунктов, цвет - темносиний
3. Создать отдельный файл (внешний лист стилей) с расширением .css (использовать “Связанные Таблицы Стилей”)

В этом случае во всех страничках сайта внутри блока

нужно записать тег


ПРИМЕР: Если внешний лист стилей назвать site.css, то тег будет выглядеть следующим образом:







Для нашего примера содержимое файла site.css, будет следующим:
td {font-size:10pt; font- family:verdana; color:darkred; font-weight:bold; font-style:italic}

p {font-size:12pt; font- family:cooper; color:blue;}

.maintext {font-family:"Times New Roman";font-size:16pt; color:darkblue}
Для того, чтобы использовать классы , нужно в теги включить атрибут class
ПРИМЕР:



Первый абзац на странице

Второй абзац на странице












Первая ячейка таблицы Вторая ячейка таблицы



Похожие:

Использование css (листов каскадных стилей) Немного о css iconОсновы синтаксиса css и создание вашей первой таблицы стилей. Селекторы. Псевдоклассы и псевдоэлементы
Немного о том, почему появился css и почему лучше использовать css поверх html для дизайна страниц
Использование css (листов каскадных стилей) Немного о css iconСамостоятельная работа №2 Тема: «css и формы» Вариант №1 Что такое css? Назначение css. Каков общий синтаксис записи стилей?
Назовите атрибут и его значения, с помощью которого можно задать позиционирование элементов в css?
Использование css (листов каскадных стилей) Немного о css iconИспользование css в xml-документах
Так что это такое Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ). Css это язык содержащий набор свойств для определения...
Использование css (листов каскадных стилей) Немного о css iconОбщие сведения о каскадных таблицах стилей
Каскадные таблицы стилей – это средство для автоматизации стилевого оформления Web-страниц. У css есть три основных достоинства
Использование css (листов каскадных стилей) Немного о css iconУрок 1: Что такое css? Немного о том, почему появился css и почему лучше использовать css поверх html для дизайна страниц
В этом уроке мы рассмотрим, как редактировать перекрывание элементов с помощью layers
Использование css (листов каскадных стилей) Немного о css iconСтилевое форматирование текста – css css
Ение оформления и содержания. Содержание веб-страницы хранится в html-файле, оформление – в css-файле
Использование css (листов каскадных стилей) Немного о css iconСуществуют четыре способа связи css с html-документом
Таблица стилей существует в виде отдельного текстового файла с расширением css (желательно, чтобы он находился в той же папке,что...
Использование css (листов каскадных стилей) Немного о css icon-
Развитием языка html является xml, а также css (Cascading Style Sheet). Использование стилевого оформления и css в частности позволяет...
Использование css (листов каскадных стилей) Немного о css iconОсновные команды css введение
Разработка домашних страниц (Основы html и css для неспециалистов). © А. В. Куприянов, 2004
Использование css (листов каскадных стилей) Немного о css iconCss цвета в веб-дизайне
Это доступное руководство рассмотрит css цвета. Так же в нем вы найдете удобные цветовые карты и инструменты, которые помогут вам...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org