Перевод Rails Tutorial by Michael Hartl

5.1.2 Пользовательские CSS

В Разделе 5.1.1, вы могли заметить, что элементы CSS семантичны, то есть, обозначающие их слова, имеют значение в английском языке за пределами структуры страницы. Например, вместо того чтобы писать, что навигационное меню было “right-top” мы использовали “nav”. Это дает нам значительную гибкость при построении шаблона на основе CSS.

Давайте начнем с заполнения файла custom.css кодом из Листинга 5.3. (В Листинге 5.3. содержится немало правил. Чтобы получить представление о том, что именно делает каждое конкретное правило CSS, часто бывает полезным, закомментировать его с помощью CSS комментария, т. е., поместить его в /* … */, и посмотреть, что изменилось. ¹⁰)

  .container {
    width: 710px;
  }

  body {
    background: #cff;
  }

  header {
    padding-top: 20px;
  }

  header img {
    padding: 1em;
    background: #fff;
  }

  section {
    margin-top: 1em;
    font-size: 120%;
    padding: 20px;
    background: #fff;
  }

  section h1 {
    font-size: 200%;
  }

  /* Links */

  a {
    color: #09c;
    text-decoration: none;
  }

  a:hover {
    color: #069;
    text-decoration: underline;
  }

  a:visited {
    color: #069;
  }

Вы можете видеть результат работы этого CSS в Рис. 5.4. Здесь очень много CSS, но он имеет последовательную форму. Каждое правило относится либо к классу, ID, тегу HTML, или какой-либо их комбинации и сопровождается списком "стильных" команд. Например,

  body { 
  background: #cff; 
  } 

изменяет цвета фона body тега на голубой, а

  header img { 
    padding: 1em; 
    background: #fff; 
  } 

устанавливает ширину внутреннего отступа (padding) в один (одну) em (примерно ширина буквы M), вокруг изображения (img) внутри header тега. Это правило также делает цвет фона белым (#fff).⁶ Аналогичным образом,

  .container { 
    width: 710px; 
  } 

стилизует элемент с классом container, в данном случае, придавая ему ширину в 710 пикселов (что соответствует 18 столбцам Blueprint).⁷ Точка . в .container обозначает что это правило для класса называемого “container”. (как мы увидим в Разделе 8.2.3, знак фунт # указывает (также как и точка в случае CSS класса), что это правило для id.)

Изменение цвета это хорошо, но навигационные ссылки по-прежнему висят внизу по левой стороне страницы. Давайте переместим их в другое место и дадим им лучшую внешность с навигационными правилами из Листинга 5.4. Результаты в Рис. 5.5. (В некоторых примерах кода, включая Листинг 5.4, Я использую три вертикальные точки для обозначения пропущенного кода. Вашему приложению эти точки не нужны.)

  .
  .
  .
  /* Navigation */

  nav {
    float: right;
  }

  nav {
    background-color: white;
    padding: 0 0.7em;
    white-space: nowrap;
  }

  nav ul {
    margin: 0;
    padding: 0;
  }

  nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 0.2em 0;
  }

  nav ul li a {
    padding: 0 5px;
    font-weight: bold;
  }

  nav ul li a:visited {
    color: #09c;
  }

  nav ul li a:hover {
    text-decoration: underline;
  }

Здесь nav ul стилизует ul тег внутри nav тега, nav ul li стилизует li тег внутри ul тега внутри nav тега, и так далее.

В качестве предпоследнего шага, мы сделаем ссылку на страницу регистрации на нашем сайте немного более очевидной. (Хотя на примере приложения нас это мало тревожит, на каком-либо реальном сайте это, естественно, очень важно — сделать регистрационную ссылку как можно более заметной.) Листинг 5.5 показывает CSS, который делает регистрационную ссылку большой, зеленой и кликабельной (клик в любом месте внутри бокса отправит по ссылке).

  .
  .
  .

  /* Sign up button */

  a.signup_button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    width: 190px;
    color: #fff;
    background: #006400;
    font-size: 150%;
    font-weight: bold;
    padding: 20px;
  }

Здесь целая куча правил; как обычно, закомментируйте любую строку и перезагрузите страницу, если вы хотите увидеть, что она делает. Конечным результатом является регистрационная ссылка, которую трудно не заметить (Рис. 5.6).

В качестве последнего штриха, мы задействуем round класс, который мы присвоили многим элементам нашего сайта. Хотя в нынешних острых углах блоков нет ничего страшного, смягчение углов придаст интерфейсу бОльшую дружелюбность. Мы можем сделать это, используя CSS код из Листинга 5.6, результаты показаны на Рис. 5.7.

  .
  .
  .
  /* Round corners */

  .round {
    -moz-border-radius:    10px;
    -webkit-border-radius: 10px;
    border-radius:         10px;
  }

Стоит отметить, что этот трюк работает в Firefox, Safari, Opera, и во многих других браузерах, но это не работает в Internet Explorer. Есть способы получения скругленных углов, которые работают во всех браузерах, но нет никакой другой техники, которая хотя бы приблизилась к той легкости, с которой мы это только что проделали, так что мы просто рискнем оставить наших пользователей IE с несколькими крошечными порезами (от острых углов).