Помощник
|
Рекомендации по css, с чего начать (авторские) |
klenovnn
|
Сообщение
#1
|
||
|
|
||
|
|||
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 используются одинаковые правила*/ 3) Основные моменты оформления таблицa:hover {text-decoration:none;} Сразу скажу первое - при создание таблицы, вставляем только cellspacing="0" чтобы избавиться от отступов (через css метод не работет для ie, поэтому пока существует осел мы даже не будем его рассматривать), значит пишем: <table cellspacing="0" id="s-body"> И основное, css код:<tr> <td></td> <tr> </table> table#s-body {width:100%;} /*ширина 100%, бордер сразу у нас будет 0, указывать не нужно.*/ 3) Использование классов (class) и idtable#s-body td {padding:0 4px;} /*создаем отступ в ячейках*/ table#s-body img {margin:4px; padding:2px; border:1px solid #ccc;} /*если есть картинка, она будет иметь отступ от ячейки в 4px, а так же бордер серого цвета + отступ от бордера в 2px, тоесть padding добавляет отступ от самого себя, а margin от внешних объектов.*/ Различия между ними в том, что 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
|
Сообщение
#3
|
|
Разница между id и class
ID - используется только один раз - может использоваться один id на нескольких страницах CLASS - может применяться для нескольких элементов - может содержать в себе другие классы Применение ID на практике. Использовать, к примеру для того, чтобы указать обязательные элементы макета (дизайна): <div id="s-body"> Применение CLASS на практике. Использовать для оформления нескольких идентичных элементов:<div id="s-sidebar"></div> <div id="s-content"></div> </div> <div id="s-body"> Особая функция ID<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 есть одна полезная особенность. Допустим, на странице есть секция с комментариями <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
|
Сообщение
#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">Данная компания не существует и закрылась с © 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 |
21.6.2010, 13:02;
Ответить: Evansw
Сообщение
#5
|
|
arlekin
<link href="style.css" rel="stylesheet" type="text/css"> или <style> Стиль </style> или <p style="стиль"> Какой то текст </p> |
|
|
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 |
10.4.2011, 13:18;
Ответить: Malganus
Сообщение
#7
|
|
Скажите, а где правильно размещать css документ. В той же дериктории, где и html документ или в папке css. То есть как правильно, так <link href="css/style.css" rel="stylesheet" type="text/css" /> или так <link href="style.css" rel="stylesheet" type="text/css" /> да без разницы. Можно хоть все файлы сайта размещать в одной директории, другое дело, что это неудобно, а порой небезопасно. |
|
|
bonec |
24.10.2011, 14:50;
Ответить: bonec
Сообщение
#8
|
|
Спасибо, очень интересная и полезная информация)
Дуамю поупражняться в этом в свободное время) Автор + |
|
|
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 |
1.1.2013, 10:34;
Ответить: Ayrat76
Сообщение
#10
|
|
Можно ли через CSS, задать условия отображения цвета фона при условии? Например при положительных значениях в ячейках белый, при отрицательных красный. Или все же лучше это делать через JS?
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Разработка/доработка сайтов Wordpress, HTML/CSS/JS Вёрстка, перенос на WP, правки |
9 | malamut | 3459 | 25.1.2024, 14:36 автор: malamut |
|
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое | 5 | CULA | 3398 | 19.12.2023, 18:55 автор: CULA |
|
ВНИМАНИЕ: Хочешь начать работу с фармой? Легко! StimulCash.com! | 67 | StimulCash | 195435 | 18.12.2023, 12:13 автор: Crimean |
|
Веб-разработка (HTML, CSS) | 1 | ViktoriaFE | 6459 | 5.5.2021, 5:22 автор: bekett |
|
Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины). | 0 | kozak199110 | 1667 | 3.3.2021, 12:22 автор: kozak199110 |
Текстовая версия | Сейчас: 19.4.2024, 15:53 |