CSS

CSS – الوسوم الزائفة

a:hover

من خلال ھذه الخاصیة ( الوسم الزائف ) یمكن أن نضیف تأثیر على العنصر عند ملامسة
مؤشر الفأرة ذلك العنصر ویمكن أن نكتب اسم أي وسم ولیس فقط الوسم <a ) <كتبناه كمثال
ویمكن استخدام غیره من الأوسمة ) .

مثال :

div { background-color:red; }
div:hover { background-color:#333;
font-size:20px; }

 یمكن أن نكتب اسم ( id ( أو ( class (الخاص بالوسم ھكذا :-
( #name:hover { } ) ً مثلا

a:active

ھذه الخاصیة ( الوسم الزائف ) یستخدم مع الوسم <a ) <الروابط ) فقط , ومن خلالھ نستطیع
أن نضیف بعض التأثیرات على الرابط الذي یتم النقر علھ في ھذه اللحظة .

مثال:

a:active { color:red; }

a:visited

ھذه الخاصیة ( الوسم الزائف ) یستخدم مع الوسم <a ) <الروابط ) فقط , ومن خلالھ نستطیع
أن نضیف بعض التأثیرات على الرابط الذي تم زیارتھ .

مثال:

a:visited { color:yello; }

a:link

ھذه الخاصیة ( الوسم الزائف ) یستخدم مع الوسم <a ) <الروابط ) فقط ,ومن خلالھ نستطیع
أن نتحكم بالرابط أو الوصلة التشعبیة .

مثال:

a:link { color:#f03; }

input:focus

من خلال ھذه الخاصیة ( الوسم الزائف ) یمكن تطبیق التأثیرات على حقول الإدخال input .

مثال:

input:focus { border:3px solid #333;
background-color:#ff0; }

first-letter

من خلال ھذه الخاصیة ( الوسم الزائف ) نستطیع أن نطبق تأثیر معین على الحرف الأول من
كل فقرة ( النص ) , حیث یجب أن نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین .

مثال:

p:first-letter { color:red;
font-size:10pt: }

first-line

من خلال ھذه الخاصیة ( الوسم الزائف ) نستطیع التحكم وتطبیق تأثیر معین على أول سطر
من الفقرة ( النص ) , حیث یجب أن نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین

مثال:

p:first-line { color:green;
font-size:20px: }

before

من خلال ھذه الخاصیة ( الوسم الزائف ) یمكننا إدراج محتوى قبل العنصر , حیث یجب أن
نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین .

:مثال لإضافة صورة قبل كل فقرة

p:before { content:url(‘image.gif’); }

ویمكن أن نضع قبلھا اسم class أو idالوسم بدلا ً من اسم الوسم , مثال /

.tt:before { content:url(‘image.gif’); }

after

من خلال ھذه الخاصیة ( الوسم الزائف ) یمكننا إدراج محتوى بعد العنصر , حیث یجب أن
نسبق ھذه الخاصیة باسم الوسم ونضع التأثیر بین القوسین .
إضافة علامة تعجب بعد كل فقرة

مثال:

p:after { content:” !”; }

 ویمكن أن نضع قبلھا اسم class أو id الوسم بدلا ً من اسم الوسم ,

مثال :

.tt:after { content:” !”; }

@media

من خلال ھذه الخاصیة ( الوسم الزائف ) یمكن تخصیص شكل ومظھر الصفحة بناءً على ما
یقوم بعرضھا من شاشة حاسوب او آلة طابعة او غیرھا .

مثال:

<html>
<head><style type="text/css" >
@media screen {
p { text-align:justfy;
direction:rtl; }
body { background-color:green; }
}
@media print {
p { text-align:justfy; } }
</style></head><body>
<p> My Text </p>
</body>
 </html>

یمكن ان نضع بعد media @احد القیم التالیة :

@media screen and( )

من خلال ھذه الخاصیة یمكننا التحكم بالموقع بحسب حجم الشاشة المفتوحة حیث سنضع بداخل
ھذین القوسین أكبر أو أصغر مقدار لحجم الشاشة قبل تنفیذ ھذه الخاصیة مثلا ً :-
( 400px:width-max ( او ( 400px:width-min ( وبعدھا نضع قوسین معقوفین ونكتب
بداخلھم الخواص وما سیجري علیھا من تغیرات في حال تغیر حجم الشاشة إلى أصغر او أكبر
من ھذا المقدار بحسب القیمة المعطاة .

مثال:

p { font-size:40pt; }
@media screen and ( max-width:300px ) {
p { font-size:10pt;
color:red; } }

یمكن أن نكتب ھذه الخاصیة بكل ما تحتویھ من خصائص وتغییرات داخلھا في صفحة
CSS جدیدة ( ثانیة ) مع ملاحظة عدم كتابة اسم ھذه الخاصیة في البدایة بل نكتب
الخصائص التي في داخلھا مباشرتا ً ( كأي صفحة CSS عادیة ) لأننا سنكتب اسم ھذه
الخاصیة عند استدعائھا من داخل صفحة html , وسوف نستدعیھا في صفحة html
من خلال وسم خاص یكتب داخل الوسم <head <وھذا الوسم ھو

<link rel=”stylesheet” type=”text/css” media=”screen and ( max-width:300px )” “css.اسم الصفحة”=href />
ھذه القیم تتغیر بحسب القیمة التي
نرغب في إعطائھا للخاصیة

وفائدة ھذه الخاصیة في السیطرة على شكل الموقع وعرضھ بشكل مناسب لیتوافق مع حجم
الشاشة في الجھاز العارض كأن یكون ھاتف جوال او جھاز لوحي او شاشة حاسوب .

إذا أردنا أن یطبق التأثیر فقط إذا كانت الشاشة تحمل ھذه الدقة ولیس تصغیر او تكبیر
الشاشة , مثلا نعطي دقة قلیلة بحیث لا یمكن أن یحمل ھذه الدقة جھاز حاسوب بل تتوفر
فقط على الھاتف الجوال في ھذه الحالة یجب أن نضیف ( device ( إلى الخاصیة لتكون
بھذا الشكل :

مثال/ یطبق التأثیر فقط على الجوال

@media screen and ( max-device-width:400px ) { ……… }
وكذلك إذا وضعناھا في ملف CSS مستقل واستدعیناھا من داخل ملف html سنضیف )
( device إلى وسم الاستدعاء .

مثال:

<link rel=”stylesheet” type=”text/css” href=”الملف اسم.css”
media=”screen and (max-device-width:400px)” />

@font-face

ھذه الخاصیة جدیدة في CSS3 , من خلال ھذه الخاصیة ( الوسم الزائف ) یمكننا إضافة خطوط
جدیدة حتى وإن لم تكن موجودة في متصفح زائر الموقع حیث في السابق كان یجب الالتزام
بالخطوط الشائعة لكن ھذه الخاصیة حلت المشكلة حیث یتم وضع ملف الخط ضمن ملفات
الموقع ویتم إسناد مساره إلى الخاصیة src لقاعدة face-font @وتستخدم كما یلي :-
أولا ً :- یتم تعریف اسم عائلة جدیدة باستخدام القاعدة face-font . @
ثانیا ً :-یسند اسم العائلة الذي انشأ سابقا ً إلى الخاصیة family-font بشكل تقلیدي .
ملاحظة/ المستعرض Explorer یدعم الخطوط ذات النوع eot .فقط بینما تدعم باقي
المستعرضات النوعین ttf .و otf

مثال :

یمكن أن نضع أي اسم “css/text=”type <style
@font-face { font-family:myfont;
src:url(“name.ttf”) , url(“name.eot”) format(“opentype”); /* IE */
نفس الاسم السابق {
div { font-family:myfont; }
</style>

@keyframes

ھذه الخاصیة جدیدة في CSS3 ویجب أن نكتب البادئات الخاصة بكل متصفح لكي تعرض في
المتصفحات المختلفة , وھذه الخاصیة ( الوسم الزائف ) مسئول بالتعاون مع الخاصیة
( animation ( لإنشاء حركات , ویتم إنشاء الحركة بخطوتین :

1 -یتم تعریف اسم خاص للحركة في القاعدة keyframes @وتحدید ماھیتھا عبر تحدید
الوضع الابتدائي from والوضع النھائي to وعند تطبیق الحركة یتم الانتقال من
الوضع الابتدائي إلى الوضع النھائي للعنصر خلال فترة زمنیة مما یجعلنا نشعر
بالحركة.
2 -یتم إسناد الحركة وزمن تنفیذھا إلى الخاصیة animation الخاصة بالعنصر .

مثال:

<html> <head>
<style type="text/css" >
div { width:100px;
 height:100px;
 background:red;
 -webkit-animation:myAnimation 5s; }
@-webkit-keyframes myAnimation {
 frome { background:red; }
 to { background:yello; }
</style> </head> <body>
<div> </div>
 </body> </html>

حیث إن s تشیر إلى الثانیة second

یمكن تخصیص شكل العنصر في كل لحظة من لحظات الحركة عبر إنشاء قاعدة CSS
خاصة بھذه اللحظة ضمن قاعدة keyframes. @

مثال:

@-webkit-keyframes myAnimation {
0% { background:red; }
15% { background:green; width:150px; color:white; }
50% { height:350px; }
100% { background:yello; } }

حیث إن ( %0 ( تعني لحظة بدایة الحركة و ( %100 ( تعني لحظة نھایة الحركة والقیم
الأخرى تعبر عن فترات أثناء حدوث الحركة .
تحدث ھذه التغیرات أثناء الحركة ویعود العنصر إلى شكلھ الطبیعي عند انتھاء الحركة .