مــــا هـــو الــ CSS ؟؟
هو اختصار لــ Cascading Style Sheets و وســيــلة أو أداة تســتخدم
لأضافه تصمــيم علي الموقع .. لذلك فهي خــاصة بمصممي المواقع ,فــيهتم بالخطوط
والالوان وخلفيه الموقع والمساحات لتــظهر صفحة الــ HTML
بشكل محدد..
2- ما هو الفـــرق بين CSS و HTML
الــ HTML هي لغه تستخدم لتكوين ووضع نظام لمحتوى صفحة الويب
الــ CSSهي اداة او وسيله لاضافة تصميم لهذه المحتويات.
لذلك نفهم ان لغه HTML خاصه بتكوين هيكل صفحة الــويب
والـــ CSS هو اضافه تصميم لهذا الهيكل او التكوين
3- مــاذا نســتخدم من برامج لتــعلم الــ CSS ؟؟
لا نحتاج لبــرامج معقدة الاستخدام او تحتاج وقت لتعلمها هي ايضا
ولكن نستـخدم Notepad (المفكرة) الموجوده في الوندوز
START MENU>>ACCESSORIES>>NOTEPAD
كما نحتاج لمتصــفح BROWSER مثل انترنت اكسبلورر او فايرفوكس
4- مــا هــي فــوائــد CSS ؟؟
* تستطيع ان تتحكم في التصميم وتفاصيله من خلال ملف واحد بامكانيات اكبر وادق
*تستطيع ان تنشئ تصميمات لجميع مختلف وسائل عرض المواقع كالشاشات
والطابعات والتليفونات المحموله------------------------------------------
مصدر هذه الأكواد موقع المطور
كود css لتحريك أزرار التصفح عند مرور الماوس كود بلغة HTML:
.mainmenu {
display:inline-block;
height:37px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:0px;
}
a.mainmenu img:hover{
margin-top:-37px;
}
كود تحيرك لآسفل
الكود: ---------تضليل المحتوى
.mainmenu {
display:inline-block;
height:37px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:0px;
}
a.mainmenu img:hover{
margin-top: 37px;
}
ضع اطار احترافى على كل اطارات منتداك بشكل حصرى وجديد كود بلغة HTML:
.row2 {
border:2px solid #E0C77E;
background: url(https://i.servimg.com/u/f88/11/88/59/12/2iscw010.png) ;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
border-radius-topright: 15px;
border-radius-bottomleft: 15px;
}
.row1 {
border:2px solid #E0C77E;
background: url(https://i.servimg.com/u/f88/11/88/59/12/2iscw010.png) ;border:2px solid #E0C77E;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
border-radius-topright: 15px;
border-radius-bottomleft: 15px;
}
.row3 {
border:2px solid #E0C77E;
background: url(https://i.servimg.com/u/f88/11/88/59/12/2iscw010.png) ;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15
كود وضع ايطار للصورة الشخصية عند مرور الماوس عليها كود بلغة HTML:
[quote] .postdetails.poster-profile a img:hover
{
border-width: thick;
border-style: dotted;
border-color: gold;
كود css للتعديل على التواقيع للنسخة 2 بدون تومبيلات بوضع اطار وخلفية كود بلغة HTML:
اطار وخلفية لون فقط
.signature_div {
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border:2px solid black;
background-color: gray;
}
او لوضع اطار وخلفية صوره
.signature_div {
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border:2px solid black;
background-image : url(ضع هنا رابط الصورة);
}
www.mtwer.com كود css] لوضع خلفيه لاسم المنتدى وعدد اماكن بشكل روعه كود بلغة HTML:
- [كود css] لوضع خلفيه لاسم المنتدى بشكل روعه من تصميمى ------------------- */
h1 {
color: red;
font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
"Book Antiqua", Georgia, serif;
margin: 0;
text-shadow: #C715DB 5px 5px 5px;
}