Инструменты пользователя

Инструменты сайта


css

Различия

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

Ссылка на это сравнение

css [2018/07/07 10:47] (текущий)
Строка 1: Строка 1:
 +====== CSS ======
 +
 +~~Title: Основы работы с CSS ~~
 +{{htmlmetatags>​
 +metatag-description=(Подключение стилей CSS к HTML 3 способа. Приоритет применения правил стилей в CSS. Единицы измерения CSS. Использование CSS цвет: RGB, RGBA полупрозрачность. Примеры использования CSS.)
 +}}
 +
 +{{:​html-css.jpg?​nolink&​200|}}
 +
 +  * [[http://​www.w3.org/​TR/​CSS2/​|Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]]
 +  * [[http://​www.w3.org/​TR/​2011/​REC-css3-color-20110607/​|CSS Color Module Level 3]] стандарт предоставляет новые способы определения цветов и прозрачности для текста,​ рамок и фона.
 +  * [[http://​www.w3.org/​TR/​netinfo-api/​|The Network Information API]] черновой вариант спецификации,​ позволяющей web- приложениям получить доступ к информации о состоянии сети, такой как тип соединения текущего устройства,​ а также позволяет отследить события потери и возобновления сетевого соединения.
 +
 +  * [[links|Ссылки]] на ресурсы,​ справочники. ​
 +  * [[Селекторы]] 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>​. <note warning>​Этот вариант подключения CSS не является рекомендованным,​ так как в этом случае необходимо настраивать каждый тег HTML по отдельности.</​note>​
 +<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]]
 +  * [[http://​profitinet.com/​css/​prior_css.php|Приоритетность применения правил стилей в CSS (Cascading Style Sheets)]]
 +
 +Если какие-то свойства [[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>​
  
загрузка...
css.txt · Последние изменения: 2018/07/07 10:47 (внешнее изменение)