Баннерная сеть

Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться

  2008-11-04 12:52
Для задания размеров различных
элементов, в CSS используются абсолютные и относительные единицы
измерения. Абсолютные единицы не зависят от устройства вывода, а
относительные единицы определяют размер элемента относительно
значения другого размера.


Относительные единицы

align=center border=1>














Единица Описание
em Высота шрифта элемента
ex Высота символа x
px Пиксел
% Процент



Практически все браузеры вычисляют значение class=element>ex как удвоенное em.
Возможно это и резонное приближение, но технически неверное.


border=0>



Пример 1. Использование относительных единиц


cellPadding=4 width="100%" border=1>



<html>
<head>

<style>
.em, .ex, .px, .percent {
font-family: Verdana, Arial, sans-serif }
.em {
font-size: 2em }
.ex { font-size: 4ex }
.px {
font-size: 30px }
.percent { font-size: 200%
}
</style>


<body>
<span class=em>Размер в
em</span>
<span class=ex>Размер в
ex</span>
<span class=px>Размер в
пикселях</span>
<span
class=percent>Размер в процентах</span>

</body>
</html>








.em {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.ex {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.px {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.percent {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.em {
FONT-SIZE: 2em
}
.ex {
FONT-SIZE: 4ex
}
.px {
FONT-SIZE: 30px
}
.percent {
FONT-SIZE: 200%
}

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

align=center border=1>

Размер в em
class=ex>Размер в ex
Размер в
пикселях
Размер в
процентах



Наиболее используемыми единицами являются пикселы и проценты. Но
они зависят от разрешения монитора, его размеров и других системных
настроек.


Абсолютные единицы

align=center border=1>

















Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)



Самой, пожалуй, распространенной единицей является пункт, который
используется для указания размера шрифта. Многие люди привыкли
задавать размер шрифта в текстовых редакторах, например, 12. А что
это число означает, не понимают. Так это именно пункты и есть, они
родные. Конечно они нам не родные, мы привыкли измерять все в
миллиметрах и подобных единицах, но пункт, пожалуй, единственная
величина из не метрической системы измерения, которая используется у
нас повсеместно. И все благодаря текстовым редакторам и издательским
системам.

border=0>



Пример 2. Использование абсолютных единиц


cellPadding=4 width="100%" border=1>



<html>
<head>

<style>
.in, .mm, .pt { font-family:
Verdana, Arial, sans-serif }
.in { font-size: 0.5in
}
.mm { font-size: 8mm }
.pt { font-size: 24pt
}
</style>


<body>
<span class=in>Размер в
дюймах</span>
<span class=mm>Размер в
миллиметрах</span>
<span class=pt>Размер
в
пунктах</span>
</body>
</html>







.in {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.mm {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.pt {
FONT-FAMILY: Verdana, Arial, sans-serif
}
.in {
FONT-SIZE: 0.5in
}
.mm {
FONT-SIZE: 8mm
}
.pt {
FONT-SIZE: 24pt
}

Результат использования абсолютных единиц измерения показан
ниже.

align=center border=1>

Размер в
дюймах
Размер в
миллиметрах
Размер в
пунктах



Примечание
Если размеры шрифта на странице заданы в
абсолютных единицах, то в опциях браузера эту величину изменить
нельзя. Поэтому, размер шрифтов лучше задавать в процентах, что
позволит делать их больше или меньше подбирая подходящий для
комфортного чтения.
Быстрый переход
  • Company
  • Overview
  • Facts and Figures
  • Why Us
  • Testimonials
  • Careers
  • Capabilities
  • Technology Centers
  • Microsoft .NET
  • Java EE
  • PHP
  • AJAX
  • Skill Set
  • Domain Expertise
  • Web 2.0
  • Rich Internet Applications
  • Business Continuity
  • Quality Management
  • Methodology
  • Services
  • Advanced Web Development
  • Web Application Development
  • Web and Enterprise Portal Development
  • Website Design and Development
  • Web-based Database Programming
  • Web-enabling Legacy Applications
  • Opensource Software Customization
  • Business Application Development
  • Content and Document Management
  • Secure Intranets / Extranets
  • Customer Relationship Management
  • Workflow Management
  • Supply Chain Management
  • Interactive Learning
  • Independent QA and Testing
  • Application Security Consulting
  • Graphic Design / Multimedia
  • Maintenance and Support
  • Outsourcing
  • Outsourcing Overview
  • Dedicated Teams
  • Security and IP Protection
  • Engagement Models
  • Portfolio
  • By Business Domain
  • Corporate / Info Websites
  • Communities and Networks
  • B2B / B2C Internet Portals
  • Retail / Ecommerce
  • Media Distribution
  • Workflow Management
  • Customer Management
  • Enterprise Collaboration
  • Supply Chain Management
  • eLearning / Online Training
  • By Technology Focus
  • Microsoft .NET
  • Java EE
  • PHP
  • By Solution Type
  • Websites
  • Web Applications
  • Enterprise Solutions
  • Contact
  • Contact Form
  • Get Free Evaluation
  • Call Me Back
  • Contact Info
  • Map

Copyright © KazLink. Все права защищены.

ICQ:
422879