Учебник CSS - Урок 2 - Начинаем использовать CSS. CSS-свойства background, color.

Опубликовано пользователем admin

CSS-свойства background, color

Привет, Всем. Итак, в прошлом уроке я сделал два файла 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 в файле. Все 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 /* цвет текста */
}

green css

Как видите я написал без точки или диеза 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 свойства, то следует использовать точку с запятой, чтобы показать, что это конец свойства. Теперь наша страница более читаема:

страница на html 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; /* цвет текста */
}

 

html css

 

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Более подробная информация о текстовых форматах

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Добрый день Подскажите

Добрый день

Подскажите пожалуйста.

Как сделать фоновый рисунок,  прижатый к нижнему экрану монитора не применяя скрипты

Пример тут

http://www.pixelcriminals.com/

Спасибо

 

 

 

Иван.  у меня тот же самый

Иван.  у меня тот же самый вопрос:

А как прилепить картинку в качестве фона? Есть ссылка как делать фоновую картинку на сайт вместо заднего фона?

Если можно, чтоб инструкция была на русском и попроще... тяжко с нуля разбираться на буржуйском языке... Пробовал на примерах с других сайтов разобраться и на свой сайт прилепить... не сработало... А так хочется красоту навести.

     Иван, я пользуюсь темой

     Иван, я пользуюсь темой 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
Получается полупрозрачный фон, чуть проступающий по центру и более чёткий по краям.
Я понимаю - спецы презрительно скривятся, но для новичков - может и пригодится.