Global Data

data:blog.title Developer my Blog
data:blog.pageType item
data:blog.url https://devblogsme.blogspot.com/2013/11/css.html
data:blog.homepageUrl https://devblogsme.blogspot.com/
data:blog.pageTitle Developer my Blog: قواعد اساسية لابد منها لتعريف كتابة اوامر الـ CSS
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/id-class.html
data:olderPageTitle Older Post
data:newerPageUrl https://devblogsme.blogspot.com/2013/11/mozilla-firefox-2501.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 8688799755744176564
data:post.title قواعد اساسية لابد منها لتعريف كتابة اوامر الـ CSS
data:post.body
ميني سوفت

السلام عليكم ورحمة الله وبركاته ..

درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة CSS
يدور حول اساسيات و قواعد لابد من توفرها حتى يتاح لك استخدام هذه الخاصية بنجاح.
بالنسبة للمدونات بلوجر فدائماً هنام قاعدة ثابتة وهي , اكواد CSS تبدأ بوسم وتنتهي بوسم كما التالي:

<b:skin><![CDATA[
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
]]></b:skin>
اما في المواقع والمدونات الآخرى وايضاً بلوجر يتم استخدام الآكواد بالشكل التالي:

<style type='text/css'>
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
</style>
ما هي القاعدة الثابتة  في كتابة أكواد CSS ؟ التالي ..

#outer-wrapper {padding: 3px;}

سوف نأخذهم بالتدريج من الشمال لليمين ونشرح اسم كل جزء ملون في هذا الكود

# المعرف الذي يوضع في صفحات html والذي يسمى id ويمكن ان يكون مكانه فئة وهي النقطة التي تسمى class , ويمكن استخدام كل شئ في صفحة html من روابط و معرفات وفئات

outer-wrapper يسمى في الكود Selector  او المُحدد ولا يشترط ان يكون outer-wrapper, بل المقصود الموضع نفسه في الكود

} بداية كتابة الكود

padding  هي من ضمن الخصائص التي تتحكم في تصميم الموقع او المدونة , وليس المقصود هنا padding بل المقصود المكان نفسه في الكود وينتهي دائماً ب نقطتين فوق بعضهم هكذا : 

3px هذا المكان في الكود يُسمى value او القيمة المعطاه للخاصية المحددة

; الفاصلة المنقوطة تكون فاصل بين كل كود والاخر مثال الكود هذا 

#outer-wrapper {padding: 3px; margin: 0px;}


{ نهاية مجموعة الأكواد كما في الكود السابق هذا 

وبهذا نكون قد اطلعنا على اساس وضع اكواد هذه التقنية الجميلة
اترككم في رعاية الله إلى درساً جديد من دروس الدورة
data:post.snippet السلام عليكم ورحمة الله وبركاته .. درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة CSS يدور حول اساسيات و قواعد لابد من توفرها حتى يتاح لك ا...
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/css.html
data:post.timestamp 10:31 PM
data:post.allowComments true
data:post.numComments 0
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/css.html#comment-form
data:post.emailPostUrl
data:post.editUrl https://www.blogger.com/post-edit.g?blogID=4342262374491712998&postID=8688799755744176564&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
data:post.commentJso
data:post.commentMsgs
data:post.commentConfig
data:post.communityId 0
data:post.commentHtml
data:post.commentLabelFull No 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

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