Основы CSS

06.01.2009

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

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

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

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

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

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

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

06.01.2009

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

06.01.2009

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

06.01.2009

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

06.01.2009

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

06.01.2009

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

06.01.2009

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

06.01.2009

ну вот первое что попалось:
textarea, input[type='text'], input[type='password'], select { border: 1px solid #c8c8c8; background: #ffffff; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaaaaa; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #8c8c8c; outline: 2px solid #dcdcdc; }
input[type='button'], input[type='submit'], input[type='checkbox'], input[type='image'], input[type='radio'], input[type='reset'], select, button { cursor: pointer; }
input[type='hidden'] { display: none; }
нежели CSS3 ?

07.01.2009

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

Можно даже так:
a[href="profile.php?id=2468"][target][title="ValdeZ"]
Так же, можно использовать селекторы атрибутов по подстроке. Прямо как в REGEX.
a[title$="Val"]

07.01.2009

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

07.01.2009

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

25.01.2009

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

26.01.2009

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

26.01.2009

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

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

26.01.2009

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

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

26.01.2009

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

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

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

26.01.2009

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

01.02.2009

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

01.02.2009

text-align: center;

01.02.2009

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