+ Ответить в теме
Страница 1 из 3 1 2 3 ПоследняяПоследняя
Показано с 1 по 10 из 22

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

  1. #1
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702
    Thanks
    0
    Thanked 147 Times in 51 Posts

    Сообщение Рекомендации по 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), чтобы недопустить ошибки и не потерять время на их решение.
    Это не правила, это рекомендации, если кому-то они показылись актуальными, и вы планируете это использовать, я готов разобрать и другие детали (пишите о них).
    Если помогло, нажмите "Спасибо".
    Последний раз редактировалось klenovnn; 21.04.2009 в 11:44. Причина: Новые дополнения
    // Сайт под ключ и другое klenovnn

  2. The Following 31 Users Say Thank You to klenovnn For This Useful Post:

    Dark Mefody (16.08.2009), Dark_Flame (11.04.2018), falco (10.10.2009), fidesxfx (24.01.2012), G_E_R_M_A_N (01.07.2012), igormak (25.01.2012), InYan (20.02.2010), Ledy (26.05.2011), Letmetouchyou (24.04.2009), Licoric (21.04.2009), Live (25.07.2009), locky-yotun (22.06.2009), Melitta (18.02.2014), merketex (04.01.2013), mfucker (29.04.2009), paet (23.03.2018), pingvin (16.10.2009), Pschonka (26.04.2009), SanyaZmei (30.07.2010), Sonic05 (22.02.2010), stoldelo (01.08.2009), sukrem (23.01.2010), Twain (28.07.2009), Vahe (07.02.2011), Webmaster (20.04.2009), Yura1337 (13.11.2011), ZiabliK (20.06.2010), Алесь (05.11.2010), Бабай (02.08.2009), Мария_М (01.07.2009), Электроник (23.07.2011)

  3. #2
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702
    Thanks
    0
    Thanked 147 Times in 51 Posts

    Сообщение Первые этапы 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 использовать для элементов каркаса, таких как шапка, основной документ, меню, дно, а классы для их внутренних документов, рассмотрим один пример:

    <!-- обязательно указывайте 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>


    Раздел обновляется и дорабатывается. Пишите здесь, или в приват (желательнее) свои заявки.
    // Сайт под ключ и другое klenovnn

  4. The Following 8 Users Say Thank You to klenovnn For This Useful Post:

    falco (10.10.2009), Gugs (01.03.2010), Letmetouchyou (24.04.2009), Licoric (22.04.2009), Live (25.07.2009), SanyaZmei (30.07.2010), ZiabliK (20.06.2010), Бабай (02.08.2009)

  5. #3
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702
    Thanks
    0
    Thanked 147 Times in 51 Posts

    Разница между 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 и взят как идеальное описание.
    Последний раз редактировалось klenovnn; 23.04.2009 в 13:14.
    // Сайт под ключ и другое klenovnn

  6. The Following 5 Users Say Thank You to klenovnn For This Useful Post:

    falco (10.10.2009), Letmetouchyou (24.04.2009), Live (25.07.2009), ZiabliK (20.06.2010), Бабай (02.08.2009)

  7. #4
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702
    Thanks
    0
    Thanked 147 Times in 51 Posts

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

    Пример страницы, которую мы для начала попробуем написать (скриншот и ниже исходные данные)
    screen.jpg
    Код страницы 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;
    }
    // Сайт под ключ и другое klenovnn

  8. The Following 12 Users Say Thank You to klenovnn For This Useful Post:

    Antinup (12.05.2010), falco (10.10.2009), Gugs (02.03.2010), Letmetouchyou (24.04.2009), Live (25.07.2009), masaka (17.01.2010), Nosha (13.01.2011), TiGrann (11.11.2009), ycenik (29.08.2010), ZiabliK (20.06.2010), Бабай (02.08.2009), Старовер (23.05.2009)

  9. #5
    Пользователь Gray на пути к лучшему Аватар для Gray
    Регистрация
    24.02.2010
    Адрес
    НиНо
    Сообщений
    59
    Thanks
    15
    Thanked 2 Times in 2 Posts
    arlekin
    <link href="style.css" rel="stylesheet" type="text/css">
    или
    <style>
    Стиль
    </style>
    или
    <p style="стиль">
    Какой то текст
    </p>

  10. #6
    Новичок tankoff на пути к лучшему Аватар для tankoff
    Регистрация
    10.04.2011
    Сообщений
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css.
    То есть как правильно, так
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    или так
    <link href="style.css" rel="stylesheet" type="text/css" />

  11. #7
    Местный Malganus на пути к лучшему Аватар для Malganus
    Регистрация
    12.12.2010
    Адрес
    Москва
    Сообщений
    356
    Thanks
    10
    Thanked 43 Times in 41 Posts
    Цитата Сообщение от tankoff Посмотреть сообщение
    Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css.
    То есть как правильно, так
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    или так
    <link href="style.css" rel="stylesheet" type="text/css" />
    да без разницы. Можно хоть все файлы сайта размещать в одной директории, другое дело, что это неудобно, а порой небезопасно.

  12. #8
    Новичок bonec на пути к лучшему Аватар для bonec
    Регистрация
    24.10.2011
    Сообщений
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Спасибо, очень интересная и полезная информация)
    Дуамю поупражняться в этом в свободное время) Автор +

  13. #9
    Пользователь nightgremlin на пути к лучшему Аватар для nightgremlin
    Регистрация
    28.04.2011
    Сообщений
    91
    Thanks
    7
    Thanked 5 Times in 5 Posts

    Слои в 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>

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

  14. #10
    Новичок Ayrat76 на пути к лучшему Аватар для Ayrat76
    Регистрация
    01.01.2013
    Сообщений
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Можно ли через CSS, задать условия отображения цвета фона при условии? Например при положительных значениях в ячейках белый, при отрицательных красный. Или все же лучше это делать через JS?

+ Ответить в теме

Похожие темы

  1. Нужна оценка и рекомендации по улучшению
    от nobap в разделе Обзор и оценка ваших работ
    Ответов: 4
    Последнее сообщение: 02.01.2009, 19:25

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения