Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Чистый HTML vs HTML+CSS


Автор: Innuendo108 30.1.2010, 23:52
Доброго времени суток...

Нужна страничка, довольно простая... 

1. В первом случае её верстают только HTML (пусть даже валидным). Но там будут встречаться такие конструкции как:

Код

<body bgcolor="#343434">
...
<font color="red" size="3" face="Tahoma">Text1</font>
<font color="green" size="3" face="Arial">Text2</font>
...


Т.е. чистый HTML с атрибутами, никакого CSS.

2. Во втором случае мы имеем минимальный HTML, и CSS:

Код

//часть файла style.css
body {
background-color: #343434;
}
.c1 {
color : red;
font-family: tahoma;
font-size:12px;
}

.c2 {
color : green;
font-family: arial;
font-size:12px;
}


Код

<!-- фрагменты html -файла -->
<link rel="stylesheet" href="style.css" type="text/css" >
...
<body>
...
<span class="c1">Text1</span>
<span class="c2">Text2</span>
...


Вариант 2.1: атрибутный-стайл.
Код

<body style="background-color:#343434">
...
<span style="color : red; font-family: tahoma; font-size:12px;">Text1</span>
<span style="color : green; font-family: arial; font-size:12px;">Text2</span>
...


Какой вариант лучше? Нужно именно обоснованные аргументы.

 Аргументы типа "не принято, не модно" считаются не обоснованными. Я понимаю, что первый вариант - устаревший, напоминает кодинги из книжек-мануалов 2000-ого года, но всё же.. (зато он не требует знаний CSS, и он короче)

Заранее спасибо

Автор: blah 31.1.2010, 03:11
Вот не думал что в 2010-м встречу такой вопрос. smile
Цитата(Innuendo108 @  30.1.2010,  22:52 Найти цитируемый пост)
(зато он не требует знаний CSS, и он короче)

Просто с плеча рубите.

Эх, наверное все-таки пропадет википедия, раз ее никто не читает.
http://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9#CSS-.D0.B2.D1.91.D1.80.D1.81.D1.82.D0.BA.D0.B0

Автор: FortMax 31.1.2010, 13:10
Innuendo108, лучший вариант это гогда мухи и компот отдельно =) содержание в html, а оформление в css, тут даже обсуждать то нечего, тема стара как мир =)

з.ы. и такие вопросы наверное лучше раздел "теория" =)

Автор: WebMast 31.1.2010, 14:16
Единственное, на что опираюсь при выборе: размер файла. Когда выносим css, время загрузки уменьшается..

Автор: SelenIT 1.2.2010, 01:39
http://www.liondesert.ru/ ;)

А вообще основные преимущества CSS, навскидку:
  • больше контроля над оформлением, типографикой и расположением блоков;
  • отвязка визуального расположения блоков от их положения в коде (можно поднять основной контент в коде ближе к началу, а "шапку", навигацию и прочие украшения выводить после, поисковики и всякие скринридеры это любят);
  • проще менять темы оформления, делать версии под разные устройства, для печати (media="print") и т.д.;
  • есть "запасные варианты" (напр., если в системе нет нужного шрифта Tahoma, можно заменить его похожим шрифтом Geneva, а если и его нет — любым без засечек);
  • всё оформление кешируется, после первой загрузки страницы будут отображаться быстрее.
Вариант с атрибутом style теряет последнее преимущество, поэтому годится лишь для быстрой проверки или каких-то исключительных задач, заведомо слишком редких, чтоб создавать для них класс.

Автор: skyboy 1.2.2010, 09:50
кроме архитектурных преимуществ в разделении оформления от структуры страницы, CSS моложе HTML-атрибутов, потому обладает более широкими возможностями.
в HTML - width, height, align, valign, а в CSS - display, position, margin, padding, laft/right/top/bottom, float, width, height, text-align, vertical-align - это только то, что касается позиционирования.
кроме того, CSS реализует механизм выбора в зависимости от устройства отображения(@media), что позволяет реализовать "версию для печати" и "версию для PDA" на базе того же HTML и даже без перезагрузки страницы: отправили на печать - используются другие CSS-правила. попробуй реализовать такое на HTML-атрибутах.
попробую обощить:
0. CSS предполагает увеличение возможностей в сравнении с простым HTML
1. CSS-селекторы позволяют выделить общие правила для неограниченного количества элементов в одну конструкцию. И менять при необходимости в этой одной конструкции. HTML придется менять в каждом месте указания атрибутов.
2. CSS может быть вынесено в отдельный файл(или файлы), что позволит закешировать и экономить на времени загрузки и объеме передаваемых данных.
К слову  сказать, при использовании атриубута style для определения CSS, теряется преимущества из пунктов 1 и 2. вот так-то.

Автор: NNaarreekk 1.2.2010, 11:26
Цитата(Innuendo108 @  31.1.2010,  01:52 Найти цитируемый пост)
Тут вопрос немного риторический.

http://ru.wikipedia.org/wiki/%D0%A0%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81 - это вопрос на который не нужно давать ответа smile 

Автор: Innuendo108 2.2.2010, 13:39
NNaarreekk, Ок, сорри. Исправил.


skyboy, SelenIT, Спасибо за аргументы.


Ок. вопрос решен, думаю аргументов достаточно.

Автор: skyboy 2.2.2010, 14:30
Цитата(Innuendo108 @  2.2.2010,  12:39 Найти цитируемый пост)
skyboy, Спасибо за аргументы.

я только дополнил сказанное SelenITом

Добавлено через 3 минуты и 15 секунд
с точки зрения разработчика, будет ещё круче, если позволить CSS генерировать динамически. необязательно даже использовать http://ru.wikipedia.org/wiki/Sass или аналог. Можно генерировать CSS теми же средствами, что и HTML - при помощи РНР-вставок, Perl-кода или чего-то ещё. это ещё более упростит и ускорит разработку, а также - снизит количество ошибок как в сравнении с использованием HTML-атрибутов, так и в сравнении с использованием статического CSS.

Автор: NNaarreekk 2.2.2010, 14:42
Цитата(skyboy @  2.2.2010,  16:30 Найти цитируемый пост)
при помощи РНР-вставок

У меня был случай когда хром не понимал так сгенерированный css файл, даже с указанным header(Content-Type..)...Другие браузеры показывали все нормально.
Кончено я уверен что эту ошибку можно было исправить небольшими стараниями, но все же.
Я в некоторых блогах читал что не советуют так делать, конкретных причин не называлось, но писали что не стоит.


skyboy, ты используешь этот метод?

Автор: bars80080 2.2.2010, 19:29
Цитата(NNaarreekk @  2.2.2010,  13:42 Найти цитируемый пост)
У меня был случай когда хром не понимал так сгенерированный css файл, даже с указанным header(Content-Type..).

наверное, имя генерированного адреса заканчивалось на .php?
а заголовки какие отправлялись при генерации?

Автор: skyboy 2.2.2010, 23:04
Цитата(NNaarreekk @  2.2.2010,  13:42 Найти цитируемый пост)
skyboy, ты используешь этот метод?

честно говоря, нет.  попробовал пару раз и все. в SASS с читаемостью получше, чем у CSS c РНР-вставками. 
подумал, что было бы несложно сделать редирект средствами apache. типа
Код

RewriteCond %{REQUEST_FILENAME} -!f
RewriteRule ^css/(.*)\.css css/$1.php [L]

главное:
0. не забыть про content-type
1. не забыть про заголовки, влияющие на кеширование

Автор: NNaarreekk 3.2.2010, 12:02
Цитата(bars80080 @  2.2.2010,  21:29 Найти цитируемый пост)
наверное, имя генерированного адреса заканчивалось на .php?

Самое интересное что нет, адрес был типа get/css/style.css, rewrit'ом изменял адрес на get/?css/style.css и потом в РНР делал header(content-type..) и readfile.

Цитата(bars80080 @  2.2.2010,  21:29 Найти цитируемый пост)
а заголовки какие отправлялись при генерации? 

header("Content-Type: text/css");

Цитата(skyboy @  3.2.2010,  01:04 Найти цитируемый пост)
подумал, что было бы несложно сделать редирект средствами apache.

Думаю так правильне, а то если сделать так чтоб файлы css обробатывалис как php то труднее будет потом редактировать в редакторах. Хотя по мне для маленьких проектов достатачно обычного css a.

Автор: bars80080 3.2.2010, 14:22
Цитата(NNaarreekk @  3.2.2010,  11:02 Найти цитируемый пост)
Самое интересное что нет, адрес был типа get/css/style.css, rewrit'ом изменял адрес на get/?css/style.css и потом в РНР делал header(content-type..) и readfile.

наверное, там прилеплялся ещё какой-нибудь заголовок. можно было бы посмотреть, если есть такая приблуда.
наверное, лучше было бы обойтись без реврайта, а прямо хранить все динамические .css в одной папке, а в .htaccess положенный в эту папку выставить установку - обрабатывать файлы .css через php-машину

Автор: NNaarreekk 3.2.2010, 15:05
bars80080, самое самое интересное, что мои стили были статичными smile 
Просто мне надо было их из разных субдоменов вызывать но не хотелось чтоб в коде было видно что файл находиться в другм месте. Правда потом решил проблему по другому.


Цитата(bars80080 @  3.2.2010,  16:22 Найти цитируемый пост)
наверное, там прилеплялся ещё какой-нибудь заголовок

возможно, просто интересно почему именно в Хроме проблема, ведь на сколько я знаю он собран на основе ФФ и если была такая проблема то и в ФФ она должна была быть.

Автор: olegarh 6.2.2010, 19:09
Конечно же лучше когда все отдельно. Стили в CSS, а страничка сама по себе.
Предположим к десяти страницам будет подключен CSS.
Простой пример!
В случае когда стили в css. что бы поменять все 10 страниц достаточно изменить только CSS!  а если все будет в html то придется менять все 10 страниц! Конечно есть разница. Экономишь много времени! user posted image

Автор: shapovala 14.2.2010, 18:36
Зачем чтота доводить, просто  сверстай сай в обих  вариантах а потом  посмотри размер страницы и когда сайт уже будет интегрирован в програмную чась попробуй там чтота изменять. Думаю тогда вопрос сам собой отпадет.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)