Содержание

CSS

Подключение стилей CSS к HTML 3 способа

Вариант 1 — Глобальный CSS

Глобальные CSS помещаются между тегами <style></style> в контейнерe <head></head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Пример глобальной таблицы стилей: 

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
  </style>
</head>

Преимущества глобальных CSS:

  1. Таблица стилей влияет только на одну страницу.
  2. В глобальной CSS могут быть использованы классы и идентификаторы (ID).
  3. Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

  1. Увеличенное время загрузки страницы.

Вариант 2 — Внешний CSS

Более удобный вариант для подключения CSS к вашему сайту, это его привязка к внешнему .css файлу. В этом случае все изменения сделанные во внешнем CSS файле, будут в целом отражаться на вашем сайте. Ссылка на внешний CSS файл помещается в контейнер <head> страницы, а сами таблицы стилей располагаются в файле style.css. Пример: 

<head>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

Преимущества внешних CSS:

  1. Меньший размер страницы HTML и более чистая структура файла.
  2. Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

  1. Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 — Внутренний CSS

Внутренний CSS используется для конкретного тега HTML при помощи атрибута <style>.

Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности. 
<html>
<body style="background-color:black;">
 
<h1 style="color:white;padding:30px;">Внутренний CSS</h1>
<p style="color:white;">Не используйте внутренний CSS.</p>
 
</body>
</html>

Приоритет применения правил стилей в CSS

Если какие-то свойства HTML- элемента не определены они будут унаследованы от родительского элемента или примут значения по умолчанию.

В каскадных таблицах стилей CSS расчет приоритетности селекторов происходит в таком порядке (от большего к меньшему).

Свойство объявленное с признаком !important (!важно) имеет наивысший приоритет, все другие похожие свойства для такого элемента не берутся во внимание, не зависимо от того, где они объявлены: или в файле стилей, или в теге <style> веб-документа, или непосредственно в теге элемента.
  1. Свойство объявленное с признаком !important
  2. Стиль прописан в самом теге элемента. В этом случае описание стиля как бы находиться "наиболее близко" к тегу элемента.
  3. Присутствие #ID (идентификаторов) в селекторе (чем больше, тем выше приоритет селектора). Напомним, что стиль #ID селектора может задаваться только одному элементу на странице.
  4. Наличие .class (классов) и :pseudo-class (псевдоклассов) в селекторе (чем больше - выше приоритет селектора). Правила стиля, объявленные как класс могут применяться ко многим элементам веб-документа.
  5. Селекторы с наименованиями тегов (тоже - чем больше, тем выше приоритет селектора). Они имеют самый низкий приоритет.

Единицы измерения CSS

Относительные размеры:

Абсолютные размеры:

Основным назначением стилей CSS является отделение структуры документа от его представления и расширение возможностей визуального оформления элементов Использование HTML 5.

CSS - вывод на печать

Если в файле css не задан тип media, то его смогут прочитать все средства, предназначенные для вывода информации. Если же есть необходимость указания отдельного устройства, для которого предназначена страница, то нужно явно задать атрибут media. Он может иметь следующие значения: print (принтер), handheld(Handheld PC(H/PC)), screen(монитор) и другие. Ниже пример, который при печати на принтер дополнительно в скобках печатает непосредственно ссылку на ресурс (href), а не только название ссылки. 

@media print{
    *{
        color: #000 !important;
        background: transparent !important;
    }
    html{
        font: 10pt sans-serif;
    }
    a[href]:after{
        /*вывести скрытое содержимое, то есть саму ссылку*/
        content: " ("attr(href) ")";
    }
}

Оформление текста: шрифт, стиль, размер шрифта

CSS дают дизайнеру большие возможности по форматированию шрифтов:

Свойства font-weight и font-style заменяют элементы b и i соответственно.

Свойство font-family Это свойство применяется для указания используемого шрифта или семейства шрифтов. Например, присвоим шрифт "Comic Sans MS" элементу абзаца. Текст абзаца будет выведен шрифтом "Comic Sans MS". 

<p style="font-family: Comic Sans MS;">test</p>

Однако, нет никаких гарантий, что используемый вами шрифт будет на компьютере остальных пользователей, ведь на каждом из них может быть установлен свой набор шрифтов, и есть лишь несколько шрифтов, которые присутствуют на большинстве (но не на всех!) компьютерах. Как же поступить в этом случае? Можно указать не один шрифт, а несколько, перечисляя их через ",": 

p {
    font-family: "Century Gothic", Tahoma, Arial;
}

Тогда браузер попытается отобразить текст первым шрифтом из списка. Если указанный шрифт на компьютере отсутствует, будет сделана попытка воспользоваться вторым из списка. Если и второй будет недоступен, браузер попробует использовать следующий — третий. Потом — четвёртый, пятый и так далее.

Но и в этом случае остается вероятность (пусть и небольшая) отсутствия всех перечисленных шрифтов на компьютере пользователя! Что же делать тогда? Необходимо завершать список указанием имени семейства, к которому относятся перечисленные шрифты. Ниже приводятся названия семейств и несколько относящихся к ним шрифтов:

  1. serif - антиква, шрифты с "засечками". Наиболее распространенный пример - Times New Roman. К этому семейству относятся так же Bookman Old Style, Garamond, Georgia, Minion Web.
  2. sans-serif - гельветика, шрифты "рубленные" или без "засечек". Наиболее распространенные шрифты этого семейства Arial, Tahoma, Verdana, Century Gothic, Franklin Gothic, Impact.
  3. monospace - моноширный, с одинаковой шириной знакоместа для каждого символа. Наиболее известные шрифты данного семейства - Courier, Courier New, Lucida Console, Monotype.com.
Для того, чтобы избежать неприятной ситуации и нежелательной смены стилистики оформления шрифта ваших страниц на компьютерах других пользователей, список шрифтов завершаем указанием имени соответствующего семейства. 
<p style="font-family: Century Gothic, Tahoma, Arial, sans-serif;"></p>

Цвет символов текста можно указать, используя свойство color. При этом цвет вожет быть задан как названием, так и с помощью палитры web цветов: 

<p style="color: red;"> ... 
<p style="color: #FF0000;"> ...

В обоих случаях цвет текста будет красным.

Размер шрифта

Когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид | Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток читателю простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах. 
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

CSS цвет: RGB, RGBA полупрозрачность

CSS3 позволяет задавать цвет, используя функции Цветовая модель RGB (sRGB) и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255). Синтаксис RGB 

background: rgb( 0, 255, 0);  /* чистый зеленый цвет */

Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1). 

background: rgba( 255, 0, 0, 0.5);  /* чистый красный с прозрачностью 50% */

Пример: 

<p>It is html code.</p>
<div id="tst">Transparent</div>
p { color: #0099FF; }
#tst {
  background-color:rgba(100,100,100,.8);
  color: blue;
  width:300px;
  height:400px;
  position:absolute;
  top:0;
}

background - управление фоном элемента

Фоновый цвет или рисунок можно назначить любому элементу страницы. Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: а как назначить фоновый цвет или рисунок всей странице? Правильно - использовать стиль для элемента body.

Ниже приводится перечень стилей CSS для управления фоном:

Следующий пример демонстрирует использование фонового изображения и цвета страницы: 

<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>

В качестве фонового изображения используется рисунок размерами 25x25 пикселей. Браузер автоматически повторяет рисунок, заполняя им все пространство элемента (страницы).

Пример 2. Управление повторением и позицией.

По умолчанию, браузер автоматически повторяет рисунок, заполняя им все пространство элемента. Этим процессом можно управлять с помощью свойства стиля background-repeat: Можно прекратить повторение фонового рисунка, например, присвоив элементу стиль background-repeat: no-repeat: 

<body style="background-repeat: no-repeat; background-image: url(bg_02.jpg);
background-color: #ffffff; font-style: italic; font-size: 14pt;">

Пример 3. Позиционирование фонового изображения.

Если после отмены повторения фонового рисунка у вас появилось желание расположить его по центру страницы, воспользуйтесь свойством стиля background-position: 

<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;">

Указать положение фонового рисунка можно, задав его координаты по горизонтали и вертикали, разделив их пробелом. Можно использовать проценты. Так, координаты 0% 0% означают размещение изображения в верхнем левом углу, 50% 50% - по центру страницы и т.д.

Пример 4. Привязка фонового изображения.

Если в теле документа, снабженного фоновым изображением, разместить настолько большой фрагмент текста, что появится полоса прокрутки, то прокручиваться будет не только текст, но и фон страницы. Прокрутку фонового изображения можно отменить, если задать стилевое правило background-attachment: fixed. 

<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;">

border-radius - лимон, круг средствами CCS

Пример рисует лимон средствами CCS3 

<div class="lemon"></div>
<style>
    .lemon {
        width: 200px; height: 200px;
        background: #F5F240;
        border: 1px solid #F0D900;
        border-radius: 10px 150px 30px 150px;
    }
</style>
<div class="circle"></div>
<style>
    .circle {
        width: 200px; height: 200px;
        background: #F5F240;
        border: 10px solid #F0D900;
        border-radius: 50%;
    }
</style>