HTML, CSS. Вопросы новичков

Предлагаю вашему вниманию пополняемый сборник часто задаваемых вопросов новичков в веб-строительстве. Здесь будут рассматриваться вопросы, ответы на которые недостаточно объемны для отдельных статей, а также вопросы, ответы на которые присутствуют в других статьях, что позволит создать что-то вроде карты сайта.

Q: Как убрать подчеркивание гиперссылок?

A: Подчеркнутость гиперссылок задается CSS-стилем text-decoration:

text-decoration: underline;

Чтобы избавиться от подчеркивания, задайте этому стилю значение none:

a { text-decoration: none; }

Если вы не знаете, как использовать CSS-стили, обратитесь к статье "Каскадные таблицы стилей".

Q: Как изменить цвет гиперссылок? Почему часть ссылок на странице синие, а часть фиолетовые?

A: Гиперссылка имеет три дополнительных состояния, в которые она переходит при определенных событиях. Состояние hover наступает, когда на ссылку навели курсор мыши, состояние active — в тот момент, когда на ссылку нажали, но еще не загрузился контент, на который она ссылает (например, если нажать и не отпускать левую кнопку мыши). Посещенные ранее ссылки принимают состояние visited. Для каждого состояния можно задать отдельные CSS-стили, то есть по-разному настроить вид ссылок. В большинстве браузеров по умолчанию стили для гиперссылок задают им синий цвет и подчеркивание, а для состояния visited цвет переопределяется на фиолетовый. Как задать CSS-стили как для гиперссылок в общем, так и для их отдельных состояний рассказывается в статье "Стилизация гиперссылок".

Q: Как сделать ссылку, открывающую страницу в новой вкладке (в новом окне)?

A: Для этого необходимо ссылке задать атрибут target со значением _blank:

<a href="/" target="_blank">Главная страница в новом окне</a>

Q: Как запретить браузеру переносить текст на новую строку?

A: Действительно, бывает необходимо запретить переносить текст по строкам если он не помещается по ширине. Это можно сделать с помощью тега nobr:

<nobr>Этот текст гарантированно будет отображаться в одну строку</nobr>

Этого же можно добиться при помощи CSS-стиля white-space, заданного текстовому элементу-контейнеру. Например:

<span style="white-space: nowrap">Этот текст гарантированно будет отображаться в одну строку</span>

Второй вариант более предпочтителен.

Q: Почему не получается задать высоту 100% у элемента XHTML-страницы?

A: Рассмотрим небольшой пример. Есть страница, написанная на традиционном HTML:

<html> 
  <head> 
    <title>Страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <style type="text/css">
      .content { width: 100%; height: 100%; border: 1px solid #f33; background: #faa; }
    </style>
  </head>  
  <body> 
    <div class="content"></div>
  </body>  
</html>

В браузере она отображается в виде розового блока, растянутого по ширине и высоте на 100% (не учитывая поля страницы). Приведем этот код к стандарту XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Главная страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <style type="text/css">
      .content { width: 100%; height: 100%; border: 1px solid #f33; background: #faa; }
    </style>
  </head>  
  <body> 
    <div class="content"></div>
  </body>  
</html>

и снова посмотрим в браузере. Блок превратился в полоску шириной 100%, то есть проигнорировался стиль height. На самом деле, стиль не игнорируется, а игнорируется его процентное значение (это можно легко доказать, задав абсолютное значение, например, 200px). Относительное (процентное) значение высоты элемента определяется относительно высоты его родительского элемента. Таким образом, чтобы блок растянулся на всю страницу, нужно задать высоту элемента body 100%. Однако, этого будет недостаточно, так как высота элемента body — снова относительная величина. Если внимательно взглянуть на код страницы, можно увидеть еще один элемент самого верхнего уровня — html. Высота body вычисляется относительно высоты этого элемента. То есть, чтобы растянуть блок по высоте на 100% высоты страницы, нужно задать высоту элементов html и body также 100%:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Главная страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <style type="text/css">
      html, body { height: 100%; }
      .content { width: 100%; height: 100%; border: 1px solid #f33; background: #faa; }
    </style>
  </head>  
  <body> 
    <div class="content"></div>
  </body>  
</html>

Q: Почему в таблице двойные линии между ячейками? Как от этого избавиться?

A: Ответ на этот вопрос вы можете найти в статье "Стилизация таблиц".

Комментарии

Оставить комментарий »

 
Знайка
12 марта 2011, 20:41
#1
 

Афтор, ссылка открывающая новую ВКЛАДКУ и новое ОКНО не одно и то же :P

Joker-jar
13 марта 2011, 4:56
#2
 

Имел в виду старые браузеры (например, IE6), которые не имеют механизма вкладок. Они открывают в новом окне

мах
18 мая 2011, 5:47
#3
 

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

Joker-jar
20 мая 2011, 6:05
#4
 

А пример есть в Интернете?

мах
22 мая 2011, 23:16
#5
 

пример есть у меня на пк ))

Joker-jar
23 мая 2011, 0:55
#6
 

Я не понял суть проблемы :) Это наблюдается в браузере или во FrontPage? Может, скриншот покажете?

Joker-jar
23 мая 2011, 0:57
#7
 

Можете зарегистрироваться на форуме и создать тему в разделе для начинающих, попытаемся разобраться

мах
23 мая 2011, 2:51
#8
 

мб адрес почты дашь? мини видос сниму отправлю туда

Joker-jar
23 мая 2011, 6:11
#9
 

мой_ник собака yandex.ru
Только видос не в формате exe, а то у меня Linux :)

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий