CSS, - - - HTML5
Много CSS свойства изискват спецификация на дължината. В няколко примера работим със свойството width, което се използва за определяне на ширината на елемент, и свойството font-size, което се използва за задаване на размера на шрифта, използван за показване на съдържанието на елемента. Листинг 4-19 показва стил, който използва и двете свойства.
Когато посочвате дължина, обединявате броя на единиците и идентификатора на единиците, без интервали или други знаци между тях. В списъка посочих свойство за ширина от 5 см, което означава 5 единици, представени от идентификатора cm (сантиметри). По същия начин съм посочил свойство с размер на шрифта 20pt, което означава 20 единици, представени от идентификатора pt (точки, за които ще говорим в следващите раздели). CSS дефинира два вида мерни единици: абсолютна и относителна (по отношение на друго свойство). Ще ги обясня в следващите раздели.
Работа с абсолютни единици дължина
В предишния списък използвах cm и pt, които са примери за абсолютни единици (абсолютни стойности). Тези количества са реални измервателни уреди. CSS поддържа пет вида абсолютни стойности, които са описани в таблица 4-6.
Съвети
Може да се изненадате, че пикселите не са в таблицата с абсолютни единици. Това, което CSS всъщност се опитва да направи, е да прави пиксели относителни единици, въпреки че, както ще обясня по-нататък в тази глава, не всичко работи гладко. Можете да научите повече в раздела "Работа с пиксели".
Работа с относителни единици дължина
Единиците за относителна дължина са по-трудни за дефиниране и прилагане от абсолютните и те изискват твърд и кратък език, за да може тяхното значение да бъде еднозначно дефинирано. Относителните единици се измерват по отношение на други единици (спрямо други единици). За съжаление, езикът за спецификация на CSS не е достатъчно точен (проблем, който мъчи CSS в продължение на много години). Това означава, че CSS определя широка гама от интересни и полезни относителни единици, но не можете да използвате някои от тях, тъй като те нямат широка и последователна поддръжка на браузъра. Таблица 4-7 показва относителните единици, дефинирани в CSS, които работят в основните браузъри.
В следващите раздели ще ви покажа как да използвате тези единици за изразяване на дължина.
Работа с относителни единици размер на шрифта
Използвайки относителни единици, вие всъщност посочвате стойността на друга единица. Първите относителни единици, които ще разгледаме, са за размера на шрифта. Листинг 4-20 показва пример.
В този пример съм посочил стойност за свойството височина на 2em, което означава, че p елементите трябва да се обработват така, че височината на елемента на екрана да е два пъти размера на шрифта. Тази стойност се изчислява за всеки показан елемент. Зададох размера на шрифта по подразбиране на 15pt в елемента style и посочих вътрешна стойност 12pt за втория p елемент в документа. Можете да видите как браузърът изобразява тези елементи на Фигура 4-15.
Можете да използвате относителна единица, за да изразите величината на друга относителна единица. Листинг 4-21 показва пример, при който свойството височина се изразява в единици em. Тези единици em са получени от стойността на свойството font-size, което изразих с помощта на rem единици .