Вы не зашли.

#1 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

Так как стали появляться вопросы по CSS попросил demon'a отделить это направление в программировании.
Многие уже знают что такое CSS, но возможно не все до конца понимают его плюсов, поэтому для начала начну с начала )
--------------------
CSS, каскадные таблицы стилей (Cascading Style Sheets) это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. То есть для того чтобы задать вид или положение каком нибудь элементам мы и задаем этим элементам свой стиль (вид, положение). Применение стилей является на мой взгляд, да и думаю не только мой очень практичным, эффективным и удобным инструментом при верстке веб-страниц, для оформления текста, ссылок, изображений и других элементов этих страниц.
Какие же приимущества нам дает CSS?

1. Единый стандарт оформления документов, представим себе простенький сайт состоящий из нескольких страниц (главная или основная страницы сайта, о себе, для фанатов )), о сайте). Стандартное оформление: Вверху блок с шапкой, в которой пишеться обычно название сайта, слогон и т.д.; слева, справа или над или под шапкой меню навигации по сайту, нам же надо както перемешаться по нашим страницам; снизу, как пример, блок с копирайтом дизайнера, с данными для связи и т.д.) Похоже на стандарт? Думаю вполне. Но это не стандарт CSS, это стандарт сайтостроения (по крайней мере я так считаю, может и ошибаюсь, тогда поправьте). А вот само оформление наших страниц, где какие элементы размешаются, как они размешаются и т.д. вот это уже и относится к CSS (как и куда мы разметим нашу картинку, блок или меню, и как это будет оформлено). Думаю по этому преимуществу достаточно.

2. Единое хранение: как правило стили хранятся в одном или нескольких специальных файлах с расширением .css (обычно style.css), а ссылки на эти файлы указывается на всех документах. Благодаря этому очень удобно править стиль в одном месте, при этом оформление элементов автоматически будет меняется на всех страницах, которые связаны с указанным файлом ссылками. Вместо того чтобы модифицировать десятки, сотни, а то и тысячи HTML документов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется в них.

3. Расширенные возможности: в отличии от HTML CSS имеет гораздо больше возможностей для оформления вэб-страниц (можно изменить цвет фона элемента или добавить рамку, установить шрифт, определить размеры, положение и это еще не все)

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

Поэтому в настоящее время помоему не реально встретить сайт, который бы не использовал стили CSS. Ну и в заключении хочу отметить, что верстка вэб-страниц, делится на табличную верстку при помощи скрытой от глаз модульной сетки, состоящей из ячеек, и на верстку слоями. Под слоями подразумевается такие элементы как <DIV> и <SPAN>, к которым как и к таблицам можно применить свой стиль, задать свое положение или вид...

Думаю для основ вполне достаточно, прошу сильно не судить на учителя я не учился ))


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#2 

ZloVeЩиЙ
Профи
Имя: Andrew
Зарегистрирован: 2008-01-15
Сообщений: 6702
На форуме: 1484 час.
Репутация: 448 (85%) ±
Инфо  Вебсайт  Написать

Давно уже говорил надо раздел с цсс создать.
Адмирал может закрепишь тему!?
з.ы. Сейчас затарюсь кофем и сяду читать smile

Отредактированно ZloVeЩиЙ (2010-12-17 17:11:04)


[img]http://imgs.su/tmp/1315727312-616.jpg[/img] - use it.

Неактивен

#3 

crigon
Moderator
Зарегистрирован: 2005-05-04
Сообщений: 2536
На форуме: 250 час.
Репутация: 182 (100%) ±
Инфо  Написать

Добавлю. HTML - структурный язык. CSS - язык представления.
Т.е. в идеале все оформительские работы должны быть проделаны в стилевом файле, не затрагивая самого документа.

Неактивен

#4 

ValdeZ
Moderator
Имя: Владислав
Откуда: Украина, Запорожье
Зарегистрирован: 2008-02-09
Сообщений: 4874
На форуме: 860 час.
Репутация: 347 (97%) ±
Инфо  Написать

У меня сразу же вопрос к знатокам...
Каким образом можно задавать одному тегу, но с разными type... разные стили
Тоесть, для input type="submit" один стиль..а для input type="radio", например, другой стиль?

Неактивен

#5 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

ValdeZ, для input type="submit" добавь один class=ok например, а для input type="radio" другой, но не забываем что стиль может быть еще задан и для input, который может так же накладываться на одно и другое


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#6 

ValdeZ
Moderator
Имя: Владислав
Откуда: Украина, Запорожье
Зарегистрирован: 2008-02-09
Сообщений: 4874
На форуме: 860 час.
Репутация: 347 (97%) ±
Инфо  Написать

Сообщение от admiral:

ValdeZ, для input type="submit" добавь один class=ok например, а для input type="radio" другой, но не забываем что стиль может быть еще задан и для input, который может так же накладываться на одно и другое

я не об этом..просто где то в шаблонах джомлы..видел такое: div#header input[type=radio] что--то такое...вот и стало интересно

Неактивен

#7 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

div#header, я еще понимаю, для описания слоя header, а вот продолжением нет, ниразу не встречал такого описания, приведи полное описание слоя.


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#8 

ValdeZ
Moderator
Имя: Владислав
Откуда: Украина, Запорожье
Зарегистрирован: 2008-02-09
Сообщений: 4874
На форуме: 860 час.
Репутация: 347 (97%) ±
Инфо  Написать

Сообщение от admiral:

div#header, я еще понимаю, для описания слоя header, а вот продолжением нет, ниразу не встречал такого описания, приведи полное описание слоя.

ну вот первое что попалось:

нежели CSS3 ?

Неактивен

#9 

crigon
Moderator
Зарегистрирован: 2005-05-04
Сообщений: 2536
На форуме: 250 час.
Репутация: 182 (100%) ±
Инфо  Написать

ValdeZ, это называется селекторы атрибутов. И это CSS 2. Но ИЕ 6 и ниже работать с ними не умеет.
Одна из гениальнейших вещей в CSS.

Можно даже так:

Так же, можно использовать селекторы атрибутов по подстроке. Прямо как в REGEX.

Неактивен

#10 

ValdeZ
Moderator
Имя: Владислав
Откуда: Украина, Запорожье
Зарегистрирован: 2008-02-09
Сообщений: 4874
На форуме: 860 час.
Репутация: 347 (97%) ±
Инфо  Написать

Сообщение от crigon:

ValdeZ, это называется селекторы атрибутов. И это CSS 2. Но ИЕ 6 и ниже работать с ними не умеет.
Одна из гениальнейших вещей в CSS.

Можно даже так:

Так же, можно использовать селекторы атрибутов по подстроке. Прямо как в REGEX.

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

Неактивен

#11 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

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


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#12 

ValdeZ
Moderator
Имя: Владислав
Откуда: Украина, Запорожье
Зарегистрирован: 2008-02-09
Сообщений: 4874
На форуме: 860 час.
Репутация: 347 (97%) ±
Инфо  Написать

я вот читал, что использование таблиц и дивов - имеет разное влияние на раскрутку (на СЕО форуме прочитал) так ли это?

Неактивен

#13 

DelFast
<? $Liberta!
Имя: Michail
Откуда: Россия
Зарегистрирован: 2007-06-15
Сообщений: 4036
На форуме: 546 час.
Репутация: 260 (74%) ±
Инфо  Написать

Именно, очень большую роль играет таблица или блок (блочная вёрстка = <div>)

Неактивен

#14 

crigon
Moderator
Зарегистрирован: 2005-05-04
Сообщений: 2536
На форуме: 250 час.
Репутация: 182 (100%) ±
Инфо  Написать

Разве что из-за структурности с дивами. Но, скорее всего, поисковикам на это пофиг.
Точно так же, как им уже давно пофиг на т.н. ЧПУ и теги <strong>

И вообще, нечего оффтоп разводить.

Отредактированно crigon (2009-01-26 18:46:19)

Неактивен

#15 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

Сообщение от ValdeZ:

я вот читал, что использование таблиц и дивов - имеет разное влияние на раскрутку (на СЕО форуме прочитал) так ли это?

Тут тебе наверное точно никто не скажет что лучше, пользоваться табличной версткой или блочной, так как кто как привык писать то и будет отстаивать свою точку зрения.
Давай просто рассудим логически, допустим одна страничка у нас написана на таблицах, а вторая на div'ах, что мы заметим, думаю значительныую разницу в коде, когда пишешь в div'ах код гораздо меньше получается, отсюда наша страница написанная в div'ах легче, что является плюсом для оптимизации. Теперь посмотрим как наши две страницы видят поисковики, тут впринципе спорный вопрос что лучше, так как поисковики уже наученные читать теги и помоему скрипты, если не ошибаюсь, на страница написанная в div'ах выглядит примерно как обычный тектовый файл написанный в блокноте, что облегчает индексирование поисковикам, незадерживаясь на чтении различных тегов. Да и как сказал crigon, выше, за идеальное оформление в файле css, полностью с этим согласен, это так же положительный момент в оптимизации. С блочной версткой тоже есть свои минусы, иногда приходиться изголится, чтобы написать именно то и именно с помошью тега <div>, что хочется или нужно отобразить. Поэтому иногда приходится использовать и таблицы вместе с блоками, так как в некоторых случаях такой подход более рационален чем четко придерживаться чего одного.
Вот вроде впринципе постарался высказать свою точку зрения на этот вопрос, а что лучше это уже решать каждому для себя.

PS во плин пока писал уже и высказывания появились )))
PPS и название темы както не совсем относится к сео оптимизации, о ней в одном посте не расскажешь, а если еще и поспорить, то отдельную тему нужно было делать


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#16 

crigon
Moderator
Зарегистрирован: 2005-05-04
Сообщений: 2536
На форуме: 250 час.
Репутация: 182 (100%) ±
Инфо  Написать

Ещё таблица медленне загружается, особенно заметно если много ячеек.
Таблица, вроде бы, отрисовывается в браузере только когда уже полностью загружена. Точно не помню.

А изголяться, как правило, приходится не столько с самой блочной версткой, сколько с IE 6..))

И кстати я где-то даже читал, что исходники гугла по количеству строк, в принципе, приближаются к исходникам windows.)

Отредактированно crigon (2009-01-26 19:05:34)

Неактивен

#17 

ValdeZ
Moderator
Имя: Владислав
Откуда: Украина, Запорожье
Зарегистрирован: 2008-02-09
Сообщений: 4874
На форуме: 860 час.
Репутация: 347 (97%) ±
Инфо  Написать

Ну в основном есть плюс у дивов в том, что они растягиваются в зависимости от контента внутри, а таблицы - не настолько "резиновые"
Просто как на меня, больший фактор играет устранение неполадок с отображении блоков в ИЕ6...

Неактивен

#18 

ZloVeЩиЙ
Профи
Имя: Andrew
Зарегистрирован: 2008-01-15
Сообщений: 6702
На форуме: 1484 час.
Репутация: 448 (85%) ±
Инфо  Вебсайт  Написать

.bottom {display:block; background:transparent; font-size:1px;}
Как этому класу внутри задать, align=center ???


[img]http://imgs.su/tmp/1315727312-616.jpg[/img] - use it.

Неактивен

#19 

crigon
Moderator
Зарегистрирован: 2005-05-04
Сообщений: 2536
На форуме: 250 час.
Репутация: 182 (100%) ±
Инфо  Написать

text-align: center;

Неактивен

#20 

ZloVeЩиЙ
Профи
Имя: Andrew
Зарегистрирован: 2008-01-15
Сообщений: 6702
На форуме: 1484 час.
Репутация: 448 (85%) ±
Инфо  Вебсайт  Написать

Это ведь для текста а этим класом у меня див задан, так вот как его выровнять по центру?!


[img]http://imgs.su/tmp/1315727312-616.jpg[/img] - use it.

Неактивен

[ Generated in 0.009 seconds, 9 queries]