Кот

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

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


Вы здесь » Кот » Архивы » `tsunami | деревянный


`tsunami | деревянный

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

1

Хорошего дня. Я очень рада, что стала теперь твоим учителем. Очень надеюсь, что нашу обучение пойдет тебе на пользу, ты научишься многому интересному и познавательному. К сожалению, сейчас не очень много времени на обучение, я буду стараться читать тему и проверять работы по мере возможности.

План наших занятий

1. Что такое CSS? На чем основаны дизайны?
2. Стандартный код. Разберем поверхностно второе окно стиля.
3. Изменяем стандартный код под себя.
4. Работаем с кодом.
5. Добавим чего-то нового.
6. Разберем поверхностно первое окно стиля.
7. Разные виды дизайнов.

Журнал наших занятий

Буду дополнять по мере выполнения тобой заданий.

Тема урока. Задание.

Оценка за задание.

Что такое CSS?
На чем основаны дизайны?
Задание 1.

Оценки нет, так как разобрался не с первого раза.

Стандартный код.
Разберем поверхностно второе окно стиля.
Задание 2.

5
Молодец, все отлично.

Изменяем стандартный код под себя.
Задание 3.

5
Ошибок нет, все хорошо. Мышки *_*

Работаем с кодом.
Задание 4.

P.S. Ошибки я буду выделять красным и исправлять им же. Фуксией выделяю и исправляю недочеты. Таким цветом буду писать заголовки и сноски из своих же уроков для повторного прочтения.
Итак, начнем. Расскажи, пожалуйста, немного конкретнее, что ты умеешь, чему хочешь научиться. 

+1

2

Я тоже очень рад.)

`tsunami написал(а):

Итак, начнем. Расскажи, пожалуйста, немного конкретнее, что ты умеешь, чему хочешь научиться.

При создании дизайна я всегда брал по кусочку с каждого форума (либо с туториалов, посвященных созданию дизайна), и подставлял свою графическую часть. Но подобного рода составление дизайна очень ограничено своей функциональностью и общим внешним видом. Если же я начинаю составлять дизайн самостоятельно, я начинаю путаться в кодах, а также возникает большая проблема - создание графики для дизайна. Т.е. делаю я, к примеру, фон для форума (вместе с отделом для текста, то бишь контента), а этот самый отдел для контента получается у меня маленьким, либо слишком большим.
что хочу
Хочу научится делать действительно достойные по функциональности дизайны, хочу чувствовать себя в Css-кодах, как рыба в воде.
что умею
разбираюсь немного в структуре кода. т.е. атрибут от значения отличить смогу)

Отредактировано деревянный (2013-03-24 12:54:57)

0

3

Для начала можешь внимательно полистать полезные статьи на форуме по дизайну, там есть очень хорошие. Для твоего обучения я буду пользоваться разными учебниками по CSS, если тебе будет интересно, ты потом сам сможешь посмотреть в интернете что-то подробнее. 
Начнем.
Что же такое CSS?
Для начала как всегда немного теории. CSS расшифровывается как Cascading Style Sheets (каскадные листы стилей). Вообще CSS предназначен для того, чтобы делать оформление Веб-страниц. Это немного похоже на то, что можно делать в текстовом редакторе, например, в Microsoft Word'е. Но на самом деле, с помощью CSS можно делать намного больше.
Все форумы или сайты состоят из страниц, текста, ссылок. Определенный дизайн же просто делает форум удобнее для чтения и восприятия, но ничего более. Дизайн делает форум или сайт более красивым, отличает его от других, подчеркивает его тематику. Собственно, главные цели самого дизайнера я тоже уже перечислила.

Селекторы, свойства, значения
Так же, как в HTML есть теги, в CSS есть "селекторы". Селекторы – это имена стилей. Селектор определяет тот элемент, который будет каким-то образом меняться. Учить селекторы не нужно, их всегда можно подглядеть в исходном коде, так как это уникальные индентификаторы и классы элементов.
У каждого селектора есть "свойства", определяемые внутри фигурных скобок. Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения. Свойство - это то, что будет меняться в элементе, который мы выбрали селектором (например, фон). Значения свойств присваиваются при помощи двоеточия и разделяются точкой с запятой. С помощью значений мы указываем, что именно будет меняться (например, цвет фона).
Не бывает такого, чтобы свойство было отдельно от значения. Они всегда вместе.

body {
    font-size: 0.8em;
    color: #12007F;
}


В данном примере создается селектор body, в котором определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст между тегами body (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8 em и темно-синим цветом.

В коде css индентификаторы обозначаются решеткой (#), а классы точкой (.).

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 500px; top: 0px
}


Таких пар "свойство: значение" у селектора может быть несколько. В таком случае, мы указываем их через точку с запятой:

#селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}


Параметры CSS
Фон
1. Цвет

backroung-color
Цвет фона какого-то элемента. Значением здесь может быть только веб-название выбранного цвета.
2. Картинка
backround-image
Фоновая картинка. Значения:
url("...") - вместо многоточия идет прямая ссылка на выбранную картинку, естественно, загруженную через какой-то сервер. Если картинки нет, то можно оставить пустые скобки без кавычек внутри или же использовать значение none.
3. Повторение
backround-repeat
Определяет, будет ли повторяться фоновая картинка. Значения:
repeat (или repeat-xy) - повторяется
no-repeat - не повторяется
repeat-y - повторяется по оси y (вертикально)
repeat-x - повторяется по оси х (горизонтально)
4. Прокрутка
backround-attachment
Определяет, будет ли прокручиваться фон или нет. Значения:
fixed - не будет
scroll - будет
5. Расположение
backround-position
Определяет расположение фоновой картинки. Значения:
top - сверху
center - по центру
bottom - снизу
left - слева
right - справа

Шрифт, текст
Для более удобной работы стиль для шрифта можно прописывать в одну строчку, через запятую указывая значения.
font - все нижеперечисленные параметры шрифта вместе.
1. Цвет
color
Определяет цвет шрифта в элементе. Как значение может употребляться только веб-название какого-то цвета.
2. Размер
font-size
Определяет размер шрифта. В качестве значений можно использовать любые единицы измерения CSS (их все я привожу позже), а можно так называемые константы - стандартные размеры (xx-small, x-small, small, medium, large, x-large, xx-large).
3. Стиль
font-style
Определяет начертание шрифта. Значения:
normal - нормальное, обычное
italic - курсив
oblique - немного менее наклонный, чем курсив
4. Толщина
font-weight
Определяет толщину начертания. Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
Число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
5. Семейство шрифта
font-family
Список шрифтов может включать несколько названий, но тогда их нужно разделять запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

6. Выравнивание
text-align
Определяет выравнивание текста внутри элемента. Значения:
center - по центру
justify - по ширине
left - слева
right - справа
7. Украшения
text-decoration
Определяет декоративные элементы текста. Значения:
underline - нижнее подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Границы (рамки)
Для более удобной работы стиль для границ можно прописывать в одну строчку без запятых.
border - все нижеперечисленные параметры.
border-top - все параметры верхней рамки (это не селектор, а свойство).
border-bottom - все параметры нижней рамки (это не селектор, а свойство).
border-right - все параметры правой рамки (это не селектор, а свойство).
border-left - все параметры левой рамки (это не селектор, а свойство).
1. Цвет
border-color
Определяет цвет границы (рамки). В качестве значения может использоваться только веб-название какого-то цвета.
2. Толщина
border-weight
Определяет толщину границы (рамки). Значения пойдут ниже (см. единицы измерения).
3. Стиль
border-style
Опрелеляет стиль сторон рамки. Значения:
none - рамки нет вообще
dotted - пунктирная рамка из точек
dashed - обычная пунктирная рамка
solid - одинарная сплошная рамка
double - двойная сплошная рамка
groove - трехмерная впадающая рамка
ridge - трехмерная возвышающаяся рамка
inset - трехмерная заглубленность фона
outset - трехмерная выпуклость фона
Значения CSS
1. Единицы измерения

Единицы измерения

em (например, font-size: 2em) используется для определения размера шрифта. Так "2em" означает, что заданный шрифт будет в два раза больше шрифта по умолчанию.
px (например, font-size: 12px) единица измерения - пиксели.
pt (например, font-size: 12pt) единица измерения – пункты.
% (например, font-size: 80%) единица измерения – проценты.
Другие единицы измерения – pc (пики), cm (сантиметры), mm (миллиметры) и in (дюймы).
Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если ты хочешь полностью убрать рамку вкруг элемента, то можно задать "border: 0".

2. Цвета
Для всех параметров, требующих указания цвета, нужно указывать веб-название этого самого цвета. Оно состоит из шести знаков после решетки (#).

Задание на закрепление
Для следующих селекторов задаешь следующие параметры и выкладываешь сюда получившийся у тебя код. Дальше разбираем ошибки.
1. Для селектора фон задаешь такие параметры:
- любая фоновая картинка
- картинка повторяется по оси у
- картинка находится слева
- фон прокручивается
2. Для селектора шрифт задаешь такие параметры:
- цвет выбираешь сам
- размер шрифта 1.1em
- нормальное начертание
- шрифт Comic Sans Ms
3. Для селектора текст задаешь такие параметры:
- текст выравнивается по ширине
- имеет верхнее подчеркивание
4. Для селектора границы задаешь такие параметры:
- верхняя граница имеет толщину 6 пикселей, трехмерная возвышающаяся, цвет выбираешь сам
- нижняя граница имеет толщину 6 пикселей, трехмерная возвышающаяся, цвет выбираешь сам
- правая граница имеет толщину 3 пикселя, пунктирная из точек, цвет выбираешь сам
- левая граница имеет толщину 3 пикселя, пунктирная из точек, цвет выбираешь сам

+1

4

1.
body {
background-image: url("http://s3.uploads.ru/M6dJW.jpg");
backround-repeat: repeat-y;
backround-position: left;
backround-attachment: scroll;
}

2.
font {
color: #73AE59;
font-size: 1.1em;
font-style: normal;
font-family: "Comic Sans Ms";
}

3.
font {
text-align: justify;
text-decoration: overline;
}

4.
border {
border-top: 6px ridge #702312;
border-bottom: 6px ridge #702312;
border-right: 3px dotted #702312;
border-left: 3px dotted #702312;
}

0

5

Так-так-так, а что за путаница с селекторами?

1.
body backround {
background-image: url("http://s3.uploads.ru/M6dJW.jpg");
backround-repeat: repeat-y;
backround-position: left;
backround-attachment: scroll;
}

font text {
text-align: justify;
text-decoration: overline;
}

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

0

6

`tsunami написал(а):

Так-так-так, а что за путаница с селекторами?

не заметил этого в уроке

Могу дать еще одно задание похожее. Или следующий урок?

еще одно, если не трудно)

0

7

деревянный
Повторю, что можно было написать по-русски. Тем более, если при написании свойств фона везде есть приставка backround, то и селектор будет таким, да и с текстом то же самое.

Задание на закрепление
Для следующих селекторов задаешь следующие параметры и выкладываешь сюда получившийся у тебя код. Дальше разбираем ошибки.
1. Для селектора фон задаешь такие параметры:
- любая фоновая картинка
- картинка повторяется
- картинка находится слева
- фон прокручивается
2. Для селектора шрифт задаешь такие параметры:
- цвет выбираешь сам
- размер шрифта x-large
- начертание курсивом
- шрифт Georgia
3. Для селектора текст задаешь такие параметры:
- текст выравнивается по правому краю
- не имеет никаких украшений
4. Для селектора границы задаешь такие параметры:
- верхняя граница имеет толщину 6 пикселей, пунктирная из точек, цвет выбираешь сам
- нижняя граница имеет толщину 6 пикселей, пунктирная из точек, цвет выбираешь сам
- правая граница имеет толщину 4 пикселя, пунктирная, цвет выбираешь сам
- левая граница имеет толщину 4 пикселя, пунктирная, цвет выбираешь сам

0

8

фон {
background-image: url("http://s3.uploads.ru/M6dJW.jpg");
backround-repeat: repeat;
backround-position: left;
backround-attachment: scroll;
}

шрифт {
color: #73AE59;
font-size: x-large;
font-style: italic;
font-family: Georgia;
}

текст {
font {
text-align: right;
text-decoration: none;
}

границы {
border-top: 6px ridge #702312;
border-bottom: 6px ridge #702312;
border-right: 3px dotted #702312;
border-left: 3px dotted #702312;
}

0

9

деревянный
Со всеми селекторами одна и та же проблема:

В коде css индентификаторы обозначаются решеткой (#), а классы точкой (.).

У тебя решеточек нет нигде. И опять же что это?

деревянный написал(а):

текст {
font {

Здесь должен быть только один селектор - это раз, font - это шрифт, а совсем не текст - это два.
С границами ошибки:

границы {
border-top: 6px ridge dotted #702312;
border-bottom: 6px ridge dotted #702312;
border-right: 34px dotted dashed #702312;
border-left: 34px dotted dashed #702312;
}

Ну что я могу сказать. Опять не очень. Могу еще одно задание дать...

0

10

`tsunami написал(а):

Здесь должен быть только один селектор - это раз, font - это шрифт, а совсем не текст - это два.

скопировал неудачно 

`tsunami написал(а):

Ну что я могу сказать. Опять не очень. Могу еще одно задание дать...

Было бы замечательно. Постараюсь внимательней выполнить  http://uploads.ru/i/z/U/e/zUe1x.gif

+1


Вы здесь » Кот » Архивы » `tsunami | деревянный


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