CSS} Language} =>|| تطبيق الأساسيات

Abu.Rajih

نبيل
مستوى التفاعل
541
بسم الله الرحمن الرحيم
شرحة في موضوعي امس عن الاساسيات

CSS} Language} =>|| الأساسيات

واليوم سنقوم بتطبيق الي فهمناه من الشرح

طبعا ياريت كل من له حماس بالاستمرار معنا المشاركه وإعطائنا الكود الذي صممه

طبعاً عشان لا تضيع بصور لك عشان تفهم

الي في المستطيل الاحمر هو للتاج الذي يحتوى على class وطريقة الاتصال به بإستخدام CSS

والي في المستطيل الاخضر للتاج الذي يحتوى على id وطريقة الاتصال به بإستخدام CSS


index.php



فهمت ؟

بالستايل شيت انشاءة اتصال بجميع تاجات b بهذا الكود

index.php


وهذا يعني انه اي تاج <b> سيتم تلوينه باللون الازرق

انا قمت بإعطاء التاج الذي يحتوي على class خلفية حمراء

اما التاج الذي يحتوي على id خليت لون الخط احمر

صوره للديزاين لكي تفهم

index.php



تم تعديل جميع تاجات <b> وتغير لونها للازرق

يعني الحين لو اضيف تاج <b> في صفحتي HTML مباشرة سيتم تلوين الخط للازرق


واذا بقيت اعطي احد التاجات لون مختلف سيتوجب علي ترميزه بid وانشئ اتصال بين CSS والتاج الذي يحتوي على id واضيف له الخصايص التي اريدها انا

اتمنى منكم التطبيق ومشاركتنا الاكواد التي كتبتوها لكي نعرف من الي فهم ومن الي مافهم واي استفسار نحن بالخدمه

طبعاً اكواد الصفحه ستحفظ بصيغة
.html



كود الصفحه التي صممتها انا للشرح
PHP:
<html>
<head>
<title>Abu.Rajih</title>

<style>
b{color:blue;} /* الاتصال بجميع تاجات b*/

.group{background:red;} /* هذا اتصال بتاج div*/

#name{color:red;} /* الاتصال بتاج b الذي يحتوى على id */

</style>
    
</head>
    
<body>
<!--------- TAG  ----------->
<b>SALIM</b><br>
<b>SALIM</b><br>

<!--------- CLASS  ----------->
<div class='group'>
<b>سالم</b><br>
<b>salim</b><br>
<b>سالم</b><br>
</div>
    
<b>SALIM</b><br>
<b>SALIM</b><br>
    
<!--------- ID  ----------->
<b id='name'>كود الذي يرمز للاي دي</b><br>
<b>End</b><br>

</body>
</html>
 

المرفقات

  • Screenshot_1.png
    Screenshot_1.png
    38,4 ك. ب · المشاهدات: 286
  • Screenshot_2.png
    Screenshot_2.png
    2,7 ك. ب · المشاهدات: 222
  • Screenshot_3.png
    Screenshot_3.png
    7 ك. ب · المشاهدات: 219

Capta Gon .

نبيل
مستوى التفاعل
946
مبدع يابو راجح استمر في ابداعك وشرحك جميل جدا


محتوى الكود :






كودها


كود:
<!Doctype html>
<html>

<head>
<style>

#Capta_Gon {
 
font-align:center;
font-size:30;
font-weight:bold;
color:red
}

body{
background-color:yellow;
}

h1{
font-family:Aharoni;
color:green
}

p{
font-family:Aharoni;
font-weigt:bold;
color:blue
}

h2{
font-family:Aharoni;
color:red
}

</style>
</head>
<body>
<center><a href = "https://ae49.tribalwars.ae/guest.php?screen=info_player&id=1520104#541;476" target ="_blank" > <img src="https://dsae.innogamescdn.com/8.141/38560/graphic/userimage/62418_large" > </a></center>
<center><p id="Capta_Gon" >" بعض عوالم الحساب"</p></center>


<center><h1>W : 31</h1>
<p >ترتيب الحساب بالعالم توب 1 مع احتكار جميع الانجازات والفوز مع قبيلة ريفو
لزيارة صفحة الترتيب : <a href ="https://www.tribalwars.ae/archive/ae31/players"target="_blank" ><h3>اضغط هنا</h3></a> </p></center>


<h2> W : 32</h2>
<p>عالم من اقوى العوالم بالنسخه الخ <span> "Revo "</span> </p>


</body>






</html>
 
أعلى