Кот

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

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


Вы здесь » Кот » Архив обучения от 03.12 » menestrel #1


menestrel #1

Сообщений 11 страница 20 из 36

11

Итак, ладно не будем тянуть кота за хвост, я думаю мало кому интересно, что:

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.

Но я должна это написать, ибо, просто так должно быть во всяком уроке, который повествует об этом деле (:
А если на пальцах, то любой форум, без стиля css, будет выглядеть так:
http://s3.uploads.ru/t/xWJn7.jpg

Ну теперь, когда вы поняли предназначение  css-файла, мы можем приступить к синтаксису.
Все стили css состоят из селекторов (классов, псевдоклассов, псевдоэлементов...) и их параметров. И записываться это все таким образом:

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

mybb и подобные форумы, можно поделить на шесть главных селекторов, заключенных в один главный-преглавный под названием pun. А еще есть body. Этот селектор отвечает, за ВСЕ пространство, которое находиться за остальными элементами. Короче, если представить сайт как сандвич, то body будет там последним куском хлеба. 
http://s2.uploads.ru/t/YIkuU.jpg
И так, разберем все по порядку.
pun-title - отвечает за шапку сайта, где-то в его дебрях обитает и реклама, и заголовок, а чуть выше него лежит тот самый html-вверх.
pun-navlinks  - менюшка, тут и говорить нечего.
pun-announcement  - кто знает английский, сразу понял, что это объявление.
pun-main - самый толстый, не считая pun'а селектор. Отвечает за форум/контент
statscon - статистика.
pun-about - футер/подвал/низ форума, полный антипод pun-title. Ниже него располагается тот самый html-низ.
body - в нем обычно прописываться фон страницы (не подложки форума!)

К любому из этих селекторов мы можем указать параметры. Самих этих "правил" в css великое множество, всех их описать я не смогу, да это и не нужно. Я сама не помню всех их наизусть. Есть хороший сайт, там вы сможете найти список ВСЕХ параметров. Там же и удобная навигация, хороший поиск, вообще пользуйтесь)
Представим нам захотелось поставить повторяющее фоновое изображение, допустим  фиалки:
http://s2.uploads.ru/t/cbwmh.jpg
За фон форума, как мы теперь знаем, отвечает селектор боди, пол дела сделано! Теперь идем на вышеуказанный сайт, css ---> справочник css и находим там...параметр background-image, тобишь фон-изображение. Пишем, селектор (body) + свойство (background):

Код:
body{
background-image: 
}

Так, не хватает значения. Нам нужно указать,  какой фон мы хотим/откуда его взять. В справочнике написано,  как это осуществить
background-image: url('ссылка на изображение')
Грузим фиалки на uploads и копипастим ссылку куда указано. В результате получаем:

Код:
body{
background-image: url('http://s2.uploads.ru/cbwmh.jpg');
}

Хочу чтобы вы все завели свой тестовый форум и там проверили, как это работает и кинули ссылочки в эту тему. Можете взять фоновое изображение на свой вкус (:
На этом первый урок закончен.  Жду ваших вопросов.

Отредактировано menestrel (2012-12-24 22:53:41)

0

12

menestrel
долго пыталась поставить фон, ничего не получалось убрала решетку # и все заработало. у боди точно должна быть решетка?
> тестовый

0

13

crimson soda сори, мой косяк (совсем завозилась с modx'ом, все мысли в этих селекторах) У боди нет решетки! Боди это теговый селектор - то есть все свойства мы прописывает к тегу <body>. Точно также оформляется и тэг <p> (параграф), <a>(ссылка), они пишутся без решетки.
С решеткой пишутся индикаторы, они не оформляют теги, они создают отдельные классы которые можно применить к любому тегу/куску кода. О них позже (:
На счет фона молодец, справилась +

Отредактировано menestrel (2012-12-24 21:41:09)

0

14

ОФФ
menestrel написал(а):

Пишем, селектор (#body) + свойство

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

#body - в нем обычно прописываться фон страницы (не подложки форума!)

тут еще не исправили).

+1

15

А вот и мой тестовый

тестовик

+1

16

почему все встало? =/

0

17

меня тут записали к вам... а я опоздала!
Возраст: 12 лет
Опыт работы с графическими редакторами (Photoshop, Corel Draw, Illustrator, Fireworks):1,5 лет
Вопросы/слабые места:коды - мое слабое место!

0

18

Не поняла, как

Пишем, селектор (body) + свойство (background):

0

19

тестовик
http://testoviymoyforum.mybb.ru/

0

20

Варварушка)

body{
background-image: url('http://s2.uploads.ru/cbwmh.jpg');
}

красным - ссылка на твой фон

вставляется во второе окно, сразу после

/* CS1 Background and text colours
-------------------------------------------------------------*/

0


Вы здесь » Кот » Архив обучения от 03.12 » menestrel #1


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