Css основы css c
 Скачать 216.5 Kb.
|
|
Основы CSS Казанский (Приволжский) федеральный университет v.1.0.1 CSS Основы CSS Cascading Style Sheets (CSS, каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Связывание с HTML-документом Основы CSS адрес файла со стилями”> <… style=“Стили”> Расположить описание стилей в отдельных файлах и подключить их с помощью нескольких элементов link. 1. 3. 2. Записать описание стилей всего html-документа как содержимое элемента style. Записать описание стилей одного элемента в его атрибуте style. Способы подключения пронумерованы в порядке подключения и применения стилей к элементам документа. Общий синтаксис описания стилей Основы CSS cелектор{ свойство1: значение1; свойство2: значение2; } Селектором можно выбрать любое количество элементов, ко всем которым будет попытка применить стили из фигурных скобок. В одном документе может быть много таких правил с разными или одинаковыми селекторами. Правила применяются последовательно. Некоторые типы селекторов Основы CSS p Определённых html-элементов (в данном случае – абзацев) .c1 Элементы с классом c1 (уст. через атр. class) #i1 Элементы с идентификатором i1 (уст. через атр. id) a img Вложенные элементы (в данном случае – все img в a) [type=“text”] Элементы с определённым значением атр. p.c1 .c1.c2 span.c1 span.c2 input[type=“text”] Селекторы можно комбинировать: Селекторы можно перечислять через запятую: h1, h2, h3 Псевдоклассы и псевдоэлементы Основы CSS :active Активный элемент (во время клика мышью) :hover Курсор находится над элементом :visited Применяется к ссылкам. Ссылка посещена :nth-child(…) Элементы с определёнными порядковыми номерами. Возможные значения: целое число, odd, even, формула (например, 2n+1) :focus Элемент в фокусе Псевдоклассы: Псевдоэлементы: ::first-line Первая строка текста-содержимого элемента. ::first-letter Первая буква текста-содержимого элемента Типы свойств Основы CSS Цвет Название: red, green, orange, chocolate, grey Шестнадцетиричный RGB (#rrggbb): #ff0000, #cccccc, #340f5b Десятиричный RGB: rgb(255, 0, 0), rgb(100, 100, 100), rgb(73, 232, 99) Десятиричный RGB с прозрачностью: rgba(255, 0, 0, 0.5) Размеры Пиксели: 22px Проценты: 50% em (ширина буквы m в текущем/родительском шрифте): 0.8em Сантиметры, миллиметры: 23cm, 42mm Пункты (1/72 дюйма): 14pt Некоторые свойства текста Основы CSS color Цвет текста font-size Кегль шрифта font-weight Жирность шрифта font-family Шрифт text-align Выравнивание по горизонтали vertical-align Выравнивание по вертикали (обтекание) text-decoration Эффекты шрифта (подчёркивание, зачёркивание и т.д.) Блочная модель Основы CSS Модель расчёта размеров выше (content-box) применяется по-умолчанию. В ней итоговая высота и ширина рассчитываются в зависимости от внутренних отступов (padding). Можно изменить свойство box-sizing на значение border-box, чтобы изменение внутренних отступов влияло только на "сжатость" содержимого, но не на итоговый размер элемента. |