Пятница, 29-03-2024
Заработай свою "копейку"
Меню сайта
Категории раздела
Виды заработка [2]
Описаны некоторые виды заработка в интернете, с чего начать зарабатывать деньги
Изучаем html [26]
Почтовый спонсор [39]
Биржи фрилансеров. [1]
Бонусы [0]
Понемногу обо всем [15]
Реклама
Советуем почитать
  • Была идея, стало много денег
  • Статистика


    publ - Главная » Статьи » Изучаем html

    Таблицы стилей CSS – средство оформления сайта в едином стиле

    Таблицы стилей CSS

    Работать со стилями в HTML можно тремя способами:

    • С помощью атрибута style в тегах.
    • Описав стили в заголовке документа.
    • Использовать внешний файл, в котором описаны все стили.

    Первые два способа можно использовать если необходимо применить индивидуальное оформление страницы.

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

    Подключение файла стилей осуществляется в заголовке (тег head).

    Формат представления:

    <like rel="stylesheet" href="Файл стилей" type="text/css">

    Для облегчения работы с таблицами стилей предусмотрены комментарии. Комментарий начинается с символов "/*" и заканчивается символами "*/".

    Пример использования:

    /* Это комментарий */

    Селекторы

    Селектор в CSS это название тега, которому задаются свойства. К примеру задание цвета для абзаца:

    P { color: blue }

    Все абзацы будут выводиться синим цветом.

    Если необходимо нескольким тегам назначить одно и тоже свойство используется:

    H1 { color: green }

    H2 { color: green }

    H3 { color: green }

    то можно использовать группировку и написать:

    H1, H2, H3 { color: green }

    при этом селекторы разделяются запятыми.

    Так как структура HTML документа является объектно-ориентированной то существует взаимосвязь между селекторами. Потомок – тег находящийся внутри другого тега – предка (или родителя). Сестринские теги находятся рядом (смотри структуру документа!!!). Рассмотрим их использование.

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

    P CODE { color: red }

    В документе: <P>Пример использования <CODE>текст примера</CODE> селектора потомка</P>

    В этом случае тег CODE является потомком для тега абзаца и он будет красного цвета. Количество потомков не ограничено обусловлено только структурой документа. Если неизвестно в какой тег будет вложен тег которому необходимо задать свойства то, в этом случае, используют символ "*" (означает применить к любому тегу). Звёздочка заменяет неизвестный тег и поэтому с обеих сторон должны быть пробелы.

    BODY * CODE { color: red } /* тегу CODE устанавливается красный цвет в любом теге */

    По структуре HTML документа все теги находятся внутри тега BODY, поэтому можно записать просто:

    * CODE { color: red }

    Если необходимо увеличить отступ от заголовка до первого абзаца (абзаца следующего за ним) используют сестринские селекторы:

    H1.zag + P {margin-top: 3mm}

    Отступ будет назначен абзацу следующему за заголовком у которого атрибут CLASS имеет значение zag. Селектор классов рассмотрим ниже.


    Селекторы атрибутов

    CSS создает правила в соответствии с которыми тегу задаются свойства в зависимости от значений атрибутов.

    Правило может быть задано четырьмя способами:

    • [Атрибут] – Свойства назначаются всем тегам у которых установлен атрибут, не зависимо от его значения.
    • [Атрибут=значение атрибута] – Свойства назначаются тегу у которого заданный атрибут имеет указанное значение.
    • [Атрибут~=значение атрибута] – Свойства назначаются тегу у которого одно из значений (список значений задается через пробел) атрибута равно заданному.
    • [Атрибут|=значение атрибута] – Свойства назначаются тегу у которого значение атрибута, заданное списком слов разделенных дефисом, начинается с заданного значения.

    Пример использования:

    H1[margin] { background: red } /* Всем заголовкам с установленным атрибутом полей назначить красный цвет фона */

    P[class=warning] { color: red } /* Всем абзацам у которых атрибут class имеет значение warning */

    P[class=warning][align=center] { color: red } /* Всем абзацам у которых атрибут class имеет значение warning и атрибут align значение center */

    H1[align~="left right"] { color: red } /* Всем заголовкам у которых атрибут align имеет значение left или right */

    *[lang|="en"] { displey: none } /* Всем тегам у которых атрибут lang (язык) начинается с en (будут невидимы теги с атрибутами и en-GB и en-US) */

    Селекторы классов

    В таблице стилей вместо "P[class~="Exemple"] { color: red }" можно записать "P.Exemple { color: red }". В данном случае свойство задается только тегам абзаца класса "Exemple". Можно также задать стиль без указания тега (для любого), в этом случае запишем "*.Exemple { color: red }" или просто ".Exemple { color: red }".

    Можно также использовать и P.text.red { color: red }, в этом случае красный цвет будет назначен абзацам у которых в названии класса будут слова text и red.

    <P class="This text red color">Этот текст красного цвета</P>

    <P class="This text blue color">А этот текст не красного цвета</P>

    ID селекторы

    ID селектор назначается тегу атрибутом ID. ID селектор по использованию похож на селектор классов. Если в таблице стилей селектор классов начинается с точки, то ID селектор начинается с символа решетки ("#"). ID селектор по отношения к селекторам атрибутов имеет больший приоритет, это означает, что значения назначенные в атрибутах тега будут перекрыты значениями заданными ID селектором (то есть изменить значения атрибутов заданных ID селектором в документе нельзя).

    Пример использования:

    В таблице стилей задаем свойства для всех тегов для ID "Text":

    *#Text { color: red }

    Применяем стиль для абзаца:

    <p id="Text">Любой текст</p>

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


    Псевдокласс: first-child

    Первый дочерний элемент. Так как документ HTML представляется в виде структуры дерева то элементы могут находится внутри друг друга (то есть вялятся дочерними).

    Пример использования:

    В таблице задаем:

    P:first-child CODE { color: blue }

    В теле документа:

    <P>Это <CODE>синий</CODE> цвет текста в теге CODE</P>

    <P><B>А это не<CODE>Синий</ CODE> цвет текста в теге CODE</B></P>

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

    Псевдоклассы ссылки:

    link – Задает свойства если пользователь ещё не просматривал ссылку.

    visited – Задает свойства если пользователь уже просмотрел ссылку.

    Динамические псевдоклассы

    hover – Задает свойства когда пользователь выделил какой либо элемент.

    active – Задает свойства когда пользователь активировал элемент (с момента когда пользователь нажал кнопку мыши до того как её отпустил).

    focus – Задает свойства когда элемент находится в центре событий (пользователь вводит данные в поле формы).

    Одному и тому же элементу можно назначить несколько псевдоклассов.

    A: link { color: blue } /* Ссылка не просмотрена */

    A: visited { color: red } /* Ссылка просмотрена */

    A: hover { color: green } /* Указатель наведен на ссылку */

    A: active { color: yellow} /* Ссылка активна */

    В соответствии с правилами каскадирования правило hover должно быть определено после правил link и visited, а правило active после hover.


    Псевдоэлементы


    first-line – задает стиль первой строки абзаца.

    P.first-line { color: red } /* Первая строка абзаца будет красного цвета */

    Можно задать свойства шрифта, цвета и фона.


    first-litter – задает стиль первой буквы. Используется для для создания буквицы.

    Если свойству float задано значение none то псевдоэлемент будет соответствовать строчному элементу, при иных значениях будет соответствовать плавающему элементу.


    P.first-litter { font-size: 20pt; font-weight: bold; color: red; float: left }

    Можно задать свойства шрифта, цвета, фона, границ, отступов и рамок.


    before и after – Вставка содержимого до или после элемента.

    P.exemple:before { content: "Строка вставлена перед абзацем"}

    Table.exemple:after { content: "Строка вставлена после таблицы"}

    Язык и структура HTML...
    Служебная информация...
    Оформление материала...
    Скрипты...
    Единицы измерения...

    Категория: Изучаем html | Добавил: And64Kot (19-08-2010)
    Просмотров: 1829 | Теги: Псевдокласс, Таблицы стилей CSS, Селекторы, Пример использования, Html, Формат представления | Рейтинг: 0.0/0 |
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Поиск
    Курсы валют
    Курсы НБУ на сегодня
    Получи бонус WM

    Введи свой WMR кошелек

    Друзья
  • Херсон и херсонцы
  • Цветоводство
  • Все для веб-мастера
  • Программы для всех
  • Мир развлечений
  • Лучшие сайты Рунета
  • Кулинарные рецепты
  • Copyright MyCorp © 2024