Различия

Показаны различия между двумя версиями страницы.


Предыдущая версия
—css [2025/07/06 12:38] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== CSS ======
 +
 +~~Title: Основы работы с CSS ~~
 +{{htmlmetatags>
 +metatag-description=(Подключение стилей CSS к HTML 3 способа. Приоритет применения правил стилей в CSS. Единицы измерения CSS. Использование CSS цвет: RGB, RGBA полупрозрачность. Примеры использования CSS.)
 +}}
 +
 +{{ :html-css.jpg?nolink&400 |}}
 +
 +  * [[https://www.w3.org/TR/CSS2/|Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]]
 +  * [[https://www.w3.org/TR/css-color-3/|CSS Color Module Level 3]] стандарт предоставляет новые способы определения цветов и прозрачности для текста, рамок и фона.
 +  * [[out>https://www.w3.org/TR/netinfo-api/|The Network Information API]] черновой вариант спецификации, позволяющей web- приложениям получить доступ к информации о состоянии сети, такой как тип соединения текущего устройства, а также позволяет отследить события потери и возобновления сетевого соединения.
 +
 +  * [[Селекторы]] CSS3, jQuery.
 +  * [[Верстка]] веб-страниц. Позиционирование элемента: position, float.
 +  * [[Site navigation menu|Меню навигации сайта]]
 +  * [[teaser]]
 +
 +===== Подключение стилей CSS к HTML 3 способа =====
 +==== Вариант 1 — Глобальный CSS ====
 +
 +Глобальные CSS помещаются между тегами <style></style> в контейнерe <head></head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Пример глобальной таблицы стилей:
 +
 +<file css>
 +<head>
 +  <style type="text/css">
 +    p {color:white; font-size: 10px;}
 +    .center {display: block; margin: 0 auto;}
 +  </style>
 +</head>
 +</file>
 +**Преимущества глобальных CSS:**
 +  - Таблица стилей влияет только на одну страницу.
 +  - В глобальной CSS могут быть использованы классы и идентификаторы (ID).
 +  - Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.
 +**Недостатки глобальных CSS:**
 +  - Увеличенное время загрузки страницы.
 +==== Вариант 2 — Внешний CSS ====
 +Более удобный вариант для подключения CSS к вашему сайту, это его привязка к внешнему .css файлу. В этом случае все изменения сделанные во внешнем CSS файле, будут в целом отражаться на вашем сайте. Ссылка на внешний CSS файл помещается в контейнер <head> страницы, а сами таблицы стилей располагаются в файле style.css. Пример:<file css>
 +<head>
 +  <link rel="stylesheet" href="assets/css/style.css">
 +</head>
 +</file>
 +**Преимущества внешних CSS:**
 +  - Меньший размер страницы HTML и более чистая структура файла.
 +  - Для разных страниц может быть использован один и тот же .css файл.
 +**Недостатки внешних CSS:**
 +  - Страница может некорректно отображаться до полной загрузки внешнего CSS.
 +
 +==== Вариант 3 — Внутренний CSS ====
 +Внутренний CSS используется для конкретного тега HTML при помощи атрибута <style>.
 +
 +<panel type="success">Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности.</panel>
 +
 +<file css>
 +<html>
 +<body style="background-color:black;">
 +
 +<h1 style="color:white;padding:30px;">Внутренний CSS</h1>
 +<p style="color:white;">Не используйте внутренний CSS.</p>
 +
 +</body>
 +</html>
 +</file> 
 +===== Приоритет применения правил стилей в CSS =====
 +  * [[http://www.w3.org/TR/CSS2/cascade.html#cascading-order|CSS 2.1 Specification: CCascading order]]
 +
 +
 +Если какие-то свойства [[HTML5|HTML]]- элемента не определены они будут унаследованы от родительского элемента или примут значения по умолчанию.
 +
 +В каскадных таблицах стилей CSS расчет приоритетности селекторов происходит в таком порядке (от большего к меньшему).
 +<note important>Свойство объявленное с признаком **!important** (!важно) имеет наивысший приоритет, все другие похожие свойства для такого элемента не берутся во внимание, не зависимо от того, где они объявлены: или в файле стилей, или в теге <style> веб-документа, или непосредственно в теге элемента.</note>
 +
 +  - Свойство объявленное с признаком **!important**
 +  - Стиль прописан в самом теге элемента. В этом случае описание стиля как бы находиться "наиболее близко" к тегу элемента.
 +  - Присутствие #ID (идентификаторов) в селекторе (чем больше, тем выше приоритет селектора). Напомним, что стиль #ID селектора может задаваться только одному элементу на странице.
 +  - Наличие .class (классов) и :pseudo-class (псевдоклассов) в селекторе (чем больше - выше приоритет селектора). Правила стиля, объявленные как класс могут применяться ко многим элементам веб-документа.
 +  - Селекторы с наименованиями тегов (тоже - чем больше, тем выше приоритет селектора). Они имеют самый низкий приоритет.
 +
 +===== Единицы измерения CSS =====
 +Относительные размеры:
 +  * em - ems, высота используемого элементом шрифта. 1em равен размеру шрифта родителя(то же, что и 100%)
 +  * ex - x-height, высота строчной буквы "х" используемого элементом шрифта. x-height называется так, потому что она часто равна высоте "x" нижнего регистра. Однако ‘ex’ определены даже для тех шрифтов, которые не содержат "x".
 +  * % - относительные значения(например +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, то его смогут прочитать все средства, предназначенные для вывода информации. Если же есть необходимость указания отдельного устройства, для которого предназначена страница, то нужно явно задать атрибут media. Он может иметь следующие значения: print (принтер), handheld(Handheld PC(H/PC)), screen(монитор) и другие. Ниже пример, который при печати на принтер дополнительно в скобках печатает непосредственно ссылку на ресурс (href), а не только название ссылки.
 +<file css>
 +@media print{
 +    *{
 +        color: #000 !important;
 +        background: transparent !important;
 +    }
 +    html{
 +        font: 10pt sans-serif;
 +    }
 +    a[href]:after{
 +        /*вывести скрытое содержимое, то есть саму ссылку*/
 +        content: " ("attr(href) ")";
 +    }
 +}
 +</file>
 +
 +
 +====== Оформление текста: шрифт, стиль, размер шрифта ======
 +  * [[http://ab-w.net/CSS/css_font.php|CSS шрифт, стиль и размер шрифта]]
 +
 +CSS дают дизайнеру большие возможности по форматированию шрифтов: 
 +
 +  * Свойство **font-family**: название шрифта; 
 +  * Свойство **font-size**: размер; 
 +  * Свойство **font-weight**: normal | bold; - жирность начертания 
 +  * Свойство **font-style**: normal | italic; - курсив 
 +  * Свойство **color**: цвет символов;
 +  * Свойство **font-variant**: small-caps; - делает все буквы заглавными, работает только small-caps
 +  * Свойство **text-decoration**: underline; - перечеркивает, подчеркивает, надчеркивает текст
 +  * Свойство **text-transform**: capitalize; - позволяет, например первую букву у всех слов сделать заглавной
 +
 +<note>Свойства font-weight и font-style заменяют элементы b и i соответственно.</note>
 +
 +Свойство font-family Это свойство применяется для указания используемого шрифта или семейства шрифтов. Например, присвоим шрифт "Comic Sans MS" элементу абзаца. Текст абзаца будет выведен шрифтом "Comic Sans MS".<file css>
 +<p style="font-family: Comic Sans MS;">test</p>
 +</file>
 +Однако, нет никаких гарантий, что используемый вами шрифт будет на компьютере остальных пользователей, ведь на каждом из них может быть установлен свой набор шрифтов, и есть лишь несколько шрифтов, которые присутствуют на большинстве (но не на всех!) компьютерах. Как же поступить в этом случае? Можно указать не один шрифт, а несколько, перечисляя их через ",":<file css>
 +p {
 +    font-family: "Century Gothic", Tahoma, Arial;
 +}
 +</file> 
 +Тогда браузер попытается отобразить текст первым шрифтом из списка. Если указанный шрифт на компьютере отсутствует, будет сделана попытка воспользоваться вторым из списка. Если и второй будет недоступен, браузер попробует использовать следующий — третий. Потом — четвёртый, пятый и так далее. 
 +
 +Но и в этом случае остается вероятность (пусть и небольшая) отсутствия всех перечисленных шрифтов на компьютере пользователя! Что же делать тогда? Необходимо завершать список указанием имени семейства, к которому относятся перечисленные шрифты. Ниже приводятся названия семейств и несколько относящихся к ним шрифтов: 
 +
 +  - serif - антиква, шрифты с "засечками". Наиболее распространенный пример - Times New Roman. К этому семейству относятся так же Bookman Old Style, Garamond, Georgia, Minion Web.
 +  - sans-serif - гельветика, шрифты "рубленные" или без "засечек". Наиболее распространенные шрифты этого семейства Arial, Tahoma, Verdana, Century Gothic, Franklin Gothic, Impact.
 +  - monospace - моноширный, с одинаковой шириной знакоместа для каждого символа. Наиболее известные шрифты данного семейства - Courier, Courier New, Lucida Console, Monotype.com. 
 +<note tip>Для того, чтобы избежать неприятной ситуации и нежелательной смены стилистики оформления шрифта ваших страниц на компьютерах других пользователей, список шрифтов завершаем указанием имени соответствующего семейства. <file>
 +<p style="font-family: Century Gothic, Tahoma, Arial, sans-serif;"></p>
 +</file></note>
 +  * Свойство font-size. C помощью данного свойства можно указать размер шрифта. Размер шрифта принято указывать в специальных единицах - пунктах(pt, 1pt = 1/72 дюйма). Однако, нет препятствий для использования других единиц измерения, таких как дюйм (in), сантиметр (cm), миллиметр (mm) и, наконец, пиксель (px). Название единицы измерения должно следовать сразу за величиной размера.
 +  * Свойство color
 +Цвет символов текста можно указать, используя свойство color. При этом цвет вожет быть задан как названием, так и с помощью палитры web цветов: 
 +
 +<file>
 +<p style="color: red;"> ... 
 +<p style="color: #FF0000;"> ...
 +</file> 
 +В обоих случаях цвет текста будет красным.
 +
 +===== Размер шрифта =====
 +
 +<note>Когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид | Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток читателю простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах.</note>
 +<file>
 +font-size: normal
 +font-size: 12pt
 +font-size: 12px
 +font-size: 120% 
 +</file>
 +
 +====== CSS цвет: RGB, RGBA полупрозрачность  ======
 +  * [[http://www.artlebedev.ru/tools/colors/|Таблица «безопасных» цветов]] - эти 216 цветов RGB везде будут отображаться правильным образом и без искажений (могут быть использован для графики, текста и фонов).
 +  * [[Графика для WEB-дизайна]]: JPEG, GIF, SVG, Flash, PNG. Редакторы.
 +  * [[http://xiper.net/collect/html-and-css-tricks/css-tricks/rgba|RGBA — CSS полупрозрачность]]
 +
 +CSS3 позволяет задавать цвет, используя функции [[RGB]] и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255). Синтаксис RGB<file css>
 +background: rgb( 0, 255, 0);  /* чистый зеленый цвет */
 +</file>Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).<file css>
 +background: rgba( 255, 0, 0, 0.5);  /* чистый красный с прозрачностью 50% */
 +</file>**Пример**:<file html>
 +<p>It is html code.</p>
 +<div id="tst">Transparent</div>
 +</file><file css>
 +p { color: #0099FF; }
 +#tst {
 +  background-color:rgba(100,100,100,.8);
 +  color: blue;
 +  width:300px;
 +  height:400px;
 +  position:absolute;
 +  top:0;
 +}
 +</file>
 +
 +====== background - управление фоном элемента  ======
 +
 +Фоновый цвет или рисунок можно назначить любому элементу страницы. Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: а как назначить фоновый цвет или рисунок всей странице? Правильно - использовать стиль для элемента body. 
 +
 +Ниже приводится перечень стилей CSS для управления фоном: 
 +
 +  * background-color: цвет; - фоновый цвет элемента
 +  * background-image: url(адрес); - фоновое изображение элемента
 +  * background-attachment: fixed | scroll; - закрепление фонового изображения
 +  * background-repeat: repeat | repeat-x | repeat-y | no-repeat; - способ повторения фонового изображения
 +  * background-position: x y; - позиционирование фонового изображения. 
 +
 +  * **Пример 1. Использование фонового изображения страницы.**
 +
 +Следующий пример демонстрирует использование фонового изображения и цвета страницы: 
 +<file html>
 +<body style="background-image: url(bg_01.gif); background-color: #ffffff;
 +font-style: italic; font-size: 14pt;">
 +
 +<h1 style="text-align: center;">Фоновый рисунок страницы</h1>
 +<p>Итак, фоновый цвет или рисунок можно назначить любому элементу страницы. 
 +Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: 
 +а как назначить фоновый цвет или рисунок <b>всей</b> странице? Правильно - использовать 
 +стиль для элемента <b>body</b>.
 +</p>
 +</file>
 +В качестве фонового изображения используется рисунок размерами 25x25 пикселей. Браузер автоматически повторяет рисунок, заполняя им все пространство элемента (страницы). 
 +
 +**Пример 2. Управление повторением и позицией.**
 +
 +По умолчанию, браузер автоматически повторяет рисунок, заполняя им все пространство элемента. Этим процессом можно управлять с помощью свойства стиля background-repeat: Можно прекратить повторение фонового рисунка, например, присвоив элементу стиль background-repeat: no-repeat: 
 +<file html>
 +<body style="background-repeat: no-repeat; background-image: url(bg_02.jpg);
 +background-color: #ffffff; font-style: italic; font-size: 14pt;">
 +</file>
 +
 +**Пример 3. Позиционирование фонового изображения.**
 +
 +Если после отмены повторения фонового рисунка у вас появилось желание расположить его по центру страницы, воспользуйтесь свойством стиля background-position: 
 +<file html>
 +<body style="background-position: 50% 0%; background-repeat: no-repeat;
 +background-image: url(bg_02-1.jpg); background-color: #ffffff; 
 +font-style: italic; font-size: 14pt;">
 +</file>
 +Указать положение фонового рисунка можно, задав его координаты по горизонтали и вертикали, разделив их пробелом. Можно использовать проценты. Так, координаты 0% 0% означают размещение изображения в верхнем левом углу, 50% 50% - по центру страницы и т.д. 
 +
 +**Пример 4. Привязка фонового изображения.**
 +
 +Если в теле документа, снабженного фоновым изображением, разместить настолько большой фрагмент текста, что появится полоса прокрутки, то прокручиваться будет не только текст, но и фон страницы. Прокрутку фонового изображения можно отменить, если задать стилевое правило background-attachment: fixed.
 +<file html>
 +<body style="background-attachment: fixed; background-position: 20 20; 
 +background-repeat: no-repeat; background-image: url(bg_02-1.jpg); 
 +background-color: #ffffff; font-style: italic; font-size: 14pt;">
 +</file>
 +====== border-radius - лимон, круг средствами CCS ======
 +
 +Пример рисует лимон средствами CCS3
 +<file css>
 +<div class="lemon"></div>
 +<style>
 +    .lemon {
 +        width: 200px; height: 200px;
 +        background: #F5F240;
 +        border: 1px solid #F0D900;
 +        border-radius: 10px 150px 30px 150px;
 +    }
 +</style>
 +</file>
 +<file css>
 +<div class="circle"></div>
 +<style>
 +    .circle {
 +        width: 200px; height: 200px;
 +        background: #F5F240;
 +        border: 10px solid #F0D900;
 +        border-radius: 50%;
 +    }
 +</style>
 +</file>
  

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга