10 أمثلة بسيطة لأكواد CSS يمكن تعلمها في 10 دقائق
باستخدام (CSS) يمكنك جعل صفحات موقعك أكثر قوة. تساعدك CSS في إجراء تغييرات على صفحتك بأكملها دون استخدام الكثير من أنماط HTML الداخلية.
لذلك أنت بحاجة إلى ترقية مهاراتك في CSS لإجراء التغييرات المطلوبة. في هذه المقالة ، نقدم لك 10 أمثلة بسيطة لرموز CSS يمكنك استخدامها لإجراء تغييرات أساسية على موقعك.
(ورقة أنماط مضمنة) ورقة أنماط خطية
يحتوي كل مستند HTML على علامة <head>. قسم الرأس هذا هو المكان الذي يتم فيه وضع ورقة الأنماط على النحو التالي:
<head>
All of your CSS declarations.
</head>يجب وضع هذا القسم في الجزء العلوي من المستند الخاص بك واستخدامه لإكمال CSS الخاص بك.
تنسيق بسيط للفقرة
من أجمل الأشياء في التصميم باستخدام CSS هو أنك لست مضطرًا لتصميم عنصر في كل مرة تقوم بإنشائه. يمكنك إخبار فقرة كاملة بأسلوب معين وتذهب معه فقط. النظر في المثال أدناه.
نتخيل أنك بحاجة إلى أن يكون محتوى صفحتك داخل العلامة <p> أكبر قليلاً من المعتاد وأن يكون لون النص رماديًا بدلاً من الأسود. يمكنك القيام بذلك باستخدام CSS مثل هذا:
p {
font-size: 120%;
color: dimgray;
}هذا كل ما عليك القيام به! الآن ، عندما يعرض متصفحك الفقرة داخل علامة <p> ، سيتم عرض النص بنسبة 120٪ من حجمه الفعلي وباللون الرمادي.
تغيير حجم الخط
الآن بعد أن رأينا مدى سهولة إجراء التغييرات المطلوبة على كل فقرة ، دعنا نذهب إلى أبعد من ذلك بقليل. الآن نريد تغيير تصميم الفقرة بحيث تكون جميع أحرفها صغيرة. نتصرف على النحو التالي:
p.smallcaps {
font-variant: small-caps;
}لجعل جميع الحروف في فقرتنا صغيرة ، نستخدم علامة HTML مختلفة قليلاً. انتبه إلى الكود التالي:
<p class="smallcaps">Your paragraph here.</p>كما ترى ، فإن إضافة نقطة واسم الفئة إلى أي عنصر معين في CSS يحدد النوع الفرعي للعنصر المحدد بواسطة فئة. يمكنك القيام بذلك من خلال النصوص والصور والروابط وأي محتوى آخر.
إذا كنت تريد تغيير نمط النص بأكمله باستخدام CSS بطريقة خاصة ، فعليك القيام بما يلي:
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;الخيار الأخير يجعل الحرف الأول من كل جملة كبيرًا.
تغيير لون الروابط
دعنا نغير نمط شيء آخر غير الفقرة. لدينا أربعة ألوان مختلفة يمكننا تخصيص ارتباط لها. تتضمن هذه الألوان اللون القياسي للرابط ، ولون الرابط الذي تمت زيارته ، ولون الارتباط عند وضع الماوس عليه ، ولون الارتباط النشط. يمكن تطبيق التغييرات المطلوبة على النحو التالي:
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}لاحظ أنه يتم استخدام نقطتين بعد كل "أ" بدلاً من نقطة.
كل سطر من الأسطر المكتوبة يغير لون جزء معين من الارتباط. لا تحتاج إلى تغيير فئة الارتباط لتغيير اللون. يتم تحديد هذا الوضع من قبل المستخدم بناءً على حالة الارتباط.
قم بإزالة تسطير الروابط
بينما يشير تسطير النص بوضوح إلى أن النص مرتبط في مكان ما ، فقد ترغب أحيانًا في إزالة التسطير من أجل الجماليات. يمكنك القيام بذلك بسهولة باستخدام سمة "زخرفة النص" على النحو التالي:
a {
text-decoration: none;
}لن يتم تسطير أي شيء مرتبط بالعلامة الهدف. ولكن إذا كنت تريد إظهار التسطير عند وضع الماوس على الارتباط ، فيمكنك القيام بما يلي:
a:hover {
text-decoration: underline;
}يمكنك أيضًا إضافة زخرفة نصية لمنع إزالة التسطير عند النقر فوق الارتباط النشط.
إنشاء زر ارتباط
إذا كنت تريد جذب المزيد من الانتباه إلى ارتباط في مكان ما على موقعك ، فيمكنك استخدام زر الارتباط. لتنفيذ هذه المهمة ، ربما تكون هناك حاجة إلى بضعة أسطر أخرى من الترميز ، لكننا سنتعامل مع كل منها على حدة:
a:link, a:visited, a:hover, a:active {
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}عندما نفكر في حالات الارتباط الأربع ، نتأكد من أن الزر الذي تم إنشاؤه لم يعد يختفي عندما يحوم المستخدم فوق الارتباط أو ينقر عليه. يمكنك أيضًا التفكير في معلمات مختلفة للوقت لإبقاء الماوس فوق الرابط أو النقر فوق الروابط النشطة. على سبيل المثال ، يمكنك تغيير لون زر الارتباط أو تغيير لون النص الموجود بداخله.
من الممكن ضبط لون الخلفية باستخدام (لون الخلفية) ويمكن أيضًا تغيير لون النص. (الحشو) يحدد حجم المربع ويتم تعيين النص المطلوب على 25 بكسل أفقيًا و 10 بكسل رأسيًا. (محاذاة النص) يظهر تخطيط النص للتأكد من أن النص في منتصف الإطار. كما رأينا سابقًا ، تزيل زخرفة النص أيضًا الشرطة السفلية.
"display: inline-block" معقدة بعض الشيء. للتلخيص ، سيساعدك هذا الرمز في ضبط طول وعرض الكائن المطلوب ، وعندما تقوم بإنشائه ، ستعرف أن سطرًا جديدًا قد بدأ.
قم بإنشاء مربع نص
الفقرة الخام ليست جذابة للغاية. إذا كنت تريد إبراز عمليتك أو لفت الانتباه إلى عناصر أخرى ، يمكنك وضع مربع حولها. هذا يفعل كما يلي:
p.important {
border-style: solid;
border-width: 5px;
border-color: purple;
}هذا الخيار واضح جدا. سيتم إنشاء مربع أرجواني بسمك 5 بكسل وسيظهر حول أي شيء مهم في الفقرة. للقيام بذلك ، ما عليك سوى إضافة الكود التالي:
<p class="important">Your important paragraph here.</p>يتم إنشاء هذا المربع بغض النظر عن حجم الفقرة ، وإذا كانت فقرتك تحتوي على سطر واحد ، فسيتم تعديل الطول والعرض وفقًا لذلك ، وإذا كانت الفقرة أطول ، فسيتم إحاطتها بمربع أكبر.
يمكنك استخدام أنماط مختلفة للتأطير. على سبيل المثال ، بدلاً من استخدام مربع متصل ، يمكنك استخدام مربع منقط أو سطرين. بالإضافة إلى ذلك ، يمكن أن يكون سمك الإطار رقيقًا أو متوسطًا أو سميكًا ، كما يمكن تحديد سمك كل جانب من جوانب الإطار على حدة.
border-width: 5px 8px 3px 9px;في هذه الحالة ، سيكون سمك الصندوق العلوي 5 ، والمربع الأيمن 8 ، والمربع السفلي 3 ، والمربع الأيسر 9 بكسل.
عناصر التمركز
يمكن تنفيذ أي شيء تريده بسهولة باستخدام CSS. ما عليك سوى بضع دقائق لترى مدى بساطة كل شيء أثناء تقدمك. إذا كنت تريد توسيط المحتوى الخاص بك ، فهناك عدة طرق للقيام بذلك.
لتوسيط عنصر في شكل كتلة مثل الصورة ، نستخدم سمة الحدود:
.center {
display: block;
margin: auto;
}سيوضح لك هذا أنه سيتم عرض العنصر المطلوب على شكل كتلة وسيتم تعديل هامشه تلقائيًا على كل جانب. إذا كنت تريد توسيط جميع الصور الموجودة على الصفحة ، فيجب إضافة "margin: auto" إلى علامة الصورة:
img {
margin: auto;
}
ولكن ماذا يجب أن نفعل إذا أردنا أن يتم توسيط النص؟ يحتوي CSS أيضًا على طريقة خاصة لهذا الوضع:
.centertext {
text-align: center;
}إذا كنت تريد استخدام فئة "centertext" لتوسيط النص ، فكل ما عليك فعله هو إضافة هذه الفئة إلى علامة <p>:
<p class="centertext">This text will be centered.</p>
إعداد الإطار
يشير تحديد موضع عنصر ما إلى مقدار المسافة التي يجب مراعاتها من كل جانب. على سبيل المثال ، إذا قمت بتعيين مسافة 25 بكسل من أسفل الصورة ، سينخفض النص أدناه بمقدار 25 بكسل. يمكن تحديد التباعد للعديد من العناصر. لكن مثالنا في هذا القسم متعلق بصورة.
افترض أنك تريد أن تكون صورتك 20 بكسل من الجانبين الأيمن والأيسر و 40 بكسل من الأعلى والأسفل. لذلك ، أسهل طريقة هي:
img {
padding-top: 40px;
padding-right: 25px;
padding-bottom: 40px;
padding-left: 25px;
}بالطبع ، يمكنك الحصول على نفس الإخراج على النحو الوارد أعلاه باستخدام الكود القصير التالي:
img {
padding: 40px 25px 40px 25px;
}نظرًا لأن التباعد الأيمن والأيسر متماثلان والجزء العلوي والسفلي متماثلان ، يمكن اختصار هذا الرمز:
img {
padding: 40px 25px
}
قم بتمييز صفوف الجدول
بمساعدة CSS ، يمكنك القيام بأشياء لا تجعل طاولتك بسيطة فحسب ، بل تجعلها أكثر جمالًا أيضًا. من السهل إضافة الألوان وضبط الإطارات وجعلها تستجيب لشاشات الجوال. أحد أكثر الخيارات إثارة للاهتمام هو إبراز خطوط المخطط الزمني التي يحوم الماوس فوقها.
tr:hover {
background-color: #ddd;
}الآن ، كلما تحرك الماوس فوق خلايا الجدول ، سيتغير لون الصف المطلوب.
صور شفافة وغير لامعة
بمساعدة CSS ، يمكنك إجراء تغييرات كبيرة على الصور. على سبيل المثال ، يمكنك جعل الصور تتمتع بقليل من الشفافية ؛ وكأن هناك هالة بيضاء عليهم. يمكنك التحديد بحيث يتم تطبيق هذه الحالة عند وضع الماوس على الصورة.
img {
opacity: 0.5;
filter: alpha(opacity=50);
}تقوم سمة "filter" بنفس الشيء مثل "opacity" ، لكن Internet Explorer 8 وما بعده لا يمكنه اكتشاف مقدار الشفافية. أصبحت صورتك الآن أكثر شفافية ، وإذا كنت تريد جعلها غير لامعة ، فيمكنك القيام بما يلي:
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
ما هو رد فعلك؟
