DH: Life for art.

Объявление

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

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

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


Вы здесь » DH: Life for art. » Обучение HTML|CSS » Свобода выбирать.


Свобода выбирать.

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

1

Привет, Настя. Меня зовут Лера, если ты еще не знаешь. Я так понимаю, что твоя основная задача - научиться делать стиль, потому тебе сразу нужно запастись картинками, которые мы будем вставлять уже непосредственно в наш будущий стиль, а также иметь под рукой пробник (если ты не знаешь, что это, то пробником обычно называют неактивный форум, где можно свободно экспериментировать с созданием стиля).
Предлагаю тебе для начала ознакомиться с темами в этом разделе, а потом мы приступим непосредственно к разбору полётов и твоим вопросам.

0

2

Привет, Лера!
С темами я ознакомилась, пробник специально создала: http://bynttest.rusff.me/

+1

3

Byntarka, молодец. Скажи, знаешь ли ты чем отличаются HTML и CSS?

0

4

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

Скажи, знаешь ли ты чем отличаются HTML и CSS?

Ну да, и частично разбираюсь (кажется). HTML вроде знаю немного, правда могу перепутать или забыть кое-что. А с CSS начала потихоньку разбираться.
В общем, я и знаю их, и не знаю))

0

5

Byntarka, да, а теперь мне расскажи о разнице между ними)

0

6

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

а теперь мне расскажи о разнице между ними)

Ух, коварная))
Ну, html позволяет создать структуру документа, всякие там таблицы, пункты и пр.
А css отвечает за стиль в целом - цвета, фон и пр.
Правильно, учитель?

0

7

Это ты из определения вычитала? Вроде бы и да, а вроде бы и нет. На самом деле с помощью 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 или right

border

Все параметры рамки, например, толщина, цвет и т.д.
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 - посередине

0

8

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

Это ты из определения вычитала?

Нет, по памяти дала примерное объяснение))

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

HTML всегда бывают немного сложнее, ну и конечно занимают они в настройках ой как много места. Потому чисто с практической стороны куда удобнее задавать настройки для собственного форума именно через свой стиль. Думаю, с него мы и начнём?)

А мне, по незнанию, наверное, раньше казалось, что CSS намно-о-ого труднее))

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

Нам понадобятся основные теги

Вроде, усвоила. Что дальше?

0

9

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

А мне, по незнанию, наверное, раньше казалось, что CSS намно-о-ого труднее))

Вообще для форумов CSS ограничивается только вот этими тегами и названиями элементов. Поскольку запомнить их все нереально, да и половина нам в основном никогда не пригодится, всё, что нам нужно знать - как грамотно воспользоваться кодом. А теперь немного об этом... Вообще-то я очень надеюсь, что ты аккуратна в использовании кодов, но не лишним будет напомнить, что после каждого параметра для элемента нам необходимо ставить точку с запятой(";"). Я это говорю к тому, что вот это простенькое правило пригодится не только для кодов, но и для скриптов. Вот есть такой вредный скрипт цветовыделения; если в нем не доставить запятую или поставить её не туда, он напрочь отказывается работать, или коверкает весь форум. Будем считать, что он требует сверхвнимания к себе:)) В кодах точка с запятой работает по тому же принципу. Приведу пример, для него возьмём код центрирования пользовательского навигационного меню:

Код:
/* CS1.2 */
#pun-ulinks .container {
   color: #363636;
   text-align: center;
}

Если мы не доставим запятую после последнего параметра - это ещё полбеды, но если не поставить знак после цвета, вполне возможно, что код откажется либо менять цвет, либо центрировать текст. Вредный такой.
Надеюсь, это ты запомнишь раз и навсегда.. знаешь вообще, как правильно прописывать коды? Как их соединять вместе?

0

10

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

Надеюсь, это ты запомнишь раз и навсегда..

Как же это забудешь))

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

знаешь вообще, как правильно прописывать коды? Как их соединять вместе?

В полях "свой стиль" как-то умудряюсь их прописывать. Вроде, получается. Через раз, конечно, но опыт приходит с практикой, верно?
Да, кстати, спасибо большое за те статьи по CSS. Очень познавательные, и безусловно полезные.   :)

0

11

Верно, хотя я имела ввиду немного другое. По сути, "Свой стиль" - это просто набор кодов, там есть шаблон, и тебе остаётся только выбрать, что подставить.Я же имела ввиду, как без помощи каких-то подсказок прописать код с нуля. Ну это тебе понадобится только если ты захочешь стать прямо асом, пока тебе это не нужно, полагаю.
За статьи пожалуйста, рада, что они пригодились:)
Займёмся стилем?

0

12

Если ты не сильно против, я вынуждена отлучиться на неделю. Вернее, ни ты, ни я, ничего не решаем и не изменим. Так что, не серчай,  исчезаю.

0

13

Byntarka, отпишись только, когда вернёшься.

0

14

carlson, обязательно)

0

15

Отпишись. Через пару дней тема отправится в архив.

0

16

В архив.

0

17

Привет!
Очень рада, что ты вновь за меня возьмешься))). Спасибо!
Итак, начнем с того, на чем закончили (забавно получается).

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

после каждого параметра для элемента нам необходимо ставить точку с запятой(";") Я это говорю к тому, что вот это простенькое правило пригодится не только для кодов, но и для скриптов.

Ясно. Про коды я знаю, буду знать и про скрипты.

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

Надеюсь, это ты запомнишь раз и навсегда.. знаешь вообще, как правильно прописывать коды? Как их соединять вместе?

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

По сути, "Свой стиль" - это просто набор кодов, там есть шаблон, и тебе остаётся только выбрать, что подставить.Я же имела ввиду, как без помощи каких-то подсказок прописать код с нуля.

Нет, с нуля я не умею. К сожалению. Но, если б умела, то меня тут, наверное, не было бы, верно?))

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

Займёмся стилем?

Займемся. Что для этого нужно?

0

18

Привет, теперь, кажется, немного торможу я:)

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

Займемся. Что для этого нужно?

НУ, как я уже сказала, пробник. И, конечно, давай определяться с тематикой и цветовой гаммой.

0

19

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

Привет, теперь, кажется, немного торможу я:)

Эт не страшно, ведь меня внезапно сорвали с места, не дав даже возможности сообщить об этом) Прошу прощения)) Но я вновь здесь и готова к труду и обучению)))

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

НУ, как я уже сказала, пробник. И, конечно, давай определяться с тематикой и цветовой гаммой.

Вот пробник.
Тематика - вот хочется Fringe или Torchwood, ничего не могу с собой поделать. А цвета: основа - белый (светлый), фон - черный (темный) + красный (или синий - был вариант, но слишком ярко вышло). Вот как-то так почему-то))

0


Вы здесь » DH: Life for art. » Обучение HTML|CSS » Свобода выбирать.


Рейтинг форумов | Создать форум бесплатно