Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Помни, программист, когда ты умрёшь, Господу, наряду с перечнем твоих земных дел, представят полный список твоих запросов в поисковиках!

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

  Моя группа в контакте:



Фон элемента <body>

В примере ниже в качестве фона элемента «body» используется голубой цвет, а для блока «div» изображение:

файл: «cascadе.css»
body
{background-color: #AAFFFF;}

.primer
{
background-image: url(image/coloboc3.png);
border: 3px solid blue;
position: absolute; top:200px; left:300px; height:500px; width:500px;
}

a
{color:#B619FF; font-weight: bold;}

a:hover
{color:#ff0000; font-weight: bold; text-decoration:none;}

h1
{color: #0000ff; font-size:18px;}

h2
{color: #9E0037; font-size:16px;}

p
{color: green; font-size:14px;}


файл: «primer3.html»
<html>
<head>
<title>Пример №3</title>
<link href="cascadе.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Мы рады вас видеть!!!</h1><br/>
<h2>Здесь вы найдете все что искали!!!</h2><br/>
<p>На этом сайте Вы найдёте любую информацию, которую вы так долго искали на просторах интернета.</p>
<div class="primer"> </div>
</body>
</html>
посмотреть

Теперь рассмотрим все подробнее:

background-image: url(image/coloboc3.png); - указывает на то, что фоном будет изображения и в скобках указываем адрес.

border: 3px solid blue; - задает параметры рамки (толщину, тип и цвет)

position: absolute; top:200px; left:300px; height:500px; width:500px; - задаем положение нашему контейнеру и его размеры (от верха, с лево; высота и ширина) в пикселях.

На этом мы закончим наше поверхностное знакомства с CSS. С помощью CSS можно сделать гораздо больше и если у вас есть желания изучить этот материал более подробно, можете скачать учебник из раздела «Учебники»

1 2 3 4 5

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь