1. Bitcoin адрес для пожертвований: 1dapfB97R98wg8J3hknWpMDJ7P61CWjNn
    Скрыть объявление
  2. Участникам форума доступны: Skype, WhatsApp и Telegram конференции. Присоединяйтесь!
  3. Наши основные группы и каналы: VK, Twitter. Подписывайтесь!
  4. Мы открыли музыкальный клуб! Заходи и ставь свое музло!
  5. Скрыть объявление

Синтаксис CSS

Тема в разделе "Архив", создана пользователем WTBG, 29 июл 2008.

  1. WTBG

    WTBG Старейшина

    Репутация

    0 / 0


    Бесплатная раздача Bitcoin
    Типы листов стилей.

    Существуют три способа применения стилей в документе HTML.
    1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.

    Код (Text):
    1.    <p style="color: red"> текст красного цвета </p>
    2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля.

    Код (Text):
    1.    <html>
    2.     <head>
    3.       <style>
    4.          <! --
    5.           p{color: red}
    6.         -->
    7.        </style>
    8.      </head>
    9.       <body>
    10.       
    11.  
    12. текст красного цвета</p>
    13.       </body>
    14.    </html>
    3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.

    Код (Text):
    1.    <html>
    2.      <head>
    3.        <link rel="stylesheet" href="style.css" type="text/css" >
    4.      </head>
    5.      <body>
    6.       
    7.  
    8. текст красного цвета</p>
    9.      </body>
    10.    </html>
    style.css должен содержать:

    Код (Text):
    1. p{color: red}
    Селекторы

    Это элементы дескрипторов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является BODY:

    Код (Text):
    1. body { color: blue}
    Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:

    Код (Text):
    1. h1, p, h2{font-size: 12px}
    Вместо селекторов можно использовать маску *. В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице дескрипторам:

    Код (Text):
    1. * { font-size: 14pt}
    Другим символом маски является знак >. Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL:

    Код (Text):
    1. ol > li {list-style-type: decimal}
    Используя селекторы классов, можно к одному и тому же дескриптору применять разные стили. После общего селектора следуют точка и имя класса, и стиль применяется тому дескриптору, чей атрибут CLASS соответствует этому имени. В следующем примере стиль применяется ко всем дескрипторам H2, у которых атрибут CLASS равен "myBlue":

    Код (Text):
    1. h2.mybule {background-color: bule}
    Код (Text):
    1. <h2 class="mybule">у этого заголовка синий фон</h2>
    Селекторы также можно определять с помощью атрибута id, используя для этого символ #. В следующем примере стиль соответствует любому дескриптору, у которого значение атрибута id является "ducie"

    Код (Text):
    1. #ducie {border-color: yellow}
    Селектор A[att] соответствует любому элементу А, у которого задан определенный атрибут, не зависимо от его значения (не работает в IE).

    Код (Text):
    1. table[border]{ border:1px solid red;}
    Селектор A[att=”val”] соответствует любому элементу А, определенный атрибут которого имеет заданное значение (не работает в IE).

    Код (Text):
    1. input[type=”submit”] {background-color :red;}
    Селектор А[lang|=”val”] соответствует любому элементу А, который имеет заданное значение в качестве одного из значений атрибута lang (не работает в IE).

    Код (Text):
    1. P[lang|=”en”]{text-align:left;}
    Псевдоклассы.

    Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс :first-letter, в котором устанавливаете различные стили:

    Код (Text):
    1. p:first-letter { float: right; font-size: 2em; color: red;}
    В CSS2 определяются следующие псевдоклассы:

    :first-child -первый дочерний элемент другого элемента;
    :link - еще не посещенные ссылки;
    :visited - посещенные ссылки;
    :hover - элемент, над которым в настоящее время находится курсор;
    :active - активный в данный момент элемент ;
    :focus - элемент, имеющий фокус ввода;
    :lang - этот псевдокласс определяет текущий язык;
    :first-line - первая формированая строка абзаца;
    :first-letter - первая буква абзаца;
    :before - определяет содержимое перед элементом;
    :after - определяет содержимое после элемента.


    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.



  2. nuvusuki

    nuvusuki Новичок

    Репутация

    0 / 0


    Вот ваш пример:

    Код (Text):
    1. h2.mybule {background-color: bule}
    Код (Text):
    1. <h2 class="mybule">у этого заголовка синий фон</h2>
    А можно ж сделать так?
    Код (Text):
    1. mybule {background-color: bule}
    без h2??