Кот

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

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


Вы здесь » Кот » Архивы » `tsunami | Горячая девушка


`tsunami | Горячая девушка

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

1

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

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

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

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

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

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

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

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

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

Отредактировано `tsunami (2013-02-15 18:37:39)

0

2

Привет я тоже рада что нашла тебя:)))!
умею тому что отправлено было в моем портфолио  я там все подробно как могла описала!
а вот что связано с дизайнами и кодами Что такое CSS? безпонятия вообще ни имею:)!
если разрешишь начать я готова к обучению:)!
я появляюсь обычно с утра и вечером после 6)))!и пока не усну за компом тторчу:))!
просто на кухне комп:)))! ужобно:) все дела делать)))!

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. Для селектора шрифт задаешь такие параметры:
- цвет выбираешь сама
- размер шрифта medium
- нормальное начертание
- шрифт Trebuchet Ms
3. Для селектора текст задаешь такие параметры:
- текст выравнивается по ширине
- имеет верхнее подчеркивание
4. Для селектора границы задаешь такие параметры:
- верхняя граница имеет толщину 5 пикселей, трехмерная впадающая, цвет выбираешь сама
- нижняя граница имеет толщину 5 пикселей, трехмерная впадающая, цвет выбираешь сама
- правая граница имеет толщину 3 пикселя, пунктирная, цвет выбираешь сама
- левая граница имеет толщину 3 пикселя, пунктирная, цвет выбираешь сама

Отредактировано `tsunami (2013-02-16 11:45:10)

0

4

а точннее
работа с текстурами
работа с эффектами наложения
работа с анимацией!
!"все могу:) "!

0

5

Горячая девушка написал(а):

а точннее
работа с текстурами
работа с эффектами наложения
работа с анимацией!
!"все могу:) "!

Молодец. Я прислала урок т.т (см. выше)

0

6

как все сложно то!!!!!!!
а где эти вводить значения все???!
есть какая то программа особая???
то есть мне пока что рисовать ни чего не надо!????

0

7

Горячая девушка написал(а):

как все сложно то!!!!!!!

Надо разобраться, потом станет легко.

Горячая девушка написал(а):

а где эти вводить значения все???!

В каком плане? Мне нужен код, напечатанный тобою здесь - в этой теме, в обычном сообщении.

Горячая девушка написал(а):

есть какая то программа особая???

Какая программа? Зачем?

Горячая девушка написал(а):

то есть мне пока что рисовать ни чего не надо!????

Это уроки верстания, кодов. Рисовать тебе и дальше не придется. Если ты хотела научиться делать дизайны, то рисование тут пока точно ни к чему.

0

8

хорошо приготовлю домашнее задание выложу сюда:)!

0

9

Горячая девушка написал(а):

хорошо приготовлю домашнее задание выложу сюда:)!

Ну, это всегда так и делается...

0

10

# backround {background-image: url("...");
backround-repeat:no-repeat;
backround-position: center;
backround-attachmen: scroll;
}

# font { color: red
font-size: medium;
font-style: normal;
font-family: Trebuchet Ms;
}

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

# border-top{ border-weight: 5px;
border-style: groove;
border-color:navy;
}

# border-top{ border-weight: 5px;
border-style: groove;
border-color: navy;
}

border-right {border-weight: 3px;
border-style: dashed;
border-color: red;
}

border-right {border-weight: 3px;
border-style: dashed;
border-color: red;
}

ggfdbkmuy
правильно ли я поняла сидела над  CSS очень долго:(!
ни разу таким не занималась!!!!!!

0


Вы здесь » Кот » Архивы » `tsunami | Горячая девушка


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