Рекомендации по css, с чего начать (авторские)

Вид для печати

20.04.2009, 07:10
klenovnn

Рекомендации по css, с чего начать (авторские)
Для новичков пишу данную тему, так как сам учусь и с учетом достигшего опыта и своих преподавателей считаю, что новичкам это будет полезно.
У каждого верстальщика имеется свой стиль кода, он соблюдает определенные правила, которые выработал для себя сам, чтобы в дальнейшем работать было проще и быстрее. Похожие материалы в сети можно найти, но по скольку их нет здесь, я доношу от себя:

Инструкции:
Для того, чтобы каскадные таблицы стилей (css) находились в отдельном файле (тем самым они загружаются один раз и кэшируются) необходимо создать файл стилей с расширением *.css, к примеру /style.css (относительный путь со слэша это важно, и правильно!)
Между тэгами <head></head> вставляем тэг link таким образом:
```
<link rel="stylesheet" type="text/css" href="/style.css">
```
Рекомендации
1. В начале css кода уберите все отступы * (margin:0; padding:0; font-size:100.01%;) - последняя строка необходима, так как все браузеры шрифты обрабатываю по разному (размеры)
2. Обязательно указывайте по умолчанию цвет текста и фона body, а так же размеры шрифта и используемый шрифт {background-color:#fff; color:#000; font:normal 12px 'Arial';} - цвет фона и текста необходим, если к примеру используется не ОС win xp или в браузере у пользователя используются по умолчанию свои цвета.
  На заметку: В кодировке utf-8 шрифт 'Verdana' в IE6 не поддерживается и лучшее решение - не использовать шрифт, так как вылечить можно ie только через реестр.
3. Продолжим по отступам, не достаточно использовать * {margin:0; padding:0;} лучше перечислять все, пример:
  body, td, th, input, select, textarea (в случае, если используется), тем самым мы добьемся одинакового отображения во всех браузерах.
  На заметку: Каждый браузер кнопки input submit, формы отображает по своему, это важно, когда используется графическая часть и формы могут искажать страницу.
4. Параметры в css удобно распологать по алфавиту, это позволяет работать с большим количеством строк и при этом быстро находить все параметры.
5. Когда назначаете id, class указывайте, для чего он используется, к примеру:
  <table id="s-all">
  css: table#s-all {}
  <div class="s-body">
  css: div#s-body {}
6. Названия div должны соответствовать их логическому использованию, к примеру если у нас есть меню слева (блок), это - sidebar, есть шапка - header, head, top. Таким образом любой специалист, и вы спустя долгое время сможете снова вернуться к коду и без труда изменить быстро, что вам требуется.
7. Во время верстки я советую открывать сразу все необходимые браузеры (я исп. 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 cellspacing="0" id="s-body">

    <tr>

        <td></td>

    <tr>

</table>
```
И основное, css код:
```
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 использовать для элементов каркаса, таких как шапка, основной документ, меню, дно, а классы для их внутренних документов, рассмотрим один пример:
```


<html>

<head>

    

    <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 на практике. Использовать, к примеру для того, чтобы указать обязательные элементы макета (дизайна):
```
<div id="s-body">

    <div id="s-sidebar"></div>

    <div id="s-content"></div>

</div>
```
Применение CLASS на практике. Использовать для оформления нескольких идентичных элементов:
```
<div id="s-body">

    <div id="s-sidebar">

        <div class="block"></div>

        <div class="block"></div>

    </div>

    <div id="s-content">

        <div class="s-logo"></div>

    </div>

</div>
```
Особая функция 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 имеют большое значение и мы постоянно используем их для создания необходимого визуального оформления. Однако делать это нужно с умом.

Например следует избегать такого использования:
```
<a href="http://www.somesite.ru" class="link">Какой-то сайт</a>
```
Мы уже знаем, что это ссылка, поэтому нет необходимости создавать дополнительный класс link. Можно применить стили к самому тегу a.

Также избегайте следующего:
```
<div id="right-col">
```
Используя такое значение у id, тяжело понять что содержится в этой секции. В данном случае подходящим значением было бы sidebar или addcontent. Значения этих атрибутов должны передавать информацию о содержимом элемента, а не о визуальных параметрах.

Материал переведен на блоге www.alexilin.ru и взят как идеальное описание.

Вложений: 1

Простой макет для понимания

Пример страницы, которую мы для начала попробуем написать (скриншот и ниже исходные данные)
Вложение 738
Код страницы index.html (index.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Solution</title>

    <link rel="stylesheet" type="text/css" href="/style.css" />

</head>

<body>



<table cellspacing="0" id="s-body">

    <tr>

        <td colspan="2" id="s-header"><h2>Логотип странной примерочной компании =)</h2></td>

    </tr>

    <tr>

        <td id="s-sidebar" valign="top">

            <ul>

                <li>Главная страница</li>

                <li><a href="#">О нашей компании</a></li>

                <li><a href="#">Наши товары</a></li>

                <li><a href="#">Наши партнеры</a></li>

                <li><a href="#">Открытые вакансии</a></li>

                <li><a href="#">Контактная информация</a></li>

            </ul>

        </td>

        <td id="s-content" valign="top">

            <h1>Главная страница</h1>

            <p>Здесь мы пишем какой-то очень содержательный текст. Пожалуй чтобы он был полезным, немного полезного тогда напишем =). Скажу некоторые правила, которые здесь отмечены:<br />

            тэг h1 использоваться на странице должен только один раз.</p>

            <p>В моем коде везде имеются пробелы (каждый отступ - 4 пробела), это стоит делать, потому что удобнее читать документ.</p>

        </td>

    </tr>

    <tr>

        <td colspan="2" id="s-footer">Данная компания не существует и закрылась с &copy; 2009 года</td>

    </tr>

</table>



</body>

</html>
Код файла style.css
* {

    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: число
Приведу небольшой пример использования данного свойства:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html;

 charset=utf-8">

  <title>z-index</title>

<style type="text/css">

.box{ float:left;

border:1px solid #0CF;

width:35%}

#l1, #l2, #l3, #l4 {

position: relative; /* Относительное позиционирование */

 } 

#l1, #l3 {

font-size: 60px; 

color: #000080; 

}

#l2, #l4 {

top: -75px; 

left: 5px; 

color: #ffa500; 

font-size:80px; 

}

#l1 { z-index: 2; }

#l2 { z-index: 1; }

#l3 { z-index: 4; }

#l4 { z-index: 3; }

</style>

 </head>

 <body>

<div class="box">

  <p>Слой 1 сверху</p>

  <div id="l1">Слой 1</div>

  <div id="l2">Слой 2</div> 

</div>

<div class="box">

  <p>Слой 4 снизу</p>

  <div id="l3">Слой 3</div>

  <div id="l4">Слой 4</div>

</div> 

 </body>

</html>
```
В результате должно получиться следующее:
Вложение 3367
Следует отметить, что свойство z-index работает только для тех элементов, у которых задано значение position.
P/s:Эту статью вы можете увидеть на моём сайте по адресу:http://www.sdcvoy.ru/CSS/sloi_css.php
01.01.2013, 08:34
Ayrat76

Можно ли через CSS, задать условия отображения цвета фона при условии? Например при положительных значениях в ячейках белый, при отрицательных красный. Или все же лучше это делать через JS?
01.01.2013, 23:22
Webmaster

Ayrat76, CSS не скриптовый язык, и не имеет доступа к содержимому
делайте через JS или на стороне сервера
01.04.2013, 17:47
benefit

Объясните пожалйста

Начал попытку создания сайта.... и что то ни как не могу понять как организовать переход с одной страницы на другую. Так вроде сайт сверстал простенький состоящий из шапки , меню навигации, центральной части где всё будет расположенно ну и низа .Пока у меня тока 2 файла index.html и style.css.
В меню допустим 3-и кнопки .так вот в чём вопрос как сделать так чтобы при нажатии на кнопки менялось тока содержимое центральной части . Я тока придумал файл index 3-и раза дублировать и переименовать(и заполнить каждый чем хочется)
01.04.2013, 17:58
Zippovich

Вы правильно придумали
01.04.2013, 19:36
benefit

спасибо за ответ .тогда вопрос 2-ой. хочу разместить на центральной части картинки ,как сделать чтоб они были разбиты по категориям и при откритии категории показывались эскизы картинок(небольшие), а при выборе определенной можно было просмотреть в реальном размере ну и сохранить.
01.04.2013, 19:41
Zippovich

нужно использовать технологии php, mysql, js, css, html
учите и делайте
26.11.2014, 17:45
12Oksana

плейер

На мой взгляд с плейером оч удобно работать. Деньги быстро поступают. Сколько пользуюсь,ни разу косяков не было. И всю историю платежей можно с мобильного мониторить. Дают норм условия и промокоды #paylerbsimple.
Смотрите
30.04.2017, 14:31
Александр Сафронов

а с чего вообще начать можно? где пройти обучение?
18.05.2017, 19:58
digbadsit

Давно учился, но забросил. Спасибо. Начну сначала
19.06.2017, 08:10
qwerty4050

неплохой рассказ!
20.06.2017, 08:42
Анна02

CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
18.02.2018, 17:09
Robinson

Спасибо много полезного можно найти.