Привет, Всем. Итак, в прошлом уроке я сделал два файла html и css. Вот их код:
index.html:
<html> <head> <title>Учебник CSS</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p>Учите CSS вместе с drupalbook.ru</p> <p>2 строка учите CSS вместе с drupalbook.ru</p> </body> </html>
style.css:
body{ background: #eeeeee; /* фон страницы */ font-size: 14px; /* размер шрифта */ } p{ color: #ff0000; /* цвет текста */ }
В этом уроке мы продолжим изучать CSS и придадим нашему шаблоны цвета и краски. Начнем со свойства background, которое мы уже задали body:
body{ background: #eeeeee; /* фон страницы */ font-size: 14px; /* размер шрифта */ }
Как видите у нас появился серый фон страницы:
Давайте сначала разберемся с синтаксисом CSS в файле. Все css свойства начинаются с указателя к чему мы будем применять эти свойства, например такие указатели body, p, .class, #id. Причем вы можете заметить что перед указателем может указываться точка или знак диез. Точка добавляется для тегов (один или более) определенного класса, а диез для тега (одного тега) с определенным id. Сейчас поясню на примере:
<html> <head> <title>Учебник CSS</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <div class="green"> <p>Учите CSS вместе с drupalbook.ru</p> </div> <div id="blue"> <p>2 строка учите CSS вместе с drupalbook.ru</p> </div> </body> </html>
Я добавил два блока с классом green и ай-ди blue, теперь я напишу для них css:
body{ background: #eeeeee; /* фон страницы */ font-size: 14px; /* размер шрифта */ } .green{ color: #00ff00 /* цвет текста */ } #blue{ color: #0000ff /* цвет текста */ }
Как видите я написал без точки или диеза css для тега body, также без знаков мы пишем css для остальных тегов, таких как p, span, ul, li и остальные. С точкой мы пишем css для тегов с определенным классом, с диезом пишем css с определенным id. Думаю вам стоит это себе пометить где-нибудь, чтобы в будущем не запутаться:
Точка - для классов
Диез - для id
Без точки и диеза - для тегов без классов и id
После того как мы указали тег, класс или id мы пишем css в фигурных скобочках {} :
body{ /* тег */ } .green{ /* класс */ } #blue{ /* id */ }
Как вы помните из моего короткого курса HTML class и id являются универсальными атрибутами HTML тегов, то есть эти атрибуты можно поставить любым тегам. Таким образом из множества тегов p, span, li, мы можем задавать различные css отдельным тегам.
Теперь в фигурных скобочках мы можем писать CSS-свойства. Начнем с простого color. Color определяет цвет текста, мы пишем сначала имя свойства, а потом после двоеточия пишем значение свойства. Для свойства color мы можем написать как в числовом виде, так и в словестном:
.green{ color: #00ff00; /* цвет текста */ } #blue{ color: #0000ff; /* цвет текста */ } /* аналогично */ .green{ color: green; /* цвет текста */ } #blue{ color: blue; /* цвет текста */ }
Если мы записываем в числовом виде, в виде 6 шестнадцатеричных чисел, то мы ставим диез перед числом, причем два первых числа обозначают сколько в цвете красного, третье и четвертое числов показывается сколько зеленного, пятое и шестое число показывает сколько в цвете синего. То есть используется схема RGB (Red - красный, Green - зеленный, Blue - синий). Шестнадцатеричные числа изменяются не от 0 до 9 , а от 0 до буквы F, где после 9 идет не 10, а буква A. Подобрать цвет в шестнадцатеричной системе нам поможет Фотошоп (photoshop). Нажмите на выбор цвета, и уже в палитре выбирайте нужный вам цвет:
Теперь когда вы знаете как подобрать цвет для свойства color, то вы сможете подобрать цвет для свойства background. Давайте сменим цвет нашего фона и сделаем наш текст более читаемым:
body{ background: #fafafa; /* фон страницы */ color: #333; /* цвет всего текста на странице */ } .green{ /* цвет текста */ } #blue{ /* цвет текста */ }
Если вы пишите больше одного CSS свойства, то следует использовать точку с запятой, чтобы показать, что это конец свойства. Теперь наша страница более читаема:
Давайте еще расставим кое-где зеленый и синий цвета:
index.html:
<html> <head> <title>Учебник CSS</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p><span id="blue">Учите CSS</span> вместе с <span class="green">drupalbook.ru</span></p> <p>2 строка учите CSS вместе с <span class="green">drupalbook.ru</span></p> </body> </html>
И style.css:
body{ background: #fafafa; /* фон страницы */ color: #333; } .green{ color: #26e921; /* цвет текста */ } #blue{ color: #0f15f3; /* цвет текста */ }
Комментарии
Добавить комментарий
Добрый день Подскажите
Добрый день
Подскажите пожалуйста.
Как сделать фоновый рисунок, прижатый к нижнему экрану монитора не применяя скрипты
Пример тут
http://www.pixelcriminals.com/
Спасибо
Вот здесь написано как это
Вот здесь написано как это сделать:
http://johnpatrickgiven.com/jquery/background-resize/
Придется все-таки немного jquery вставить.
Иван. у меня тот же самый
Иван. у меня тот же самый вопрос:
А как прилепить картинку в качестве фона? Есть ссылка как делать фоновую картинку на сайт вместо заднего фона?
Если можно, чтоб инструкция была на русском и попроще... тяжко с нуля разбираться на буржуйском языке... Пробовал на примерах с других сайтов разобраться и на свой сайт прилепить... не сработало... А так хочется красоту навести.
body{ background: url(
body{
background: url('images/image.png') no-repeat top center #ffffff;
}
Вставляйте в css только свой путь к картинке поставьте.
Иван, я пользуюсь темой
Иван, я пользуюсь темой Corporate Premium Drupal 7 Theme
В этой теме есть в папке sites/all/themes/corporate/css файл настроек стилей colors.css и corporate.css
в файле corporate.css я менял шрифты и размеры шрифтов - получилось.
в файле colors.css есть строчки:
body { background: none repeat-x scroll 0 0 #666666; }
#views_slideshow_cycle_main_jquery_slideshow-block_1{ background: url("../images/glow.png") no-repeat scroll 0 0 #666666; }
я заменил строчку на:
body{ background: url('../images/image_fon.png') no-repeat top center #ffffff; }
Никакого эффекта... нуль.
Иван, есть такой модуль, для ленивых: Dynamic Background https://drupal.org/project/dynamic_background для него я даже русификатор нашёл http://drupaler.ru/translate/languages/ru/export?project=dynamic_background
Никакого кода писать не нужно. В админ панели появляется - Интерфейс пользователя - Динамический фон - Настройки Всё, что нужно указать, это Стиль изображения (создал стиль my1920 - задал Масштабирование до 1920px) и в поле CSS selector написать одно слоко кода body (это типа, где отображать картинку)
Далее на вкладке - Фоновые изображения - добавляем картинки - и всё!
Фоновая картинка появилась. Красотулечка!
Вот только радовался недолго... Мои фоновые картинки исчезают, когда я захожу на сайт как Анонимный пользователь и появляются только когда я регистрируюсь...
А ещё, эта моя картинка прилепилась к верхнему левому углу экрана, а я хочу чтобы картинка выравнивалась по центру...
Иван, могбы ты помочь изучить модуль Dynamic Background и нам рассказать или ссылочку дать - где почитать? Модуль очень интересный, там можно много фоновых картинок подключить, можно задать фоновые картинки отдельно для каждого типа материала, блога, пользователя, панели и т.п. Возможностей - куча!!! А разобраться не получается. 2 дня в инете копался - искал описание - как пользоваться модулем... ничего нет. Молчат спецы - таятся - утаивают знания.
Посмотрите разрешения
Посмотрите разрешения пользователей, возможно нужно поставить разрешение на просмотр динамического фона.
Кажется немного разобрался с
Кажется немного разобрался с модулем Dynamic background.
В админ панели - Интерфейс пользователя - Динамический фон - Настройки
указал - Путь загрузки * - background_images -
в поле CSS selector - написал - body - (это типа, где отображать картинку)
вписал в поле CSS:
background-position:top center;
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
height:100%;
стало работать. Нравится
Но для Анонимных пользователей картинка не показывается...
Фоновая картинка появляется только после регистрации на сайте...
Картинки сохраняются в папку
~/www/ мой сайт /sites/default/files/private/background_images
В настройках » Управление » Конфигурация » Мультимедиа
в поле - Приватный путь файловой системы - указал ранее -sites/default/files/private
И когда в модуле Динамический фон >> Фоновые изображения я добавляю картинки, картинки попадают в папку www.мой_сайт/sites/default/files/private/background_images
А так как доступ к этой папке я разрешён только администратору
www.мой сайт/admin/people/permissions смотреть здесь:
- File entity - View private files
то только Администратор и может видеть фоновую картинку.
Ставить правило (разрешение доступа) к Приватным файлам для Анонимных пользователей - работает, но это не выход.
Поменял приватный путь в настройках Файловая система на
sites/default/files/private_files
Фоновая картинка исчезла у всех
Выходит, что модуль Dynamic background запоминает относительные пути к папке с картинками...
Значит нужно искать и править код в самом модуле, чтоб картинки загружались в общую папку.
Правильно я разобрался? Иван, будет время, подскажешь, что дальше делать?
Добил модуль Dynamic
Добил модуль Dynamic background Заработало.
Проблема решена!!!
Удалил все картинки в модуле - Отключил модуль, снял все галочки с компонентов модуля - сохранил - удалил модуль - удалил папку модуля физически в /sites/all/modules/dynamic_background - Изменил тип Файловой системы на <*> Открытый — передачей файлов управляет веб-сервер
Заново загрузил модуль и русификатор, поправил настройки модуля, загрузил заново фоновые картинки
Убрал права Анонимов на просмотр приватных файлов - File entity - View private files
Почистил кэш
И всё заработало!!! Drupal рулит! всё работает и ни строчки кода не понадобилось!
Хочется добавить ещё чуть-чуть не по теме - Как я приспособился обрабатывать фоновую картинку
В Фотошопе открываю картинку >> вырезаю понравившийся мне кусок картинки >> создаю новый файл с прозрачной подложкой >> вставляю вырезанный кусок >> ластик устанавливаю размытые края, размер 2000px, прозрачность 60-70%, кликаю на центр картинки, устанавливаю размер ластика в полкартинки ~400 рх, провожу по центру картинки сверху вниз >> сохраняю в формате .png >> закачиваю на сайт средствами модуля Dynamic background
Получается полупрозрачный фон, чуть проступающий по центру и более чёткий по краям.
Я понимаю - спецы презрительно скривятся, но для новичков - может и пригодится.