среда, 24 марта 2010 г.

Интенсивное введение в CSS. Основы

0. Для чего и для кого эта статья

Представляю вашему вниманию небольшой мануал по CSS. В его основу легли базовые концепции и основные приницпы использования CSS при создании современных страниц. Я не буду пытаться объять необъятное и рассказать про CSS абсолютно все. Это удел больших книг на сотни страниц, и даже они порой не всегда могут ответить на все вопросы. В даной же статье я постараюсь кратко и по сути описать основные моменты использования CSS. Расскажу о базовых принципах, затрону вопросы использования CSS для форматирования текста, картинок, ссылок списков и таблиц. Разумеется далеко не все моменты будут отражены здесь и боюсь статья может не подойти для тех, кто ищет материал для первого знакомства с технологией. Однако для тех кто немного знаком с созданием web-страниц и использоваием CSS и HTML статья возможно поможет систематизировать имеющиеся знания и возможно узнать что-то новое для себя. В будущем если мне хватит сил и времени я думаю написать продолжение, в котором акцентирую внимание на более сложных вопросах использования CSS, таких как различные способы формирования структуры и разметки страниц, особенностей использования старых версий браузера и многое другое, что по каким то причинам не вошло в первую часть, но несмотря на это является очень важным. Так или иначе надеюсь мои записки окажутся полезными.

1. Введение

С каждым днем количество Web-страниц растет стремительными темпами. Согласно исследованиям, количество сайтов в Интернете каждый месяц увеличивается на несколько миллионов полноценных ресурсов. Цели и задачи у них также чрезвычайно разнообразны, начиная от простых персональных страниц и заканчивая большими комплексными корпоративными Web-решениями. Для их создания используются самые разнообразные технологии, приемы, методы, языки программирования и операционные системы. Единственное что их всех объединяет – это то что любой сайт в конечном счете – это просто набор текстовых файлов, отформатированных специальным образом с использованием языка гипертесктовой разметки HTML.
Каждая страница любого Web-сайта представляет собой файл HTML, который состоит из ограниченного набора HTML тегов, с помощью которых осуществялется разметка страницы. Для того, что бы страница выглядела хорошо, каждый тег страницы обладает собственным стилем, который задает цвет, шрифт, положенние на странице, размер и многое другое. Наиболее удобно манипуляции данными стилями проводить с помощью CSS – Cascading Style Sheet.
С помощью CSS можно добиться, что бы любая страница вашего сайта выглядела единообразно и именно так как вам этого хочется, красиво, проффесионально и очень эффектно. Причем добиться этого можно прилагая минимум усилий.
Кроме того, в наше время необходимо, что бы сайт стал не только хорошо выглядел, но и легко находился с помощью существующих поисковых систем. Согласитесь, мало смысла в том, чтобы сделать хороший и эффектный сайт и никому его не показывать. Для того что бы сайт дружил с поисковыми системами, он должен обладать разметкой, адаптированной к поисковым системам. И здесь CSS – как нельзя кстати, так как используя CSS, все моменты относящиеся к описанию стилей элементов страницы можно вынести в отдельный CSS файл, так как насколько мне известно, ни одна из ныне существующих поисковых систем в процессе формировании списка результатов на запросы пользователей, не учитывает обстоятельство, насколько хорошо выглядит индексируемый сайт и насколько эффектные у него цветовые и дизайнерские решения. Оставив в главном HTML файле только разметку структуры сайта и собственно его содержимое, что как раз и подвергается анализу поисковыми системами, можно добиться куда более лучших результатов по раскрутке и оптимизации вашего Web-продукта. Если все сделать с умом – никакой SEO-инструмент не предоставит вам таких высоких результатов, как правильная разметка страниц вашего сайта.
Из недостатков использования CSS я пока могу отметить только тот факт, что таковых у CSS нет, по крайней мере мне они не известны. Недостатки есть у существующих браузеров, многие из которых не до конца понимают CSS. Особенно плохо с этим у Internet Explorer. Здесь дело не в том, что это плохой браузер, или в Microsoft работают лоботрясы, которые не могут нормальный продукт написать, нет, просто, в наши дни вместе с самыми новыми версиями браузера, к которым претензий то собствено нет, активно используются более старые, изжившие себя редакции. Так согласно исследованиям в наши дни версией 6.0 пользуется более 10% всех пользователей в мире, а между тем данная версия была выпущена в далеком 2001 году. Вот и возникают проблемы и у разработчиков, и у пользователей. Что бы такого не происходило, пользуйтесь по возможности более новыми версиями и все у вас будет работать.

2. Первый шаг в мир CSS


Как правило для описания CSS стилей используется отдельный файл, который имеет раширение *.css. Для того что бы связать данный файл с HTML страницей, нужно явно его подключить путем добавления следующей строчки в <head> секцию страницы.

<link href="main.css" rel="stylesheet" type="text/css" />
В данном случае, мы указали что стили для элеметнов страницы описанны в файле main.css. Существуют и другие методы задания CSS стилей, в частности можно задавать стили CSS в том же HTML файле в отдельной секции, или непосредственно при объявлении тега. Однако в большинстве случаев в готовых решениях CSS описывается именно в отдельных файлах.
Базовый пример задания CSS стиля может быть очень простым. В данном примере цвет шрифта для всех самых главных заголовков будет установлен в красный:
h1 { color: red; }
В данном примере h1 – это селектор, color – это свойство, red – это значение свойства. Фигурные скобки определяют блок свойств для заданного селектора, Двоеточие предназначено для разделения свойства от его значения, а точка запятой – сообщает о завершении списка значений описываемого свойства.
Селектором может быть любой HTML-тег, а также класс тега или же его идентификтор. Класс или идентификатор можно задать каждому тегу в HTML файле и использовать их в описании CSS свойств.
<h1 id=”header” class=”main”>Main Header</h1>
Если при описании стиля используется имя класса тега, перед его именем должна стоять точка. Если же используется идентификатор тега – то перед именем должна стоять решетка. Данные моменты отражены в примере ниже:
.main { color: green; }
#header { color: blue; }
Приоритет у данных селекторов соответсвующий: самый низки приоритет у тега, а самый высокий у идентификтора, то есть если в CSS файл в произвольном порядке поместить все три строчки описания цвета заголовка, рассмотренные выше, то, цвет заголовка будет синий, а не зеленый или красный. Если в файле находятся разные описания стилей с одинаковым приоритетом, то больший вес будет имеет определение объявленое позже.
Помимо одиночных селекторов, когда в качестве селектора выступает сам тег, его класс или идентификатор, есть еще возможность в качестве селектора использовать более сложные конструкции. Я их опишу чуть-чуть позже, так как для начала необходимо позакомится с очень важными понятиями в CSS без понимания которых дальше будет очень сложно.

3. Иерархия Элементов HTML с точки зрения CSS

Данный html-код представлен для наглядности и будет использоваться в текущем разделе и в следующем, где будет дано описание, какие бывают селекторы. Что бы не быть пустозвоном – при описании типа селектора я буду стараться приводить пример ссылаясь на данный пример. Думаю так будет понятней.
<html> <head> <title> Title </title> </head>
<body>
<div id=”main”>
<h1>Header</h1>
<p id=”story”>
Some Text
<a class=”inner” href=”http://url.com”>link</a>
</p>
<a class=”outer” href=”http://url.com”>link</a>
</div>
<div id=”footer”>
<p class=”inner”>inner text</p>
<a class=”outer” href=”http://url.com”>another link</a>
</div>
</body>
</html>
Любому тегу в HTML файле можно поставить в соответсвие степень его родства по отношению к дргим тегам в документе. Возможны следующие виды родства:
Parent – Родитель, это тег который содержит текущий тег и находится на уровень выше, например слой (div) “main” – родитель для параграфа (p) “story”, но он не родитель ссылки (a) “inner” которая находится внутри “story”, так как для нее родителем является имеено параграф “story”.
Child – Ребенок. У него все с точностью до наоборот – тег который находится на уровень ниже. Другими словами, для которых текущий тег является родителем. Примером может быть ссылка “inner” – ребенок параграфа “story”.
Ancestor – Предок. Это тег который содержит текущий тег и находится выше по иерархии неважно на каком уровне. То есть если для ссылки “inner” родитель только один и им является только параграф “story”, то предками является и “story” и слой “main” и тег body и даже корневой тег html.
Descendent – Потомок. Любой тег внутри текущего неважно на каком уровне. Для примера можно отметить, что для тега html абсолютно все теги в данном примере являются потомками.
Sibling – Родственник. Это тег находящийся на одном уровне с текущим и имеющий одного и того же родителя. Например h1 имеет два родственника: параграф “story” и ссылка “outer” с текстом “link”, другая ссылка “outer” (с текстом “another link”) не является родственником, потому что у нее другой родитель.


4. Какие селекторы бывают

Звездочка - * { font-weight: bold; } – для всех тегов устанавливает жирный шрифт.
Групповой селектор – груповые селекторы перечисляются через запятую и служать для установки только свойств только для задданных селеторов: h1, .inner { font-weight: bold; } – установит жирный шрифт только для заголовка, и тегов с классом inner (и для параграфа и для ссылки)
Специализация класса/идентификтора - p.inner { font-weight: bold; } – установит жирный шрифт для только для параграфов и только с классом inner. Для специализации идентификатора понятно – вместо точки использовать решетку.
Пробел - Селекторы для наследников : p.story a { color: yellow; } – для всех ссылок внутри параграфа story установить желтый цвет.
Псевдо-классы –распространненными псевдо-классами являеются для примера псевдо-классы используемые при задании стилей для ссылок: link, visited, hover, active, хотя есть много других псевдо-классов для других тегов, я пока остановлюсь на этих. Данные псевдо-классы задают отображение текста ссылки в разных состояниях: link – обычное состояние ссылки, visited – посещенная ссылка, hover – на ссылку наведен курсор мыши, active – стиль ссылки используемый при нажатии на ссылку. a:hover { font-weight: bold; } – для любой ссылки на которую наведен курсор мыши установить жирный шрифт.
Знак Плюс – Селектор родственников: h1 + p { color: yellow; } - в этом случае только следующий за заголовком параграф-родственник получит желтый цвет
Знак Больше –Child селектор - div > h1 { color: yellow; } это селекторы только для Child, все другие потомки буду проигнорированы.
Аттрибуты - a[href] { color: yellow; }– селектор аттрибутов, устанавливает цвет для всех ссылок у которых есть аттрибут href. Дополнительно для таких селекторов можно использовать следующие операторы: a[href^="http://"] - ^= - начинается с; a[href$=".pdf"] - $= заканчивается на; img[src*="headshot"] - *= содержит.

5. Особенности стилей CSS

К важным особенностям стилей CSS можно отнести наследование и каскадирование.
Наследование стилей с точки зрения CSS заключается в том, что большнство стилей предков наследуются потомками. Однако, можно выделить группы стилей, которые не наследуются таким образом, к ним можно отнести: стили влияющие на размещение элементов (Margins, padding), цвет фона, стили границ, предустановленные стили браузера( h1, h2... и т.д.).
Когда стили пересекаются работает принцип каскадирования, то есть выигрывает более специфичный стиль. Таким образом приоритет стилей от низких к высоким такой: тег (псевдо-элемент), класс (псевдо-класс), идентификатор, инлайн стиль (стиль заданный непосредственно в HTML коде). С более детальным определение приоритета стилей можно озакомится здесь:
www.w3.org/TR/CSS21/cascade.html#specificity
Но если коротко, то смысл в следующем. Положим следующее допущение:
  • приоритет селектора тега - 1
  • приоритет селектора класса - 10
  • приоритет селектора идентификатора - 100
Для различных, в том числе сложных селекторов, для какого то абстарктного HTML кода можно сформировать табличку приоритетов следующего вида:
СелекторидентификаторкласстегИтого
a0011
.inner01010
a.inner01111
#story100100
#story a101101
#story .inner110110
a:link01111
p:first-line0022
h1 strong0022
#main #story a.hover211211
Таким образом, чем больше получилось число в итоговой колонке тем выше приоритет у данного стиля и тем больше у него преимущества по отношению к другим стилям.
На самом деле каскадирование стилей момент очень непростой, и тут запутаться может даже гуру, поэтому целесообразно использоваться вспомогательные плагины для браузеров, которые призваны решать данные вопросы. Для файерфокса это View Formatted Source (https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=697), для сафари - Web Inspector (http://tinyurl.com/web-inspector).
В дополнению ко всему сказанному есть еще одно средство, которое позволяет несколько обойти стандартное правило каскадирование стилей. Для этого нужно для заданного свойства указать флаг: !important. Данный флаг увеличивает приотитет свойства настолько, что перекрывает приоритет любого другого свойства для указанного элемента. Однако если у нескольки стилей для одного элеметна задан данный флаг, то выигрывает более специфичный стиль.


6. Отступы и границы.

Любой элемент HTML содержит свойства который определяют расстояние от его границы до другого элемента страницы. В CSS это свойство определяется ключевым словом margin. Есть также другое свойство, не менее важное, оно определяет расстояние от границы тега до его содержимого – это padding. Для обоих свойств должны быть заданы четыре значения top, right, bottom, left. Эти значения могут задаваться как в пикселях, так и в процентах. В последнем случае, значение всегда будет базироваться на ширине тега.
В отдельных случаях необходимо обнулить все значения margin или padding для элемента. В таком случае не обязательно указывать все четыре параметра и использовать более сокращенную запись: margin : 0. Иногда существует необходимость задать только одно какое-то значение, не трогая остальных. Тут на помощь приходит следующие комплексные свойства margin-left, margin-right, margin-top, margin-bottom. Такой же поход справедлив и для padding.
С margin есть интересный нюанс: если margin двух соседних элеметнов соприкасаются друг с другом то в результате будет не из сумма, а максимальное значение одного из них. Что бы этого избежать необходимо дополнительно для таких элементов указать padding – тогда значения margin склеиваться не будут.
Теперь имеет смысл познакомиться с таким важным понятием как тип HTML элемента. Типов может быть два: inline и block. Inline-элементы отображаются как составные элементы строки – это такие элементы как strong, em, img и пр. Inline элементу нельзя задать свойства высоты или указать вертикальные margin и padding, и после него могут отображаться другие элементы на той же строке. Ко второму типу block относятся такие теги как p, table, div и пр. Элементу block можно задать свойства высоты, отступов и после него нельзя добавить элемент на той же строке, так как после таких элементов автоматически вставляется переход на новую строку.
Существует свойство CSS, которое позволяет inline элемент преобразовать в block, и наоборот. Это свойство display. Оно определяет как ведет себя заданный тег на странице. Варианты использования свойства: display: inline; display:block; display:none. В последнем случае указанный элемент не будет отображатся вовсе. Свойство display имеет очень большое значение в CSS и может применятся во многих случаях для конфигурирования отображения элементов страницы.
Границы задаются с помощью свойства border. С помощью данного свойства можно указать ширину границы, цвет, и стиль. Перечень возможных стилей достаточно широк: solid, dotted, dashed, double, groove, ridge, inset, outset, none и hidden. Сокращенная запись для задания границы элемента может выглядеть так: border: 4px solid #F00;
Помимо сокращенной записи, определяющей конфигурацию границ для каждой из сторон элемента, можно отдельно указать параметры границы для каждой стороны в отдельности. В таких случая используются комплексные свойства: border-top, border-bottom, border-left и border-right. Параметры для них такие же как и для сокращенной записи.
Также для каждого элемента можно указать ширину и высоту: width:200px, height:50%. Использование данных свойств думаю очевидно и понятно всем. Ну и напоследок стоит упомянуть о следующие свойства: min-height, min-width, max-height и max-width. Они предназначены для задания ограничений на высоту и ширину элемента, в случае если данные свойства не указаны для элеметна явно и могут изменяться в процессе отображения страницы.


7. Текст

Ни один сайт не обходится без текста, а текст в свою очередь отображается в соответствии с выбранным шрифтом и параметрами оторбажения текста. Шрифт задается с помощью свойства font-family. Шрифт задать можно либо с помощью имени шрифта ("Times New Roman"), имени семейства шрифта(Times) или типа шрифта(serif, sans serif, monospace). Селектор перебирает перечисленные шрифты до тех пор пока не найдет установленный в системе и применит его. Цвет шрифта задается свойством color, фон – background-color (или просто background), размер font-size. Тут все просто и понятно.
Помимо этого для шрифтов применяются следующие декоративные стили: font-style: italic (normal); font-weight: bold (normal) – для задания курсива или жирного шрифта; text-transform: uppercase, lowercase, capitalize или none – преобразование регистра отображаемого текста; - font-variant: small-caps – отображает весь текcт большими буквами; text-decoration: underline, overline, line-through, blink or none.
Далее следует обратить внимание на свойства регулирующие различные отступы и расстояния для отображаемого текста: letter-spacing: 10px – растояние между буквами; word-spacing: 2px- расстояние между словами; line-height: 150% - высота строки, данное свойство определяет расстояние между строками относительно размера выбранного шрифта, занчение по умолчанию 120%. Также отдельно следует отметить свойства text-align для выравнивания текста на странице и text-indent для задания отступа для первой строки абзаца. Вот и все.
В заверешение нельзя не отметить что для конфигурации отображения текста вместо отдельного задания каждого из рассмотренных свойств можно использовать сокращенную запись. Она позволяет задать все свойства одной строчкой. Давайте посмотрим на данный пример:
font: italic bold small-caps 18px/150% Arial, Helvetica, sans-serif
В данном случае текст будет жирный курсив, все буквы будут в вернем регистре но отличаться по размеру, размер шрифта - 18 пикселей и с высотой строки 150%, название шрифта Arial (если нету такого в системе то будет установлен Helvetica или любой дургой из сеймейства sans-serif). При использовании сокращенной записи не обязательно задавать все свойства, однако необходимо обязательно указать семейство шрифта и его размер, причем они должны быть указаны последними, все свойства необходимо разделять пробелом, а запятой только варианты семейства шрифта. Если необходимо указать высоту строки, то она задается вместе с размером шрифта через косую черту.


8. Картинки

Для отображения картинки на странице всегда применялся тег IMG. И все, больше никаких вариантов. Однако с приходом CSS все изменилось и теперь помимо старого доброго IMG можно практически для каждого тега в качестве фона задать фоновую картинку. Причем искусно маневрируя стилями позиционирования, масштабирования и размещения на странице, можно добиться такого эффекта, который и не снился для любителей тега IMG. Однако не стоит злоупотреблять фоновыми изображениями CSS и считать их панацеей. К примеру в большинстве случаев при печати страницы на принтере, фоновые рисунки, заданные с помощью CSS не печатаются в отличие от картинок тега IMG. Посему, что бы избавить себя от головной боли нужно провести четкую грать между использованием CSS и IMG: для декорирования страниц использовать CSS, а для отображения картинок (в буквальном смысле этого слова) – IMG.
Фоновый рисунок задается следующим образом: background-image: url(images/bg.gif). При задании имени файла кавычки можно указывать, а можно опустить, как это сделано в примере - они ни на что не влияют. При указании файла можно указывать абсолютный путь (http://site.com/img/img.jpg), путь относительно корня сайта(/img/img.jpg или же путь относительно текущего файла CSS (../img/img.jpg).
Помимо этого доступны следующие свйства: background-repeat: repeat, no-repeat, repeat-x, and repeat-y – повторять картинку по всей странице, не повторять, повторять по оси X, повторять по оси Y; background-position: X Y – положение картинки по оси X и Y (по умолчанию картинка позиционируется по верхнему левому углу), тут можно пользовать именованными константами типа left, top, center что бы изменить начальное положение, либо указать расстояние смещения картинки в пикселях или процентах относительно положения по умолчанию; background-attachment: scroll, fixed – “прилипание” фонового изображения к странице, scroll – изобажение ведет себя так же как и все элементы страницы, fixed – отображается в заданном месте даже если пользователь промотал страницу.
Так же как и в случае со шрифтами для фоновых изображений можно использовать сокращенную запись. Вот прирмер: background: #FFF url(bullseye.gif) scroll center center no-repeat. Думаю не стоит объяснять что в этой записи есть что – мне кажется тут все должно быть понятно.


9. Ссылки и списки

Страницы в интернете немыслимы без использования ссылок. Для их описания используется следующий тег <a href=”http://someurl.com”> Go to some URL</a>. Он отображается точно также как и обычный текст, за исключением того, что изначально стиль ссылки отличается от стиля обычного текста. Как правило мы привыкли видеть ссылки в виде подчеркнутого текста синего цвета. С помощью свойств color и background можно изменить цвет текста и фона ссылки соответственно.
Для ссылок существуют псево-классы, которые были описаны в статье выше. Это link, visited, hover, active. Как они описываются в CSS я тоже показывал в секции “Какие селекторы бывают”. Единственное, что следует обязательно отметить – при задании этих стилей, нужно использовать порядок в котором псевдо-классы перечислены выше. В обратном случае к ссылкам не будет корректно применяться заданный вами цвет.
Часто ссылки используют для создания панелей навигации по сайту. Для этого используются теги списков к которым относятся ul – неупорядоченные списки и ol – упорядоченные. Для описания элементов каждого из списка используется тег li. Для списков можно задать тип префикс отображаемый перед каждым элементом списка (свойство list-style-type) и позицию отображения префикса (list-style-position). Значения для свойств задающие тип префикса разные для упорядоченных и неупорядоченных списков. Так для неупорядоченных списков можно задать следующие значения: disk, circle, square, none; для упорядоченных - decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman, none. Значений для свойства позиции отображения префикса два: inside, outside, причем последний – значение по умолчанию. Так же при необходимости можно задать картинку, которая будет отображатся вместо префикса, для этого имеет смысл установить list-style-type:none и воспользоваться свойством list-style-image: url(images/bullet.gif); Разумеется путь к требуемой картинке нужно указать свой.
Давайте вернемся к созданию панелей навигации с помощью ссылок. Панель будет представлять собой список, каждый элемент которого это ссылка. Простейший пример показан такой панели показан ниже.
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
Может быть как минимум два варианта подобных панелей навигации: вертикальные и горизонтальные. В вертикальных каждый элемент списка расположен на отдельной строке, а в горизонтальных – все элементы находятся на одной строке.
Для того что бы сделать вертикальное меню, каждый элемент списка нужно пометить стилем display:block. На самом деле для тега li это значение установлено по умолчанию, однако все может быть, явно установив свойство, вы избавите себя от кучи проблем. Для горизонтального меню – нужно установить для элеметнов спика стиль display:inline. О свойстве display я рассказывал выше в секции “Отступы и границы”


10. Таблицы

Наверняка каждый из нас знаком с HTML таблицами. Раньше это был самый распространенный и, пожалуй, единственный способ разметки страниц. С появлением CSS – такой вариант разметки утратил свою актуальность. CSS содежит более гибкие средства для разметки страниц. Их описание - это огромная тема для отдельного разговора, о котором я еще напишу позже. Сейчас же я хочу поговорить о таблицах и их использовании в том качестве, для которого они предназначены изначально – отображения табличной информации. Вот как может выглядет такой HTML код.
<table>
<caption align="bottom">
Table 1: Productss Catalog
</caption>
<colgroup>
<col id="product" />
<col id="price" />
</colgroup>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Newspaper</td>
<td>$2.00</td>
</tr>
<tr>
<td>Magazine</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
Многие используют только базовые теги, такие как table, td и tr, игнорируя все остальные описанные здесь. Это их право. Скажу лишь, что используя расширенный набор табличных тегов, можно добиться более эффектного отображения ваших данных, так как в данном случае можно настроить стили и для заголовка таблицы, и для заголовков колонок и для самой таблицы.
Как правило большинство стандартных стилей задаются для ячеек таблицы (td), или заголовка (th). Для этих элементов можно задать свойства цвета: color, background; отступы: padding, margins; выравнивание внутри ячейки: text-align (left, right, center, justify), vertical-align (top, baseline, middle, bottom); задать стили границы ячеек таблицы: border .
Также для элментов таблицы есть специфичные свойства, которые применяются только для таблиц. К таковым относятся: border-spacing и border-collapse.
Свойство border-spacing определяет расстояние между ячейками. К примеру для того что бы убрать это пространство можно написать так: border-spacing:0. Ранее функцию по управлению данным параметром выполнял аттрибут тега table cellspacing, к слову им имеет смысл иногда воспользоваться и сейчас, так как Internet Explorer 7 и более ранние версии этого браузера не понимает свойства border-spacing.
Если для ячеек таблицы указать border и убрать расстояние между ячейками, то можно заметить, что границы имеют двойную ширину. Причиной этого является то, что нижняя граница одной ячейки добавляется к верхней границе другой. В итоге и получается граница с увеличенной шириной. Исправить ситуацию можно с помощью свойства border-collapse. Оно принимает два значения: separate – используется по умолчанию и collapse – служит для объединения смежных границ, так, после чего граница будет заданной ширины.

7 комментариев:

Анонимный комментирует...

Благодарю за пост почти все понравилось

Анонимный комментирует...

У вас кривая RSS — исправте

Анонимный комментирует...
Этот комментарий был удален администратором блога.
Анонимный комментирует...
Этот комментарий был удален администратором блога.
Анонимный комментирует...

Приветик!
Очень интересный сайт.

Море приколов...Скорость, Альфа, Speed, Speed, и т.д.
Доброе пожаловать на сайт:
[b]
http://xudra.qiciloni.tk


[/b]

WTREND комментирует...

html landing templates

Анонимный комментирует...

шалом

За простенькую регистрацию - БЕСПЛАТНЫЕ БОНУСЫ: http://www.bonus.ru.net/

[url=http://www.bonus.ru.net/bonusy]БОНУС РЕГИСТРАЦИЯ[/url]

метки: способы заработка в интернете