ALFARES
07-24-2008, 05:53 AM
السلام عليكم ورحمة الله وبركاته ...
درس اليوم شلون تكتبون على الصور ولكم الحريه بالتحكم بالألوان والخط ...
الدرس بيكون ع الكود هذا :
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>شرح الكتبه على الصورشرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
</p>
</div>
</div>
</body>
</html>
نبدى بالشرح :
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
وحيث انا بهذا الكود نختار الصوره بوضع الرابط او المسار مكان klematis.jpg و ايضا بهذا الكود نحن نتحكم بحجم الحدود اي ان تستطيع ان جعل الحدود كبيره فقط غير الرقم 2 بهذا المود border: 2px solid black; الى 5 و بيكون لك و كبير و اذا اردته رفيع فقط غير الرقم الى 1
الان بهذا الكود:
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
اول شي
width: 400px;
height: 180px;
و هي الارتفاع + العرض
و هذا
background-color: #ffffff;
لون خلفيه الكتابه
و
border: 1px solid black;
حجم الحدود
و الباقي افضل انك ما تلمسه
و الان
للذين يحبون يغيرون شكل و لون الخط :
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
اولا font-weight: bold;
شكل الخط
و color: #000000;
هي لون الخط
و الان لأخر جزء :
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>شرح الكتبه على الصورشرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
</p>
</div>
</div>
</body>
</html>
و هذا هو ما تريد كتابته بالصوره
و الحمدالله انتهينا
وبالتوفيق ...
درس اليوم شلون تكتبون على الصور ولكم الحريه بالتحكم بالألوان والخط ...
الدرس بيكون ع الكود هذا :
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>شرح الكتبه على الصورشرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
</p>
</div>
</div>
</body>
</html>
نبدى بالشرح :
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
وحيث انا بهذا الكود نختار الصوره بوضع الرابط او المسار مكان klematis.jpg و ايضا بهذا الكود نحن نتحكم بحجم الحدود اي ان تستطيع ان جعل الحدود كبيره فقط غير الرقم 2 بهذا المود border: 2px solid black; الى 5 و بيكون لك و كبير و اذا اردته رفيع فقط غير الرقم الى 1
الان بهذا الكود:
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
اول شي
width: 400px;
height: 180px;
و هي الارتفاع + العرض
و هذا
background-color: #ffffff;
لون خلفيه الكتابه
و
border: 1px solid black;
حجم الحدود
و الباقي افضل انك ما تلمسه
و الان
للذين يحبون يغيرون شكل و لون الخط :
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
اولا font-weight: bold;
شكل الخط
و color: #000000;
هي لون الخط
و الان لأخر جزء :
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>شرح الكتبه على الصورشرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
شرح الكتبه على الصور.
</p>
</div>
</div>
</body>
</html>
و هذا هو ما تريد كتابته بالصوره
و الحمدالله انتهينا
وبالتوفيق ...