Пара вопросов CSS.SRC: robot-or-not.com (CSS) - PullRequest
Новая
       43

Пара вопросов CSS.SRC: robot-or-not.com (CSS)

1 голос
/ 28 марта 2011 
  body {
    background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px;
    color: #45445d;
    color: rgba(0, 0, 0, 0.7);
    font: normal 100%/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    }

Это фрагмент кода из robot-or-not.com ..., представленный в статье под названием .. Отзывчивый веб-дизайн. У меня есть два вопроса о CSS в статье.

  • Если я хочу использовать их на сайте, который я понимаю, что мне нужен базовый шрифт размер, а затем отработать их ЦЕЛЬНЫЙ РАЗМЕР / ОСНОВНОЙ РАЗМЕР = EM. Я нужно тогда установить базовый размер шрифта в "PX" в теле сначала и в Код выше, что делает шрифт: 100% / 1,5 значит?

  • Мой второй вопрос о свойство фона .. что делает повторить "-20% -146px;" это значит / делать? Я знаю о повторении: не повторять и повторить-у, повторить-х, но никогда использовал% или PX для этого ..

Спасибо за любой совет или информацию заранее. Я надеюсь, что я достаточно ясно ..

1 Ответ

2 голосов
/ 28 марта 2011

Вам не нужно нужно"базовый размер". Размер шрифта по умолчанию настраивается пользователем в его / ее браузере. Это то, что браузер затем использует для 1em (или 100%).

Вы можете определить свой собственный "базовый размер" в теле (body { font-size: 12px }), а затем продолжить и использовать em s (или %) для других размеров шрифта, таких как h1 { font-size: 1.5em } вместо h1 { font-size: 18px } (12 пикселей * 1,5 = 18 пикселей). Это имеет для вас как для разработчика «преимущество» в том, что если вы решите изменить свой «базовый размер», то все остальные размеры шрифта (или другие значения em) будут соответственно масштабироваться.

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

100%/1.5 является частью font сокращенного свойства и является сокращением для настройки font-size: 100% и line-height: 1.5.

background также является коротким свойством, а background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px; распространяется на: 

background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;

background-position: -20% -146px означает, что левый верхний угол фонового изображения не расположен в левом верхнем углу его элемента, но он сдвинут на 20% ширины его элемента влево и на 146 пикселей вверх.

...