Привет, Настя. Меня зовут Лера, если ты еще не знаешь. Я так понимаю, что твоя основная задача - научиться делать стиль, потому тебе сразу нужно запастись картинками, которые мы будем вставлять уже непосредственно в наш будущий стиль, а также иметь под рукой пробник (если ты не знаешь, что это, то пробником обычно называют неактивный форум, где можно свободно экспериментировать с созданием стиля).
Предлагаю тебе для начала ознакомиться с темами в этом разделе, а потом мы приступим непосредственно к разбору полётов и твоим вопросам.
Свобода выбирать.
Сообщений 1 страница 19 из 19
Поделиться12011-07-31 16:10:12
Поделиться22011-07-31 16:50:04
Привет, Лера!
С темами я ознакомилась, пробник специально создала: http://bynttest.rusff.me/
Поделиться32011-07-31 16:56:49
Byntarka, молодец. Скажи, знаешь ли ты чем отличаются HTML и CSS?
Поделиться42011-07-31 17:07:41
Скажи, знаешь ли ты чем отличаются HTML и CSS?
Ну да, и частично разбираюсь (кажется). HTML вроде знаю немного, правда могу перепутать или забыть кое-что. А с CSS начала потихоньку разбираться.
В общем, я и знаю их, и не знаю))
Поделиться52011-07-31 17:11:48
Byntarka, да, а теперь мне расскажи о разнице между ними)
Поделиться62011-07-31 17:27:39
а теперь мне расскажи о разнице между ними)
Ух, коварная))
Ну, html позволяет создать структуру документа, всякие там таблицы, пункты и пр.
А css отвечает за стиль в целом - цвета, фон и пр.
Правильно, учитель?
Поделиться72011-08-01 11:11:57
Это ты из определения вычитала? Вроде бы и да, а вроде бы и нет. На самом деле с помощью HTML тоже можно создать фон, функция этих кодов не ограничивается только шрифтами, пунктами, таблицами. Потому бери глубже:)
Вообще, исходя из собственного опыта, как не удивительно, HTML всегда бывают немного сложнее, ну и конечно занимают они в настройках ой как много места. Потому чисто с практической стороны куда удобнее задавать настройки для собственного форума именно через свой стиль. Думаю, с него мы и начнём?)
Нам понадобятся основные теги, их лучше где-то сохранить, если ты собираешься использовать свои знания и дальше. Но они также легко запоминаются.
background-color
Цвет фона элемента. Значением может быть веб-название цвета.
background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинкиbackground-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeatx - размножается по горизонтлаи
repeaty - размножанется по вертикали
repeatxy - размножается в обоих направлениях.background-position
Расположение фоновой картинки на странице
Значения:
Сначала указывается расположение по вертикальной оси: top, center или bottom, затем по горизонтальной: left, center или rightborder
Все параметры рамки, например, толщина, цвет и т.д.
border-color
Цвет рамкиborder-width
Толщина рамкиborder-width
Толщина рамкиborder-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фонаborder-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
color
Цвет шрифта в элементе
float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none отображает объект вставленным в страницуfloat
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none отображает объект вставленным в страницуfont-size
Размер шрифта
А также:
xx-small, x-small, small, medium, large, x-large, xx-large.font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсивfont-weight
Толщина начертания
Значения:
normal - обычный шрифт
bold - полужирный
число от 100 (минимальная жирность) до 900 (максимальная)font-family
Семейство шрифта
font
Все вышеперечисленные параметры шрифта вместе
display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемнт как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.height
высота элемента
width
ширина элемента
padding и margin
Это два на первый взгляд похожих параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта.
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данном случае текст.padding
все стороны отбивки сразу.
padding-top
Верхняя отбивка
padding-bottom
нижняя отбивка
padding-left
левая отбивка
padding-right
Правая отбивка.margin
все стороны отступа сразу.
margin-top
Верхний отступ
margin-bottom
нижний отступ
margin-left
левый отсуп
margin-right
Правый отсупtext-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центруtext-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание.vertical-align
выравнивание элемента по вертикали
Значения:
top - по верхнему краю
bottom - по нижнему
middle - посередине
Поделиться82011-08-01 12:00:39
Это ты из определения вычитала?
Нет, по памяти дала примерное объяснение))
HTML всегда бывают немного сложнее, ну и конечно занимают они в настройках ой как много места. Потому чисто с практической стороны куда удобнее задавать настройки для собственного форума именно через свой стиль. Думаю, с него мы и начнём?)
А мне, по незнанию, наверное, раньше казалось, что CSS намно-о-ого труднее))
Нам понадобятся основные теги
Вроде, усвоила. Что дальше?
Поделиться92011-08-01 12:23:54
А мне, по незнанию, наверное, раньше казалось, что CSS намно-о-ого труднее))
Вообще для форумов CSS ограничивается только вот этими тегами и названиями элементов. Поскольку запомнить их все нереально, да и половина нам в основном никогда не пригодится, всё, что нам нужно знать - как грамотно воспользоваться кодом. А теперь немного об этом... Вообще-то я очень надеюсь, что ты аккуратна в использовании кодов, но не лишним будет напомнить, что после каждого параметра для элемента нам необходимо ставить точку с запятой(";"). Я это говорю к тому, что вот это простенькое правило пригодится не только для кодов, но и для скриптов. Вот есть такой вредный скрипт цветовыделения; если в нем не доставить запятую или поставить её не туда, он напрочь отказывается работать, или коверкает весь форум. Будем считать, что он требует сверхвнимания к себе:)) В кодах точка с запятой работает по тому же принципу. Приведу пример, для него возьмём код центрирования пользовательского навигационного меню:
/* CS1.2 */ #pun-ulinks .container { color: #363636; text-align: center; }
Если мы не доставим запятую после последнего параметра - это ещё полбеды, но если не поставить знак после цвета, вполне возможно, что код откажется либо менять цвет, либо центрировать текст. Вредный такой.
Надеюсь, это ты запомнишь раз и навсегда.. знаешь вообще, как правильно прописывать коды? Как их соединять вместе?
Поделиться102011-08-01 12:33:27
Надеюсь, это ты запомнишь раз и навсегда..
Как же это забудешь))
знаешь вообще, как правильно прописывать коды? Как их соединять вместе?
В полях "свой стиль" как-то умудряюсь их прописывать. Вроде, получается. Через раз, конечно, но опыт приходит с практикой, верно?
Да, кстати, спасибо большое за те статьи по CSS. Очень познавательные, и безусловно полезные.
Поделиться112011-08-01 13:17:25
Верно, хотя я имела ввиду немного другое. По сути, "Свой стиль" - это просто набор кодов, там есть шаблон, и тебе остаётся только выбрать, что подставить.Я же имела ввиду, как без помощи каких-то подсказок прописать код с нуля. Ну это тебе понадобится только если ты захочешь стать прямо асом, пока тебе это не нужно, полагаю.
За статьи пожалуйста, рада, что они пригодились:)
Займёмся стилем?
Поделиться122011-08-01 22:42:47
Если ты не сильно против, я вынуждена отлучиться на неделю. Вернее, ни ты, ни я, ничего не решаем и не изменим. Так что, не серчай, исчезаю.
Поделиться132011-08-01 22:59:10
Byntarka, отпишись только, когда вернёшься.
Поделиться142011-08-01 23:02:00
carlson, обязательно)
Поделиться152011-08-20 09:46:07
Отпишись. Через пару дней тема отправится в архив.
Поделиться162011-08-26 15:29:48
В архив.
Поделиться172011-09-10 10:46:28
Привет!
Очень рада, что ты вновь за меня возьмешься))). Спасибо!
Итак, начнем с того, на чем закончили (забавно получается).
после каждого параметра для элемента нам необходимо ставить точку с запятой(";") Я это говорю к тому, что вот это простенькое правило пригодится не только для кодов, но и для скриптов.
Ясно. Про коды я знаю, буду знать и про скрипты.
Надеюсь, это ты запомнишь раз и навсегда.. знаешь вообще, как правильно прописывать коды? Как их соединять вместе?
По сути, "Свой стиль" - это просто набор кодов, там есть шаблон, и тебе остаётся только выбрать, что подставить.Я же имела ввиду, как без помощи каких-то подсказок прописать код с нуля.
Нет, с нуля я не умею. К сожалению. Но, если б умела, то меня тут, наверное, не было бы, верно?))
Займёмся стилем?
Займемся. Что для этого нужно?
Поделиться182011-09-18 13:11:31
Привет, теперь, кажется, немного торможу я
Займемся. Что для этого нужно?
НУ, как я уже сказала, пробник. И, конечно, давай определяться с тематикой и цветовой гаммой.
Поделиться192011-09-22 17:37:28
Привет, теперь, кажется, немного торможу я
Эт не страшно, ведь меня внезапно сорвали с места, не дав даже возможности сообщить об этом) Прошу прощения)) Но я вновь здесь и готова к труду и обучению)))
НУ, как я уже сказала, пробник. И, конечно, давай определяться с тематикой и цветовой гаммой.
Вот пробник.
Тематика - вот хочется Fringe или Torchwood, ничего не могу с собой поделать. А цвета: основа - белый (светлый), фон - черный (темный) + красный (или синий - был вариант, но слишком ярко вышло). Вот как-то так почему-то))