Содержание
CSS содержит стилевые правила отображения определенных элементов документа, которые интерпретируются браузером. Стилевое правило состоит из 3-х частей:
- Селектор (Selector): селектором является любой HTML тег стиль которого нужно изменить. Это может быть любой тег вроде <h1> или <table> и т.д.
- Свойство (Property): свойство очень похоже на атрибуты HTML тегов, все HTML атрибуты конвертированы в CSS свойства. Ими могут быть цвет или граница и т.д.
- Значение (Value): значения назначаются свойствам. Например, значение свойства color может быть red или #F1F1F1 и т.д.
В CSS Вы можете назначать стилевые правила следующим образом, синтаксис будет выглядеть примерно так:
selector { property: value }
Пример, определение границы для таблицы:
table { border: 1px solid #C00; }
В этом примере table является селектором, а border – свойством со значением «1px solid #C00»
Вы можете определять стили для селекторов множеством разных способов. Приведу несколько примеров.
Типовые селекторы
Теги HTML, как было указано выше, являются типовыми селекторами. Вот так Вы можете изменить цвет всех заголовков первого уровня:
h1 {
color: #36CFFF;
}
Универсальный селектор
Вместо того чтобы описывать стили отдельных селекторов, универсальный селектор позволяет применить стиль ко всем элементам web-страницы:
* {
color: #000000;
}
Пример выше делает черным цвет текста всех элементов страницы.
Селекторы-потомки
Предположим Вы хотите применить стилевое правило только к конкретному элементу страницы только тогда, когда этот элемент находится внутри другого. Как показано в следующем примере, стилевое правило будет применено ко всем селекторам <em>, но только если они находятся внутри <ul>
ul em {
color: #000000;
}
Селекторы-классы
Вы можете описать стилевое правило, основанное на html-атрибуте class для определенного элемента. Ко всем элементам с этим атрибутом будет применяться описанное в классе правило.
.black {
color: #000000;
}
Это стиль делает черным цвет всех элементов, использующих class=″black″ как html-атрибут. Вы также можете описывать классы точнее, например:
h1.black {
color: #000000;
}
Это класс может изменить цвет заголовков <h1>.
Вы можете использовать несколько классов для одного элемента. Посмотрите на следующий пример:
| 1 2 3 |
<p class="center bold" > This para will be styled by the classes <i>center</i> and <i>bold</i>. </p> |
Селекторы-идентификаторы
Эти селекторы, также как и классы, основаны на применении html-атрибутов. Все элементы имеющий соответствующий идентификаторы (id) будут отформатированы согласно описанному стилевому правилу.
#black {
color: #000000;
}
Это правило делает цвет текста черным для всех элементов, у которых атрибут id соответствует стилю «black». Вы также можете конкретизировать эти селекторы. Например:
h1#black {
color: #000000;
}
Это правило может применяться только для заголовков первого уровня с атрибутом id=»black»
Истинная мощь id селекторов заключается в том, что они могут быть использованы в качестве вложенных селекторов, например:
#black h2 {
color: #000000;
}
Согласно этому правилу, все заголовки второго уровня будут черного цвета только тогда, когда они будут вложены в другие элементы с атрибутом id=»black»
Селекторы-дети
Вы уже познакомились с селекторами-потомками. Существует еще один тип селекторов, который очень схож, но имеет другое назначение. Рассмотрим следующий пример:
body > p {
color: #000000;
}
Это правило изменяет цвет текста всех параграфов-детей по отношению к тегу <body>. Т.е. другие параграфы, расположенные внутри других элементов, например <div> или <td>, останутся без изменений.
Атрибутивные Селекторы
Вы также можете применять стили к HTML элементам с конкретными атрибутами. Стиль ниже будет применяться ко всем элементам, которые в которых используется заданный в стилевом правиле атрибут и значение:
input[type="text"]{
color: #000000;
}
Преимущество этого метода заключается в том, что, например, тег <input type="submit"/> не будет затронут этим правилом, в отличие от других текстовых полей.
К атрибутивным селекторам могут применяться следующие правила:
- p[lang] — применяется ко всем параграфам с атрибутом lang
- p[lang=»fr»] — применяется ко всем параграфам с атрибутом lang и его значением точно равным «fr»
- p[lang~=»fr»] — применяется ко всем параграфам с атрибутом lang и значением содержащим слово «fr»
- p[lang|=»en»] — применяется ко всем параграфам с атрибутом lang и значением, которое точно соответствует слову «en» или начинается с «en-«
Многострочные стилевые правила
Вы наверняка понадобится определять множество стилевых правил для одного элемента, и Вы можете легко это сделать, разделяя каждое правило точкой с запятой как в примере:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Каждое отдельное правило отделяется точкой запятой (;) и необязательно располагать новое стилевое правило с новой строки, это лишь позволяет проще читать CSS-код
Группировка селекторов
Вы можете приметь стили сразу ко множеству. Просто разделяйте пробелом селекторы между собой как в примере ниже:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Описанное правило будет применяться для h1, h2 и h3. Порядок их следования не имеет значения.
Вы также можете комбинировать различные селекторы-классы как в примере:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
По материалам tutorialspoint.com
