Для новичков пишу данную тему, так как сам учусь и с учетом достигшего опыта и своих преподавателей считаю, что новичкам это будет полезно.
У каждого верстальщика имеется свой стиль кода, он соблюдает определенные правила, которые выработал для себя сам, чтобы в дальнейшем работать было проще и быстрее. Похожие материалы в сети можно найти, но по скольку их нет здесь, я доношу от себя:
Инструкции:
Для того, чтобы каскадные таблицы стилей (css) находились в отдельном файле (тем самым они загружаются один раз и кэшируются) необходимо создать файл стилей с расширением *.css, к примеру /style.css (относительный путь со слэша это важно, и правильно!)
Между тэгами <head></head> вставляем тэг link таким образом:
В начале css кода уберите все отступы * (margin:0; padding:0; font-size:100.01%;) - последняя строка необходима, так как все браузеры шрифты обрабатываю по разному (размеры)
Обязательно указывайте по умолчанию цвет текста и фона body, а так же размеры шрифта и используемый шрифт {background-color:#fff; color:#000; font:normal 12px 'Arial';} - цвет фона и текста необходим, если к примеру используется не ОС win xp или в браузере у пользователя используются по умолчанию свои цвета. На заметку: В кодировке utf-8 шрифт 'Verdana' в IE6 не поддерживается и лучшее решение - не использовать шрифт, так как вылечить можно ie только через реестр.
Продолжим по отступам, не достаточно использовать * {margin:0; padding:0;} лучше перечислять все, пример:
body, td, th, input, select, textarea (в случае, если используется), тем самым мы добьемся одинакового отображения во всех браузерах. На заметку: Каждый браузер кнопки input submit, формы отображает по своему, это важно, когда используется графическая часть и формы могут искажать страницу.
Параметры в css удобно распологать по алфавиту, это позволяет работать с большим количеством строк и при этом быстро находить все параметры.
Когда назначаете id, class указывайте, для чего он используется, к примеру:
<table id="s-all">
css: table#s-all {}
<div class="s-body">
css: div#s-body {}
Названия div должны соответствовать их логическому использованию, к примеру если у нас есть меню слева (блок), это - sidebar, есть шапка - header, head, top. Таким образом любой специалист, и вы спустя долгое время сможете снова вернуться к коду и без труда изменить быстро, что вам требуется.
Во время верстки я советую открывать сразу все необходимые браузеры (я исп. ie6,ie7,ff,opera), чтобы недопустить ошибки и не потерять время на их решение.
Это не правила, это рекомендации, если кому-то они показылись актуальными, и вы планируете это использовать, я готов разобрать и другие детали (пишите о них).
Если помогло, нажмите "Спасибо".
22.04.2009, 16:10
klenovnn
Первые этапы css. Стандартное оформление в css
По просьбе одного из участников форума добавляю основы по css, здесь лишь малая часть, которая может пригодится на стадии. В сообщение нет ни каких правил, для этого есть в сети учебники, я лишь покажу как применяются css на практике.
Как подключать css мы научились в первом уроке, продолжим. 1) Указываем для всего документа стандартный фон, параметры текста (размер, цвет, шрифт, отступ между строк):
Для этого в css пишем:
body {background:#fff; color:#000; font:normal 12px 'Tahoma'; line-height:25px;}
Для фона можно так же указать изображение (а так же и фон в цвете, если к примеру пользователь откроет ваш сайт без поддержки изображений):
body {background:#fff url ('/images/bg.gif');}
2) Оформление ссылок
a:link, a:visited {color:#000; text-decoration:underline;} /*когда указываем так через запятую, для a:link параметра и a:visited используются одинаковые правила*/
a:hover {text-decoration:none;}
3) Основные моменты оформления таблиц
Сразу скажу первое - при создание таблицы, вставляем только cellspacing="0" чтобы избавиться от отступов (через css метод не работет для ie, поэтому пока существует осел мы даже не будем его рассматривать), значит пишем:
table#s-body {width:100%;} /*ширина 100%, бордер сразу у нас будет 0, указывать не нужно.*/
table#s-body td {padding:0 4px;} /*создаем отступ в ячейках*/
table#s-body img {margin:4px; padding:2px; border:1px solid #ccc;} /*если есть картинка, она будет иметь отступ от ячейки в 4px, а так же бордер серого цвета + отступ от бордера в 2px, тоесть padding добавляет отступ от самого себя, а margin от внешних объектов.*/
3) Использование классов (class) и id
Различия между ними в том, что id применяется в документе один раз (уникальный id), то есть к примеру <p id="slogan">Мы изучаем css</p> сработает, а вот <p id="slogan"><p id="slogan">А вот тут внетренний тэг p ничего не получит.</p></p> и для него используется class.
Я предпочитаю id использовать для элементов каркаса, таких как шапка, основной документ, меню, дно, а классы для их внутренних документов, рассмотрим один пример:
<!-- обязательно указывайте DOCTYPE, это для примера я допускаю погрешность -->
<html>
<head>
<!-- здесь обязательно мета, только потом title, так как в ином случае будет брешь в безопасности -->
<title></title>
<style>
div#s-body {...} /*дописывать в начале слово div не обязательно, это я выработал для себя правило, так проще искать и понимать документ.*/
div#s-body div#s-sidebar {...} /*в начале я указываю родительский див, удобно, когда сайт большой и очень много строк в стиле. Приставка s- означает site-, это мое так же правило, этим я помечаю, что удалять запрещено, так как это относится к макету, а просто класс .oppa не обязателен в принципе и возможно использовался для единичного случая.*/
span.oppa {...} /*в данном случае это просто класс*/
h1 {font:normal 26px 'Georgia';}
</style>
</head>
<body>
<div id="s-body">
<h1>Заголовок</h1>
<p>Уникальный текст, с уникальным <span class="oppa">словом</p>.</p>
<div id="s-sidebar">
А тут у нас меню, которые является очень важным для сайта
</div>
</div>
</body>
</html>
Раздел обновляется и дорабатывается. Пишите здесь, или в приват (желательнее) свои заявки.
23.04.2009, 12:07
klenovnn
Разница между ID и CLASS
Разница между id и class ID
- используется только один раз
- может использоваться один id на нескольких страницах CLASS
- может применяться для нескольких элементов
- может содержать в себе другие классы
Применение ID на практике. Использовать, к примеру для того, чтобы указать обязательные элементы макета (дизайна):
Особая функция ID
Браузеры не обеспечивают никакой дополнительной функциональности от использования классов, однако у id есть одна полезная особенность. Допустим, на странице есть секция с комментариями <div id="comments">. Если где-либо разместить ссылку и в атрибуте href написать http://www.somesite.ru#comments, то при переходе по ссылке браузер автоматически переместиться к секции с id="comments".
Элементы могут иметь оба атрибута
У элемента можно указывать и id и class. Зачастую это может быть очень полезным. Давайте взглянем на стандартный код комментария в Wordpress.
<li id="comment-27299" class="item">
Комментарий имеет класс item, который присутствует у всех комментариев и с помощью которого можно оформить их по своему вкусу. Также он имеет уникальный id, что позволяет ссылаться на этот комментарий.
Для CSS нет разницы
Для CSS нет никакой разницы между id и class, кроме того, что id имеет большую специфичность. Всё что можно сделать с id, с одинаковым успехом можно реализовать с помощью class.
Для Javascript разница есть
Для javascript имеет значение, используется ли id или class. Важно например, чтобы на странице был один элемент с определённым id, в противном случае функция getElementById будет работать некорректно. Те, кто знаком с jQuery, знают как легко с помощью этого фреймворка добавлять и удалять классы у элементов. Однако же для id в нём не предусмотрено похожих возможностей.
Если нет необходимости, не используйте их
Как вы заметили, id и class имеют большое значение и мы постоянно используем их для создания необходимого визуального оформления. Однако делать это нужно с умом.
Мы уже знаем, что это ссылка, поэтому нет необходимости создавать дополнительный класс link. Можно применить стили к самому тегу a.
Также избегайте следующего:
<div id="right-col">
Используя такое значение у id, тяжело понять что содержится в этой секции. В данном случае подходящим значением было бы sidebar или addcontent. Значения этих атрибутов должны передавать информацию о содержимом элемента, а не о визуальных параметрах.
Материал переведен на блоге www.alexilin.ru и взят как идеальное описание.
23.04.2009, 12:51
klenovnn
Вложений: 1
Простой макет для понимания
Пример страницы, которую мы для начала попробуем написать (скриншот и ниже исходные данные) Вложение 738
Код страницы index.html (index.php)
* {
margin:0;
padding:0;
}
html, body {
background:#fff; /*используется сокращение, это тоже самое что и цвет #FFFFFF*/
color:#000;
font:normal 14px 'Tahoma';
line-height:25px;
}
a:link, a:visited {
color:#F00;
text-decoration:underline; /*ссылка подчеркнута*/
}
a:hover, a:visited:hover {
text-decoration:none; /*ссылка без подчеркивания*/
}
h1 {
color:#3e8f9c;
font:normal 26px 'Georgia';
}
h2 {
color:#2f90b2;
font:normal 18px 'Georgia'; /*normal - тип, может быть так же жирным, кириллица ...*/
}
table#s-body {
border:1px dashed #000; /*делаем бордер для таблицы, dashed - параметр, в следствие чего, бордер получается пунктиром*/
margin:0 auto; /*объект делаем по центру. 0 (верх,низ), auto (ровные отступы справа, слева), если ввести margin:1px 2px 3px 4px (верх, справа, низ, слева)*/
width:75%; /*ширина таблицы*/
}
td#s-header {
background:#ccc;
height:100px;
text-align:center; /*размешаем текст внутри ячейки по центру*/
}
td#s-header h2 {
font-size:36px; /*данный размер тэг h2 будет иметь только в диве s-header*/
}
td#s-sidebar {
width:300px;
}
td#s-sidebar ul {
margin:10px 0 10px 20px;
width:100%;
}
td#s-sidebar ul li {
list-style:none;
}
td#s-content {
padding:10px;
text-align:justify;
}
td#s-footer {
padding:0 20px;
}
21.06.2010, 11:02
Gray
arlekin
<link href="style.css" rel="stylesheet" type="text/css">
или
<style>
Стиль
</style>
или
<p style="стиль">
Какой то текст
</p>
10.04.2011, 10:58
tankoff
Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css.
То есть как правильно, так
<link href="css/style.css" rel="stylesheet" type="text/css" />
или так
<link href="style.css" rel="stylesheet" type="text/css" />
10.04.2011, 11:18
Malganus
Цитата:
Сообщение от tankoff
Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css.
То есть как правильно, так
<link href="css/style.css" rel="stylesheet" type="text/css" />
или так
<link href="style.css" rel="stylesheet" type="text/css" />
да без разницы. Можно хоть все файлы сайта размещать в одной директории, другое дело, что это неудобно, а порой небезопасно.
24.10.2011, 12:50
bonec
Спасибо, очень интересная и полезная информация)
Дуамю поупражняться в этом в свободное время) Автор +
11.11.2011, 06:22
nightgremlin
Вложений: 1
Слои в CSS
Приходит время и любой начинающий верстальщик или веб-разработчик сайтов сталкивается с такой проблемой, как слои. Хотя почему проблема? Если изучите этот урок никаких проблем возникнуть не должно. Слои в CSS накладываются друг на друга, то есть один блок может внезапно у вас закрыть другой и т.д. Один раз я и сам столкнулся с неприятной проблемой, когда рекламный блок закрыл часть меню (я правда быстро решил эту проблему). Запомните, что любые позиционированные элементы на страничке могут накладываться друг на друга.
При верстке сайта и при наложении слоёв друг на друга можно управлять этим наложением. Вообразите некоторую ось Z перпендикулярную экрану. Наложение элементов по этой оси будет контролироваться свойством z-index
В качестве значений у данного свойства используются целые числа (положительные, отрицательные и нуль). Чем больше число, тем выше располагается элемент. Синтаксис написания данного свойства имеет следующий вид:z-index: число
Приведу небольшой пример использования данного свойства:
В результате должно получиться следующее: Вложение 3367
Следует отметить, что свойство z-index работает только для тех элементов, у которых задано значение position.
P/s:Эту статью вы можете увидеть на моём сайте по адресу:http://www.sdcvoy.ru/CSS/sloi_css.php
01.01.2013, 08:34
Ayrat76
Можно ли через CSS, задать условия отображения цвета фона при условии? Например при положительных значениях в ячейках белый, при отрицательных красный. Или все же лучше это делать через JS?
