لغة تنسيق وتصميم اكواد HTML والتي تسنخدم في جميع مواقع الويب بلا استثناء التي هي لغة CSS اختصار ل Cascading style sheet وهي بداية لاحتراف تصميم مواقع الويب لما تضيفة هذه اللغة من جماليات لموقع الويب ومن مزاياها ايضا السهولة في التحكم الكلي بعناصر لغة HTML سنشرح اهم اكوادها وكيفية استخدامها في هذا الدرس. والدروس القادمة ان شاء الله ..
اولا : طرق استدعاء اكواد CSS:
الطريقة الاولى ضمن وسوم HTML :

<div style="background:#eee;width:300px;height:100;">
</div>

الطريقة الثانية ضمن ملف HTML في قسم الراس head نكتب اكواد CSS كالتالي:
<head>
<style type="text/css">
 اكتب هنا اكواد CSS
</style>
</head>
الطريقة الثالثة انشاء ملف بإمتداد css واستدعيه بملف HTML الذي تريد كالتالي:
<link href="filenamepath.css" rel="stylesheet" type="text/css">
ثانيا : المحددات وقواعد كتابة اكواد css:
.* الانواع الاساسية في المحددات هي id, class,elementName , ولانشاء كود جديد يجب ان تكتب اكواد css بين {} ويجب ان ينتهي كل امر بفاصلة منقوطة ; ونوضح ذلك كالتالي:
#idName{background:$ff000; }
.className{background:$ff000; }
div{background:$ff000; }
*{background:$ff000; }
الاستدعاء بالترتيب :

<div id='idName'>habib</div>
<div class='className'>habib</div>
<div>ali</div>
<div>ali</div> <h1>mohammed</h1>

للتوضيح:
#idName to select id
.className to select class
elementName to select directly name of class
* to select all elements
ثالثا : تنسيق النصوص
تخصيص لون النص بثلاث طرق كالاتي
color:#ff0000;  //hexadecimal
color:red;      // font name
color:rgb(255,0,0);  // decimal
تحديد اتجاه النص من اليمين الى اليسار او العكس كالتالي :
direction:rtl;
direction:ltr;
تحديد المسافة بين الحروف
latter-spacing:2px;
latter-spacing:-2px;
تحديد ارتفاع السطر
line-height:30px;
line-height:2; //line height =2 lines
تحديد مكان النص
ملاحظة: القيمة justify تستخدم لجعل بداية ونهاية النص في السطور متساوية
text-align:center;
text-align:right;
text-align:left;
text-align:justify;
التحويل بين الحروف الصغيرة والكبيرة في اللغة الانجليزية
capitalize = لتحويل الحرف الاول الى كبير
uppercase = لتحويل كل الحروف الى كبيرة
lowercase = لتحويل كل الحروف الى صغيرة
none: لاشيء
text-transform: capitalize;
text-transform: uppercase;
text-transform:lowercase;
text-transform:none;
لجعل المتصفح يحتسب المسافات البيضاء ويطبعها
white-space:pre;
التحكم في اضافة الخط حول النص
underline = خط تحت النص
overline = خط فوق النص
line-through = خط وسط النص
blink = تجعل النص يظهر ويختفي ولكن تعمل فقط في متصفح فايرفوكس موزيلا
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:blink;
تحديد مسافة بداية الفقرة
text-indent:30px;
تحديد حجم المسافة بين الكلمات
word-spacing:10px;
رابعا : تنسيق الخطوط
تحديد عائلة الخط
ممكن استخدام اكثر من خط بوضع فاصلة بين الخطوط
اذا اسم الخط مكون من كلمتين منفصلنين يجب وضع الكمتين داخل " "
font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
تحديد حجم الخط
القيم تسند لهذه الخاصية بطريقتين:
1 - الحجم بال pexels
2 - الحجم بالنص بإحدى الطرق الاتية:
small , X-small , xx-small , medium , large , x-large , xx-large
font-size:12px;
font-size:small;
تحديد ستايل الخط
القيم المسندة:
normal عادي يأتي defualt
italic مائل
oblique ايضا مائل
font-style:normal;
تستخدم الخاصية التالية عند الحاجة لتحويل الحروف الانجليزية من small to capital
font-variant:small-caps;
تحديد عرض الخط
font-weight:bold;
font-weight:bolder;
font-weight:700;
تحديد كل خصائص الخط في امر واحد
font:normal bold 30px Arial,tahoma;
اكمال دروس لغة css في الدروس القادمة ان شاء الله , واي سؤال حول لغة css ضعه في تعليق....

مواضيع ذات صلة

0 اترك تعليقاً...