X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Рекомендации по css, с чего начать (авторские)
klenovnn
klenovnn
Topic Starter сообщение 20.4.2009, 9:10; Ответить: klenovnn
Сообщение #1


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

Инструкции:
Для того, чтобы каскадные таблицы стилей (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), чтобы недопустить ошибки и не потерять время на их решение.

Это не правила, это рекомендации, если кому-то они показылись актуальными, и вы планируете это использовать, я готов разобрать и другие детали (пишите о них).
Если помогло, нажмите "Спасибо".
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
Topic Starter сообщение 22.4.2009, 18:10; Ответить: klenovnn
Сообщение #2


По просьбе одного из участников форума добавляю основы по 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
klenovnn
Topic Starter сообщение 23.4.2009, 14:07; Ответить: klenovnn
Сообщение #3


Разница между 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
klenovnn
Topic Starter сообщение 23.4.2009, 14:51; Ответить: klenovnn
Сообщение #4


Пример страницы, которую мы для начала попробуем написать (скриншот и ниже исходные данные)
[attachment=35701: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;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Evansw
Evansw
сообщение 21.6.2010, 13:02; Ответить: Evansw
Сообщение #5


arlekin
<link href="style.css" rel="stylesheet" type="text/css">
или
<style>
Стиль
</style>
или
<p style="стиль">
Какой то текст
</p>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tankoff_hb
tankoff_hb
сообщение 10.4.2011, 12:58; Ответить: tankoff_hb
Сообщение #6


Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css.
То есть как правильно, так
<link href="css/style.css" rel="stylesheet" type="text/css" />
или так
<link href="style.css" rel="stylesheet" type="text/css" />
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 10.4.2011, 13:18; Ответить: Malganus
Сообщение #7


(tankoff_hb @ 10.4.2011, 15:58) *
Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css.
То есть как правильно, так
<link href="css/style.css" rel="stylesheet" type="text/css" />
или так
<link href="style.css" rel="stylesheet" type="text/css" />


да без разницы. Можно хоть все файлы сайта размещать в одной директории, другое дело, что это неудобно, а порой небезопасно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bonec
bonec
сообщение 24.10.2011, 14:50; Ответить: bonec
Сообщение #8


Спасибо, очень интересная и полезная информация)
Дуамю поупражняться в этом в свободное время) Автор +
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nightgremlin
nightgremlin
сообщение 11.11.2011, 8:22; Ответить: nightgremlin
Сообщение #9


Приходит время и любой начинающий верстальщик или веб-разработчик сайтов сталкивается с такой проблемой, как слои. Хотя почему проблема? Если изучите этот урок никаких проблем возникнуть не должно. Слои в 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>

В результате должно получиться следующее:
[attachment=38330:Слои.PNG]
Следует отметить, что свойство z-index работает только для тех элементов, у которых задано значение position.
P/s:Эту статью вы можете увидеть на моём сайте по адресу:http://www.sdcvoy.ru/CSS/sloi_css.php
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ayrat76
Ayrat76
сообщение 1.1.2013, 10:34; Ответить: Ayrat76
Сообщение #10


Можно ли через CSS, задать условия отображения цвета фона при условии? Например при положительных значениях в ячейках белый, при отрицательных красный. Или все же лучше это делать через JS?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3328 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3289 19.12.2023, 18:55
автор: CULA
Горячая тема (нет новых ответов) ВНИМАНИЕ: Хочешь начать работу с фармой? Легко! StimulCash.com!
67 StimulCash 194301 18.12.2023, 12:13
автор: Crimean
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110


 



RSS Текстовая версия Сейчас: 28.3.2024, 16:11
Дизайн