Инструменты пользователя
css
Различия
Показаны различия между двумя версиями страницы.
| — |
css [2020/06/13 13:45] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | ====== CSS ====== | ||
| + | |||
| + | ~~Title: Основы работы с CSS ~~ | ||
| + | {{htmlmetatags> | ||
| + | metatag-description=(Подключение стилей CSS к HTML 3 способа. Приоритет применения правил стилей в CSS. Единицы измерения CSS. Использование CSS цвет: RGB, RGBA полупрозрачность. Примеры использования CSS.) | ||
| + | }} | ||
| + | |||
| + | {{: | ||
| + | |||
| + | * [[http:// | ||
| + | * [[http:// | ||
| + | * [[http:// | ||
| + | |||
| + | * [[links|Ссылки]] на ресурсы, | ||
| + | * [[Селекторы]] CSS3, jQuery. | ||
| + | * [[Верстка]] веб-страниц. Позиционирование элемента: | ||
| + | * [[Site navigation menu|Меню навигации сайта]] | ||
| + | * [[teaser]] | ||
| + | |||
| + | ===== Подключение стилей CSS к HTML 3 способа ===== | ||
| + | ==== Вариант 1 — Глобальный CSS ==== | ||
| + | |||
| + | Глобальные CSS помещаются между тегами < | ||
| + | |||
| + | <file css> | ||
| + | < | ||
| + | <style type=" | ||
| + | p {color: | ||
| + | .center {display: block; margin: 0 auto;} | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | **Преимущества глобальных CSS:** | ||
| + | - Таблица стилей влияет только на одну страницу. | ||
| + | - В глобальной CSS могут быть использованы классы и идентификаторы (ID). | ||
| + | - Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле. | ||
| + | **Недостатки глобальных CSS:** | ||
| + | - Увеличенное время загрузки страницы. | ||
| + | ==== Вариант 2 — Внешний CSS ==== | ||
| + | Более удобный вариант для подключения CSS к вашему сайту, это его привязка к внешнему .css файлу. В этом случае все изменения сделанные во внешнем CSS файле, будут в целом отражаться на вашем сайте. Ссылка на внешний CSS файл помещается в контейнер < | ||
| + | < | ||
| + | <link rel=" | ||
| + | </ | ||
| + | </ | ||
| + | **Преимущества внешних CSS:** | ||
| + | - Меньший размер страницы HTML и более чистая структура файла. | ||
| + | - Для разных страниц может быть использован один и тот же .css файл. | ||
| + | **Недостатки внешних CSS:** | ||
| + | - Страница может некорректно отображаться до полной загрузки внешнего CSS. | ||
| + | |||
| + | ==== Вариант 3 — Внутренний CSS ==== | ||
| + | Внутренний CSS используется для конкретного тега HTML при помощи атрибута < | ||
| + | <file css> | ||
| + | < | ||
| + | <body style=" | ||
| + | |||
| + | <h1 style=" | ||
| + | <p style=" | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ===== Приоритет применения правил стилей в CSS ===== | ||
| + | * [[http:// | ||
| + | * [[http:// | ||
| + | |||
| + | Если какие-то свойства [[HTML5|HTML]]- элемента не определены они будут унаследованы от родительского элемента или примут значения по умолчанию. | ||
| + | |||
| + | В каскадных таблицах стилей CSS расчет приоритетности селекторов происходит в таком порядке (от большего к меньшему). | ||
| + | <note important> | ||
| + | |||
| + | - Свойство объявленное с признаком **!important** | ||
| + | - Стиль прописан в самом теге элемента. В этом случае описание стиля как бы находиться " | ||
| + | - Присутствие #ID (идентификаторов) в селекторе (чем больше, | ||
| + | - Наличие .class (классов) и : | ||
| + | - Селекторы с наименованиями тегов (тоже - чем больше, | ||
| + | |||
| + | ===== Единицы измерения CSS ===== | ||
| + | Относительные размеры: | ||
| + | * em - ems, высота используемого элементом шрифта. 1em равен размеру шрифта родителя(то же, что и 100%) | ||
| + | * ex - x-height, высота строчной буквы " | ||
| + | * % - относительные значения(например +15%) | ||
| + | Абсолютные размеры: | ||
| + | * px - pixels, пикселы | ||
| + | * in - inches, дюймы | ||
| + | * cm - centimeters, | ||
| + | * mm - millimeters, | ||
| + | * pt - points, пункты(1pt = 1/72in = 0,35mm) | ||
| + | * pc - picas, пики(1pc = 12pt) | ||
| + | |||
| + | Основным назначением стилей CSS является отделение структуры документа от его представления и расширение возможностей визуального оформления элементов [[HTML5]]. | ||
| + | |||
| + | ===== CSS - вывод на печать ===== | ||
| + | |||
| + | Если в файле css не задан тип media, то его смогут прочитать все средства, | ||
| + | <file css> | ||
| + | @media print{ | ||
| + | *{ | ||
| + | color: #000 !important; | ||
| + | background: transparent !important; | ||
| + | } | ||
| + | html{ | ||
| + | font: 10pt sans-serif; | ||
| + | } | ||
| + | a[href]: | ||
| + | / | ||
| + | content: " (" | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | |||
| + | ====== Оформление текста: | ||
| + | * [[http:// | ||
| + | |||
| + | CSS дают дизайнеру большие возможности по форматированию шрифтов: | ||
| + | |||
| + | * Свойство **font-family**: | ||
| + | * Свойство **font-size**: | ||
| + | * Свойство **font-weight**: | ||
| + | * Свойство **font-style**: | ||
| + | * Свойство **color**: цвет символов; | ||
| + | * Свойство **font-variant**: | ||
| + | * Свойство **text-decoration**: | ||
| + | * Свойство **text-transform**: | ||
| + | |||
| + | < | ||
| + | |||
| + | Свойство font-family Это свойство применяется для указания используемого шрифта или семейства шрифтов. Например, | ||
| + | <p style=" | ||
| + | </ | ||
| + | Однако, | ||
| + | p { | ||
| + | font-family: | ||
| + | } | ||
| + | </ | ||
| + | Тогда браузер попытается отобразить текст первым шрифтом из списка. Если указанный шрифт на компьютере отсутствует, | ||
| + | |||
| + | Но и в этом случае остается вероятность (пусть и небольшая) отсутствия всех перечисленных шрифтов на компьютере пользователя! Что же делать тогда? Необходимо завершать список указанием имени семейства, | ||
| + | |||
| + | - serif - антиква, | ||
| + | - sans-serif - гельветика, | ||
| + | - monospace - моноширный, | ||
| + | <note tip> | ||
| + | <p style=" | ||
| + | </ | ||
| + | * Свойство font-size. C помощью данного свойства можно указать размер шрифта. Размер шрифта принято указывать в специальных единицах - пунктах(pt, | ||
| + | * Свойство color | ||
| + | Цвет символов текста можно указать, | ||
| + | |||
| + | < | ||
| + | <p style=" | ||
| + | <p style=" | ||
| + | </ | ||
| + | В обоих случаях цвет текста будет красным. | ||
| + | |||
| + | ===== Размер шрифта ===== | ||
| + | |||
| + | < | ||
| + | < | ||
| + | font-size: normal | ||
| + | font-size: 12pt | ||
| + | font-size: 12px | ||
| + | font-size: 120% | ||
| + | </ | ||
| + | |||
| + | ====== CSS цвет: RGB, RGBA полупрозрачность | ||
| + | * [[http:// | ||
| + | * [[Графика для WEB-дизайна]]: | ||
| + | * [[http:// | ||
| + | |||
| + | CSS3 позволяет задавать цвет, используя функции [[RGB]] и RGBA. При этом мы должны указать долю каждой цветовой составляющей, | ||
| + | background: rgb( 0, 255, 0); /* чистый зеленый цвет */ | ||
| + | </ | ||
| + | background: rgba( 255, 0, 0, 0.5); /* чистый красный с прозрачностью 50% */ | ||
| + | </ | ||
| + | <p>It is html code.</ | ||
| + | <div id=" | ||
| + | </ | ||
| + | p { color: #0099FF; } | ||
| + | #tst { | ||
| + | background-color: | ||
| + | color: blue; | ||
| + | width: | ||
| + | height: | ||
| + | position: | ||
| + | top:0; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | ====== background - управление фоном элемента | ||
| + | |||
| + | Фоновый цвет или рисунок можно назначить любому элементу страницы. Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: | ||
| + | |||
| + | Ниже приводится перечень стилей CSS для управления фоном: | ||
| + | |||
| + | * background-color: | ||
| + | * background-image: | ||
| + | * background-attachment: | ||
| + | * background-repeat: | ||
| + | * background-position: | ||
| + | |||
| + | * **Пример 1. Использование фонового изображения страницы.** | ||
| + | |||
| + | Следующий пример демонстрирует использование фонового изображения и цвета страницы: | ||
| + | <file html> | ||
| + | <body style=" | ||
| + | font-style: italic; font-size: 14pt;"> | ||
| + | |||
| + | <h1 style=" | ||
| + | < | ||
| + | Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: | ||
| + | а как назначить фоновый цвет или рисунок < | ||
| + | стиль для элемента < | ||
| + | </p> | ||
| + | </ | ||
| + | В качестве фонового изображения используется рисунок размерами 25x25 пикселей. Браузер автоматически повторяет рисунок, | ||
| + | |||
| + | **Пример 2. Управление повторением и позицией.** | ||
| + | |||
| + | По умолчанию, | ||
| + | <file html> | ||
| + | <body style=" | ||
| + | background-color: | ||
| + | </ | ||
| + | |||
| + | **Пример 3. Позиционирование фонового изображения.** | ||
| + | |||
| + | Если после отмены повторения фонового рисунка у вас появилось желание расположить его по центру страницы, | ||
| + | <file html> | ||
| + | <body style=" | ||
| + | background-image: | ||
| + | font-style: italic; font-size: 14pt;"> | ||
| + | </ | ||
| + | Указать положение фонового рисунка можно, задав его координаты по горизонтали и вертикали, | ||
| + | |||
| + | **Пример 4. Привязка фонового изображения.** | ||
| + | |||
| + | Если в теле документа, | ||
| + | <file html> | ||
| + | <body style=" | ||
| + | background-repeat: | ||
| + | background-color: | ||
| + | </ | ||
| + | ====== border-radius - лимон, круг средствами CCS ====== | ||
| + | |||
| + | Пример рисует лимон средствами CCS3 | ||
| + | <file css> | ||
| + | <div class=" | ||
| + | < | ||
| + | .lemon { | ||
| + | width: 200px; height: 200px; | ||
| + | background: #F5F240; | ||
| + | border: 1px solid #F0D900; | ||
| + | border-radius: | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | <file css> | ||
| + | <div class=" | ||
| + | < | ||
| + | .circle { | ||
| + | width: 200px; height: 200px; | ||
| + | background: #F5F240; | ||
| + | border: 10px solid #F0D900; | ||
| + | border-radius: | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
css.txt · Последнее изменение: 2020/06/13 13:45 (внешнее изменение)