Селекторы идентификаторов (id)

html	css
<p ​id​=​”first”​>​Цвет фона данного параграфа будет серым​</p>	#first ​{ background: ​#ccc​; }

 

В качестве селекторов, можно использовать идентификаторы. Определенному тегу в значении атрибута id указывается название, которое придумываем сами, а в селекторе, ставиться знак #, а затем это название. Очень важно запомнить следующее: идентификатор должен быть уникальным, т.е. нельзя задавать одно и то же имя двум и более элементам.

Селекторы классов (class)

html	css
<h1 ​class​=​”border”​>​Заголовок с рамкой​</h1> <p ​class​=​”border”​>​Параграф с рамкой​</p>	.border ​{ border: ​1px solid black​; }

 

Классы используются аналогично id, только вместо атрибута id, указывается атрибут class, а в селекторе вместо решетки, точка. Классы отличаются от идентификаторов тем, что применять один и тот же стиль к разным элементам.

Селекторы атрибутов

В качестве селекторов можно указывать атрибуты HTML тегов. Существует множество различных способов указывать селекторы атрибутов, но для начала мы не будем их все рассматривать, рассмотрим 2 примера. Остальные способы вы сможете найти в справочнике, если они вам понадобятся.

html	css
<img​ ​src​=​"pic.jpg"​ ​alt​=​"Фото"​> <input​ ​type​=​"text">	img​[​alt​]​ ​{ width​:​ ​100px​; } input​[​type​=​"text"​]​ ​{ font­​​size​:​ 10​px​; }

 

В данном примере, сначала указывается стиль для всех картинок, у которых присутствует атрибут title. Для этого название атрибута указывается в квадратных скобках, сразу после названия тега. 

Второй пример. Стиль будет применяться для всех тегов <input />, в значении атрибута type которого присутствует значение text, т.е. для всех обычных текстовых полей ввода.

 

Свойства стилей

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

В CSS существует достаточное количество единиц измерения, с помощью которых можно определять длину, ширину элементов, а также размеры шрифтов. Не все они используются в повседневной верстке, но вам нужно иметь представления о них. Единицы измерения подразделяются на относительные и абсолютные. Относительными единицами измерения называются единицы, которые могут изменяться в зависимости от различных факторов. К таким факторам относятся: разрешение монитора пользователя, ширина области просмотра (окна браузера), различные настройки пользователя. Относительные единицы измерения наиболее часто используются на веб­страницах.

Относительные единицы измерения

● px ­ пиксел;

● % ­ процент;

● em – высота текущего шрифта.

 

Пиксели

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения. Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например, размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей­неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми. 

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, браузер автоматически применяет масштабирование, чтобы обеспечить читаемость.

   + Четкость и понятность                        

  ­ Другие единицы могут устанавливать соотношения между различными размерами

Проценты

Проценты %, как и em – относительные единицы. Когда мы говорим «процент», то возникает вопрос – «Процент от чего?» Как правило, процент берётся от значения свойства родителя с тем же названием, но не всегда. Это очень важная особенность процентов, про которую, увы, часто забывают.

Относительно шрифта: em

1em – текущий размер шрифта.

 Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п. 

Размеры в em – относительные, они определяются по текущему контексту.

Абсолютные единицы измерения

● cm ­ сантиметр;

● mm – миллиметр;

● in ­ дюйм;

● pt ­ пункт; ● pc ­ пика.

К абсолютным единицам относятся единицы измерения, которые используются в обычной жизни. Но они в веб­страницах используются достаточно редко, поэтому их использовать крайне нежелательно.

 

Способы задания цветов

Цвета в CSS можно задавать 3 различными способами. Первый способ ­ задавать цвета, используя названия цветов на английском языке, например: red, green, blue, black, yellow, white и т.д. Но при таком подходе есть ограничения в выборе цвета, невозможно получить различные оттенки цветов. Для того, чтобы можно было выбрать один из более, чем 16 млн. цветов, нужно использовать способ выбора цвета: либо как функциональный RGB, либо шестнадцатеричный RGB. RGB – это аббревиатура, и расшифровывается она как Red­Green­Blue, то есть Красный­Зеленый­Синий. Таким образом, любой цвет можно получить, смешав эти три цвета.

Функциональный RGB

RGB(255, 130, 0) 0 ­ 255

RGB(100%, 70%, 0%) 0 – 100%

В этом случае, выбирается насыщенность любого из трех цветов в диапазоне от 0 ­ 255, или в процентах от 0 ­ 100%, и используется значение RGB, где в скобках через запятую перечисляется насыщенность каждого из 3­х цветов.

Шестнадцатеричный RGB

#FA96CF; 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

#FFAA00 => #FA0

Если использовать шестнадцатеричный RGB, то каждый цвет можно представить в виде пары значений, т.е. первый и второй символ ­ это красный цвет, третий и четвертый ­ это зеленый, пятый и шестой ­ синий. Каждый символ может быть представлен одним из шестнадцати знаков, от 0 до буквы F латинского алфавита. При шестнадцатиричном rgb перед кодом цвета ставится символ решетки, а дальше уже записывается сам код цвета. Если совпадают две буквы или цифры одного и того же цвета, то можно использовать сокращенную форму записи, т.е. каждый цвет будет состоять не из пары значений, а из одного значения, и в коде цвета будет 3 символа после знака решетки. При подборе цвета на первое время лучше использовать любой графический редактор, там можно выбрать любой нужный вам цвет из палитры, и редактор покажет код выбранного цвета, который можно скопировать и вставить на страницу.

Свойства стилей CSS.