CSS-ის გაკვეთილები: 1 ბლოკის შექმნა

1) შევქმნათ CSS ფაილი. გახსენით ბლოკნოტი, შემდეგ -> Сохранить как -> style.css.

/*
=============================================================
© 2010 By Rimati
http://geodles.com
N1 Lesson
style.css
=============================================================
*/

/* ბლოკის პარამეტრები */

#block{
     width: 250px; /* ბლოკის სიგანე*/
}

/* სათაური */
.head {
     text-align:center; /*სათაური ცენტრში */
     color: #fff; /*სათაურის ფერი */
     background-color: #0274b0; /* ფონის ფერი */
     border: 2px solid #ffba00; /* გვედა კიდის ფერი */
     font-size: 15px; /* შრიფტის ზომა */
     font-weight:bold; /* ნახევრადსქელი ფონტი */
     padding: 7px 0 7px 0; */  */
}

/*ბლოკის ძირითადი ნაწილი*/
.body {
     color:#333; /* ტექსტის ფერი */
     background-color: #d2efff; /* ფონის ფერი*/
     border: 2px solid #ffba00; /* ბლოკის კიდის ხაზის ზომა*/
     border-top-style: none; /* ზედა ხაზის წაშლა*/
     font-size: 12px;  /* შრიფტის ზომა */
     padding: 5px; /* დაშორება ყველა მხრიდან*/
}

ახლა შექმენით ჰტმლ ფაილი რათა ნახოთ შედეგი და ჩაწერეთ ეს

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<div class="head">
უბრალო ბლოკი
</div>
<div class="body">
შიგთავსი..
</div>
</div>
</body>
</html>

დემო ნახეთ აქ http://geodles.com/demo/1/index.html

თქვენ არ შეგიძლიათ ფაილების გადმოწერა სერვერიდან

ტეგები CSS-ის გაკვეთილები: 1 ბლოკის შექმნა