Global Data

data:blog.title Developer my Blog
data:blog.pageType item
data:blog.url https://devblogsme.blogspot.com/2013/11/id-class.html
data:blog.homepageUrl https://devblogsme.blogspot.com/
data:blog.pageTitle Developer my Blog: ما هو id وما هو class والفرق بينهم
data:blog.encoding UTF-8
data:blog.languageDirection ltr
data:blog.feedLinks
data:blog.enabledCommentProfileImages true
data:blog.blogId 4342262374491712998
data:blog.metaDescription
data:blog.canonicalHomepageUrl http://devblogsme.blogspot.com/
data:blog.plusone
data:blog.isMobileRequest false

Blog

data:feedLinks
data:olderPageUrl https://devblogsme.blogspot.com/2013/11/blog-post.html
data:olderPageTitle Older Post
data:newerPageUrl https://devblogsme.blogspot.com/2013/11/css.html
data:newerPageTitle Newer Post
data:commentLabel comments
data:authorLabel Posted by
data:timestampLabel at
data:postLabelsLabel Labels:
data:backlinksLabel
data:numPosts 1

data:posts

data:post.dateHeader Friday, November 15, 2013
data:post.id 7702030206281471032
data:post.title ما هو id وما هو class والفرق بينهم
data:post.body
ميني سوفت


السلام عليكم ورحمة الله وبركاته
درسنا اليوم من دروس دورة تعلم تقنية CSS وهو التعرف على الفئات والمعرفات id و class والفرق بينهم
الـ id و الـ class هما المعرفات الاساسية التي توضع داخل وسوم  HTML و XML لتتعرف عليها تقنية الـ CSS ويتاح لك التعديل على كل كبيرة وصغيرة بالموقع من خلفية للموقع واطارت و الوان للخطوط و الوان لكل شئ و خلفيات للصور و تحديد حجم الصور و الخطوط ايضاً وشكلها
باختصار تستطيع ان تقول ان تقنية الـ CSS مسئولة عن كل شئ مرتبط بشكل وتنسيق وتصميم الموقع.

إجابة سؤالنا, ما هو id وما هو class والفرق بينهم، التالي :
id يسمى مُعرف .. class يسمى فئة
id يمكن أن يندرج تحته فئات كثيرة ولا يمكن ان يتكرر اسمه .. class يمكن ان يتكرر اسمه مرات ومرات على عكس id
id يكتب قبله #  .. class يكتب قبله دائماً . نقطة ,, ودعونا نأخذ مثال عملي :

-id مكتوب في صفحة HTML:
<div id='welcome'>to MiniSoft</div>
-id مكتوب في صفحة CSS
  #welcome {
    color: #000000 ;
    font: normal normal 12px Tahoma, Geneva, sans-serif;
  } 
نلاحظ أن id اصبح ( # ) وكتبت بجانبه welcome لأنها مكتوبة بجانب id في صفحة HTML

-class مكتوب في صحفحة HTML
<div class='mini'>soft</div>
-class مكتوب في صفحة CSS
  .mini {
    background-color: #CC0000;
    text-align: center;
  }
نلاحظ أن class اصبح نقطة ( . )  و كتبت بجانبها mini لأنها مكتوبة بجانب class في صفحة HTML

نأخذ مثال آخر على كيفية تكرار الفئة class :
<div class='mini'>ميني سوفت على تويتر</div>
<div class='mini'>ميني سوفت على جوجل كروم</div>
<div class='mini'>ميني سوفت ع الفيس بوك</div>
 كل هذه الوسوم المتشابهه تكتب في صفحة CSS هكذا:
  .mini {
    background-color: #CC0000;
    text-align: center;
  }
.إذاً فهمنا أن الوسم هو الملون و الذي يوجد بداخله كلمات كما رأينا, هذا بعكس المعرف id لا يمكن ان يتكرر نفس الوسم في نفس الصفحة او القالب كاملاً,,,

اتمنى ان تكون وصلت المعلومة والى اللقاء ان شاء الله في درس آخر من دروس الدورة 
السلام عليكم 
data:post.snippet السلام عليكم ورحمة الله وبركاته درسنا اليوم من دروس دورة تعلم تقنية CSS وهو التعرف على الفئات والمعرفات id و class والفرق بينهم الـ id و الـ...
data:post.author Rafat
data:post.authorAboutMe
data:post.authorProfileUrl https://www.blogger.com/profile/06073862446924648651
data:post.authorPhoto.url
data:post.url https://devblogsme.blogspot.com/2013/11/id-class.html
data:post.timestamp 12:41 PM
data:post.allowComments true
data:post.numComments 2
data:post.embedCommentForm true
data:post.allowNewComments true
data:post.commentPagingRequired false
data:post.showBacklinks False
data:post.numBacklinks 0
data:post.addCommentUrl https://devblogsme.blogspot.com/2013/11/id-class.html#comment-form
data:post.emailPostUrl
data:post.editUrl https://www.blogger.com/post-edit.g?blogID=4342262374491712998&postID=7702030206281471032&from=pencil
data:post.feedLinks
data:post.isFirstPost true
data:post.isDateStart true
data:post.includeAd False
data:post.createLinkLabel
data:post.createLinkUrl
data:post.commentSource 0
data:post.showThreadedComments true
data:post.commentJso null
data:post.commentMsgs null
data:post.commentConfig {}
data:post.communityId 0
data:post.commentHtml
  1. غير معرفNovember 15, 2013 at 1:16 PM

    (f) قمة الروعه
    شرح جامد

    ReplyDelete
data:post.commentLabelFull 2 comments
data:post.noNewCommentsText
data:post.iframeCommentSrc
data:post.addCommentOnclick

data:post.labels

data:label.name CSS
data:label.url https://devblogsme.blogspot.com/search/label/CSS
data:label.isLast False
data:label.name CSS3
data:label.url https://devblogsme.blogspot.com/search/label/CSS3
data:label.isLast False
data:label.name HTML
data:label.url https://devblogsme.blogspot.com/search/label/HTML
data:label.isLast False
data:label.name HTML 5
data:label.url https://devblogsme.blogspot.com/search/label/HTML%205
data:label.isLast True

data:post.comments

data:comment.id 1033491506927754947
data:comment.body (f) قمة الروعه
شرح جامد
data:comment.timestamp November 15, 2013 at 1:16 PM
data:comment.author غير معرف
data:comment.authorUrl
data:comment.deleteUrl https://www.blogger.com/comment/delete/4342262374491712998/1033491506927754947
data:comment.isDeleted False
data:comment.authorAvatarImage
data:comment.id 455746875741311343
data:comment.body يا رب تسلم
شكرا
data:comment.timestamp November 15, 2013 at 1:17 PM
data:comment.author ميني سوفت
data:comment.authorUrl http://www.blogger.com/profile/06073862446924648651
data:comment.deleteUrl https://www.blogger.com/comment/delete/4342262374491712998/455746875741311343
data:comment.isDeleted False
data:comment.authorAvatarImage

Header

data:title Developer my Blog
data:description Developer My Blog Blogger
data:useImage true
data:imagePlacement REPLACE
data:mobile false
data:sourceUrl https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uYZLkLKUs5PSMZKpe50x67DU4iR593_V6GeibF2YJlWGGDVVC9MHW2XZJ0J6gNkEu6SJ-ueI8vVnMmDoWnlWSHDcywcVk6dSZFNV-XMHsrnXwyMBFPoEfboXMk8iueJMwVxpdPwVl3c/s1600-r/magone-logo.png
data:backgroundPositionStyleStr left
data:height 30px;
data:width 162px;
data:widthStyleStr width: 162px;
Copyright GeekThis - All Rights Reserved