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"] { fontsize: 10px; } |
В данном примере, сначала указывается стиль для всех картинок, у которых присутствует атрибут 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 – это аббревиатура, и расшифровывается она как RedGreenBlue, то есть КрасныйЗеленыйСиний. Таким образом, любой цвет можно получить, смешав эти три цвета.
Функциональный 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.