Применение одного стиля к нескольким селекторам

908.00K

Category:

internet

Основные принципы

1. Основные принципы

Часть 1

2. ПЛАН

Синтаксис CSS. Селекторы.
Приоритеты стилей и наследование.
Псевдоклассы. Размеры в CSS.
Форматирование текста в CSS.

3. Синтаксис CSS

Все CSS-правила состоят из селектора и блока
объявлений (заключённого в фигурные скобки).
Внутри блока объявлений может находиться одно
или несколько объявлений, разделённых точкой с
запятой. Объявление – это строка, составленная из
css-свойства и его значения.
a {text-decoration: none;} /* комментарий */
p.note {
display: block;
float: right;
}

4. Селекторы

Чтобы применить css-оформление к
HTML-элементу или множеству
элементов, обычно используются
селекторы – специальные указатели на
HTML-объекты, к которым применяется
css-правило.

5. Основные виды селекторов

HTML селекторы
Селекторы класса
ID селекторы (или идентификаторы)

6. HTML селекторы

Это простейший случай – в качестве
селектора используется имя того htmlэлемента, который хотим изменить.
Например, для тега <h1> селектором
будет h1, и так далее.
h1 { font-size: 20pt;
color: red;
}

7. Селекторы класса

«Класс» - это некое имя, которое можно
применить к любым HTML-тегам, чтобы
впоследствии ссылаться на них по имени
класса. Удобство таких селекторов в том, что
можно присвоить одно имя класса множеству
html-тегов в документе и затем управлять их
внешним видом, обращаясь к ним по имени
класса:

8. ID селекторы (идентификаторы)

Основное отличие – ID должен быть уникален в рамках
html-документа. Пример использования ID:
<html>
<head>
<title>Селекторы</title>
<style type="text/css">
#text_g {color:green;}
#text_b {color:blue;}
</style>
</head>
<body>
<p id="text_g">Зеленый текст</p>
<p id="text_b">Синий текст</p>
</body>
</html>
Обратите внимание, что идентификаторы в CSS
определяются «#» (решеткой).

9. Применение одного стиля к нескольким селекторам

Очень распространённая задача –
применить один набор правил к
нескольким разным селекторам. Для этого
достаточно перечислить селекторы через
запятую:

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

Псевдоэлементы - это особый вид свойств CSS, которые позволяют
работать не над самим элементом, а над его отдельной частью.
Перечень всех псевдоэлеметов:
:first-letter - Стиль первой буквы текстового блока
:first-line - Стиль первой строки текстового блока
:after - Добавляет содержимое после элемента.
:before - Добавляет содержимое до элемента.
:selection - Стиль выделенного пользователем текста.
Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент {Описание правил стиля;}
Например
p:first-letter {color:#ff0000;}
Первая буква всех абзацев будет красного цвета.

11. Приоритеты стилей

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

12. Уровни приоритета

Чтобы вычислить уровень приоритета браузеры используют определенный
алгоритм, где каждому типу начисляется определенное количество баллов,
определяющее вес селектора. Стили того селектора, который наберет
больший вес, в конечном итоге и будут применены к элементу. Если же
получится так, что какие-то селекторы, которые воздействуют на один и тот
же HTML-элемент наберут одинаковое число баллов, то будут
использованы стилевые свойства того, который находится в коде ниже.
Алгоритм начисления баллов:
Универсальный селектор (* применяется ко всем элементам) —
количество начисляемых баллов равно нулю (0).
Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов
за каждый.
Идентификаторы — по сто (100) баллов за каждый идентификатор
находящийся в селекторе.
Атрибут style — встроенные стили не используют селекторов, а
указываются непосредственно внутри тегов элементов, но при этом они
имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.

13. Наследование параметров

Некоторые свойства CSS могут наследоваться от элементовпредков. Предком в данном случае называется элемент,
стоящий в дереве документа уровнем выше, чем исходный
элемент.

14. Наследование параметров

15. Псевдоклассы

позволяют управлять стилями элементов, когда
пользователь на страничке выполняет какие либо
действия
:active – выполняется при активации пользователем
элемента. Чаще всего используется для изменения
стиля ссылок.
a:active {color:green} - цвет активной ссылки зелёный
:hover – выполняется когда на элемент навели
мышку.
a:hover{color:red} – ссылка становится красной при
наведении на нее мышкой;
:visited – применяется для назначения стилей
ссылок, на которые уже был произведен переход.
a:visited{color:grey} – устанавливает серый цвет для
посещенных ссылок

16. Размеры в CSS

px
in
Размер в миллиметрах.
pt
Размер в сантиметрах.
mm
Размер в дюймах. Один дюйм = 2.54 сантиметра.
cm
Размер в пикселах.
Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1).
pc
Размер в пиках. (12 пунктов).
em
Ширина буквы m в настоящем шрифте.
ex
Высота буквы x в настоящем шрифте.

17. Форматирование текста с помощью CSS

18. Свойства CSS отвечающие за шрифт

font-family: Tahoma, sans-serif – определяет
вид и семейство шрифта.
font-size:13px – устанавливает размер
шрифта.
font-style:italic – преобразует текст в наклонный
(курсив).
font-weight:bold – определяет жирный текст.
color:#cc0033 – определяет цвет текста.
text-align (left | center | right | justify) Выравнивание
содержимого по горизонтали
vertical-align (top | middle | bottom) Выравнивание
содержимого по вертикали

19. Фон

background-color
Устанавливает цвет фона для элемента.
background-image
Устанавливает фоновую картинку для
элемента.
background-repeat
Управляет циклическим повторением фоновой
картинки.

20. Декорация Текста

Text – decoration – оформление текста.
Может принимать значения:
None – обычный текст
Underline – подчеркнутый снизу текст
Overline – подчеркнутый сверху текст
Line-through – зачеркнутый текст
Blink – мигающий текст(работает не во
всех браузерах)

21. СВОЙСТВА ТЕКСТА

Text-indent – задает отступ для первой
строки текста, line-height межстрочный
интервал, letter-spacing интервал между
буквами.
Также при помощи CSS можно задать
регистр, индексы, интервал между словами,
тень, параметры списков и многое другое…
Читайте книги и справочники по CSS и
будет Вам счастье!

English Русский Rules