Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архивы » Schwarzer Traum


Schwarzer Traum

Сообщений 1 страница 10 из 33

1

Добрый день, Arashi.

Сначала задам несколько вопросов:
- Знакома ли с классическим "FAQ по CSS" от ОТП? (_link_)
- На каком браузере будем работать? (Я использую Opera со встроенной Dragonfly, для Мозиллы или Хрома эти дополнения будут носить иное название, ну и чуть-чуть различаться внешне)

Тестовый форум:   http://rurirura.rusff.ru/

Отредактировано Wilhelm (2012-06-08 15:02:24)

0

2

Wilhelm
ахах :3 я чуть опоздала с лс) извини)
у меня есть опера, мозила, гугл и долго грузящая гадость х)
на каком тебе удобнее)

Отредактировано Arashi (2012-06-05 20:52:40)

0

3

Мне гораздо привычнее на Опере )

Форум наш состоит, скажем так, из "слоев", наложенных друг на друга. Только в отличие от бумажного коллажа или фотошопного вырезать часть слоя так, чтобы сквозь него можно было "продеть" другой - нельзя. Можно изменить размер, разместить его где-нибудь в уголке, задать прозрачный фон и производить прочие украшательства, но по сути своей он всегда остается прямоугольной областью.

Нашим главным помощником в обучении будут средства разработчика, встроенные в браузер, в случае Оперы это будет Dragonfly. Для того, чтобы ее запустить, достаточно щелкнуть правой кнопкой мыши по любому месту форума и выбрать пункт "Проинспектировать элемент" (для Мозиллы будет "Inspect Element with Firebug"):
http://uploads.ru/i/Y/e/a/YeaIC.gif
Должно загрузиться такое вот окошко:
http://uploads.ru/t/j/L/h/jLh1e.gif

Вполне возможно, что оно загрузится не внизу, а где-нибудь посередине - тогда просто перетащи его в удобное для себя место. Или нажми кнопку пристыковки:
http://uploads.ru/i/0/H/u/0HuVS.gif

Отодрать окошко от нижней границы можно тем же методом - тыкнув на крайнюю кнопку (только на тот момент там будут показаны два слоя).  Также очень полезными будут эти две кнопки:
http://uploads.ru/i/4/p/H/4pHxQ.gif
Щелкаем на нее, переводим курсор мыши на форум - и наблюдаем, как подсвечиваются разные блоки. Щелкаем на одном из них - и в нашем рабочем окошке с кодом выскочит его месторасположение, свойства и, самое важное, название. Не всегда удается "попасть" в нужную область, но это не страшно, эту проблему обойдем другим путем.
Проверочное задание: запустить и попробовать повыделять различные элементы, чтобы иметь представление, как оно вообще на практике происходит )  Выключается Dragonfly классически - нажатием на крестик (не браузера, а самой "Стрекозы")

Собственно, сейчас самое время рассказать о том, что такое id и class и чем они различаются. Нет особого смысла грузить техническими деталями наше обучение, о них можно почитать как-нибудь на досуге, а пока просто и незатейливо:
id - это идентификатор, уникальное имя элемента. Может присваиваться только один раз (т.е. такой вот элемент на странице - только один-единственный). В css-коде такие элементы прописываются с решеткой перед своим названием, как пример - #pun {...} . В html-коде же к идентификатору обращаются как раз через id. Запись html будет выглядеть как: <div id="pun">..</div>
class - классы. "Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега." [цэ] А если проще - то классы нам нужны для того, чтобы разнообразить стилевые украшательства для идентификаторов. И если id может встречаться в коде только один раз (в смысле, определенное имя id), то class'ов с одинаковым именем может быть очень много.
Запись для css:  .punbb {...}
Обращение через html: <div class="punbb">...</div>

Как пример совмещенности:  #pun-redirect .main-title {display: none;}  (id в  данном случае носит имя pun-redirect, а class - имя main-title)

Есть записи и без точек и решеток, это селекторы тегов.

немного о них

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

CSS:  div {...}
html: <div>...</div>

В данном варианте все те украшательства, что мы присвоим слектору div будут применены ко всем тегам <div> в документе. А так как "дивов" у нас много, то это банально нецелесообразно и порой даже вредно. А html и body в принципе должны встречаться на странице документа только один раз. Есть еще универсальный селектор, обозначаемый звездочкой, которая означает, что данное правило будет применяться вообще к любому Html тегу в коде:

* {color: #000;}

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

/* A2.2 */
.punbb * {
  margin: 0
  }

Как читаем: "Каждый элемент, заключенный в классе punbb (который, в свою очередь, входит в состав/накладывается поверх #pun), по умолчанию не будет иметь отбивки (отступов от иных частей)"

Пока то, что нужно усвоить - идентификаторы начинаются с #, классы - с точки перед названием. В html к идентификатору обращаются как id="..."  ,  а к классу как class="..."  При обращении через html точки-решетки не ставятся.

Теперь о порядке слоев. В исходном коде можно наблюдать такую картинку:
http://uploads.ru/i/K/W/B/KWBCY.gif
Зеленым подчеркнуты и пронумерованы те части, с которыми мы будем в дальнейшем работать.
Вообще слои легче всего сравнить с книгой или стопкой бумаги - когда один лист накладывается поверх другого. Т.е. самым первым, самым нижним, у нас будет лист html, поверх него ложится другой лист body и т.д.  Вот примерная схема нашей "бумажной стопки":
http://uploads.ru/i/S/F/O/SFOrT.gif
*на верхний не обращай пока внимания, его я забыл удалить и пришлось прописывать.
Соответственно, можно посмотреть, какой слой будет перекрывать предыдущий.


Вводная часть закончена, задание:  выделить из html-записи идентификаторы и классы, записать их названия в css, соблюдая правила точек-решеток.

<div id="html-header">
<div id="pun-stats" class="section">
<div class="section">
<div id="pun-break3" class="divider">

0

4

задание:
Идентификаторы :

Код:
html-header, pun-stats, pun-break3

Классы:

Код:
section

В css:

Код:
#html-header {...}
#pun-stats .section {...}
#pun-break3 .divider{...}

Надеюсь хотя бы что-нибудь правильно?))

Отредактировано Arashi (2012-06-05 23:24:14)

+1

5

С точками-решгетками все правильно, но запись имени - нет.

Разбираем строчку:

<div id="html-header">

есть id - значит, перед названием будет стоять решетка. В кавычках стоит название. Название может содержать тире, нижнее подчеркивание, цифры, нежелательно использовать пробелы (вообще в будущем мы будем вводить новые блоки и уже сами будем их называть, а пробелы лучше всего будет заменить нижним подчеркиванием, например: tablica_new ). Учитывая это получаем:
#html-header {...}

<div id="pun-stats" class="section">

Здесь идет совмещение id и класса. Выделяем каждый из них, учитывая, что в кавычках стоит название целиком, оно неделимо:
#pun-stats
.section
В совмещенном виде это будет: #pun-stats .section {...}   
(это как бы "слой с названием section, находящийся внутри слоя pun-stats". Еще нагляднее и упрощеннее: два листа, из которых тот, что побольше - внизу, а поменьше - наверху. Побольше - это pun-stats, а поменьше - section.)

Теперь попробуй сама:

<div id="pun_wrap">
<div class="post-rating">
<div id="post-45-vote" class="post-vote">

Отредактировано Wilhelm (2012-06-05 23:24:32)

0

6

Wilhelm
я то переделала)
Идентификаторы:
pun_wrap, post-45-vote
Класс:
post-rating
В css:
#pun_wrap {...}
#post-45-vote .post-rating {...}

0

7

Да, почти все правильно  :cool:
Ошибка тут:

#post-45-vote .post-rating {...}

для строки <div id="post-45-vote" class="post-vote">  css-запись будет выглядеть как:
#post-45-vote .post-vote {...}
id и class не обязательно должны идти вместе, они могут встречаться и по отдельности:
html: <div class="post-rating">
css:   .post-rating {...}

ОК. Следующие наши шаги на выбор:
- Можем рассматривать подробно css форумный, где что расположено и за что отвечает.
- Можно попытаться разобраться на простейшем уровне с html-тегами, научиться составлять простые таблички, объединять колонки и прочее по мелочи. Чего-то шикарного не могу обещать, но, думаю, минимума этого будет достаточно, чтобы в случае чего опправить косяки в табличках и тексте на своем форуме.

Отредактировано Wilhelm (2012-06-05 23:38:52)

0

8

Wilhelm
давай вначале 1, а потом 2)

0

9

Wilhelm написал(а):

для строки <div id="post-45-vote" class="post-vote">  css-запись будет выглядеть как:
#post-45-vote .post-vote {...}
id и class не обязательно должны идти вместе, они могут встречаться и по отдельности:
html: <div class="post-rating">
css:   .post-rating {...}

аа это я просто залезла не туда) так я поняла)

0

10

Вил х)
Если меня нет в сети, ты всё равно напиши то, что надо изучить и задание :3 я приду всё сделаю)
думаю так нам удобнее будет)

0


Вы здесь » Кот » Архивы » Schwarzer Traum


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC