ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Основы CSS

 

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

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

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

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

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

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

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

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

Отредактировано ZloVeЩиЙ - 17.12.2010
2536
удалён @crigon
Добавлю. HTML - структурный язык. CSS - язык представления.
Т.е. в идеале все оформительские работы должны быть проделаны в стилевом файле, не затрагивая самого документа.

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

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

4875
ValdeZ @ValdeZ
admiral пишет:

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

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

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

4875
ValdeZ @ValdeZ
admiral пишет:

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

ну вот первое что попалось:
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 ?

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

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

4875
ValdeZ @ValdeZ
crigon пишет:

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

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

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

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

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

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

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

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

Отредактировано crigon - 26.01.2009
6600
Александр @admiral
ValdeZ пишет:

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

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

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

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

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

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

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

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

2536
удалён @crigon
text-align: center;

6703
Андрей @ZloVeЩиЙ
Это ведь для текста а этим класом у меня див задан, так вот как его выровнять по центру?!