چگونگی استفاده از CSS

بازدید: 1984 بازدید

چگونگی استفاده از CSS

 

زکات علم نشر آن است.

* حضرت علی (ع) *

 

در این سلسله ازمقالات، شما چگونگی استفاده از CSSجهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت. برای یادگیری ،CSSشما باید درکی پایه ای از مفاهیم HTMLو XHTMLداشته باشید.

 

 

یک نمونه از CSS :

body {
background-color :#d0e4fe;
}
h1 {
color :orange;
text-align :center;
}
p {
font-family: “Times New Roman”;
font-size :20px;
}

CSS چیست؟

CSS مخفف Sheets Style Cascading است.

style ها چگونگی نمایش عناصر HTMLرا تعریف می کنند.

Style ها برای حل یک مشکل به HTML 4.0اضافه شدند.

External Style Sheets می تواند در در انجام کار صرفه جویی کند.

External Style Sheets در فایل های CSS دخیره میشود.

 

نمایش CSS :

سند HTML را می توان با style های مختلف نمایش داد.

Style ها مشکل بزرگی را حل کردند.

HTMLهرگز به قصد در برگرفتن tagبرای فرمت کردن یک سند ایجاد نشد.

HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد.

وقتی tagها و attributeهای رنگ به HTML 3.2اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وب سایت های بزرگ، که فونت ها و اطلاعات رنگ در هر صفحه مجزا بودند، فرآیندی طولانی و پرهزینه ای شد.

برای حل این مشکل، کنسرسیوم ،World Wide Webتصمیم گرفت CSSرا ایجاد کند.

در ،HTML 4.0می توان کل قالب بندی را از سند HTMLحذف کرد، و در فایل CSSجداگانه ای ذخیره کرد.

امروزه، همه مرورگرها CSSرا ساپورت می کنند.

CSS در انجام مقدار زیادی کار صرفه جویی می کند ،

CSS تعریف می کند عناصر HTML چگونه نمایش داده می شوند.

معمولاً Styleها در فایلهای . cssذخیره می شوند.

style sheet های خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layoutهمه صفحات موجود در یک وبسایت می کند.

 

مثال فایل HTMLزیر، لینکی به یک style sheetخارجی با تگ است :

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”ex1.css” />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>

این، فایل style sheet است :

body {
background-color: yellow; 12
}
h1 {
font-size: 36pt;
}
h2 {
color: blue;
}

p {margin-left: 50px;}

دستور نحوی CSS :

یک ( rule set یک حکم یا دستور است که نحوه ی پردازش المان ها را روی یک صفحه ی HTMLبرای مرورگر مورد نظر تعریف می کند) همان طور که در تصویر زیر مشاهده می کنید متشکل است از یک ( selectorانتخاب گر) و ( declaration blockبلوک یا ساختمان اعلان) است .Selector به آن عنصر HTMLی اشاره دارد که طراح وب مایل است سبک دهی کند . یک declaration blockدربردارنده ی یک یا چند تعریف ( declaration ) است که توسط نقطه ویرگول semicolon از هم جدا می شوند . هر تعریف نیز خود شامل یک اسم خصوصیت property name و همچنین یک مقدار value است که توسط یک دو نقطه colon از هم جدا سازی می شوند .

یک مثال CSS :

همیشه یک تعریف CSS به نقطه ویرگول ختم می شود، گروه های تعریفی declaration group {نیز داخل کاراکترهای } محصور می شوند:

p {color:red; text-align:center;}

به منظور افزایش قابلیت خوانایی ،CSSشما می توانید هر بخش یک تعریف را روی خط مجزا قرار دهید . مثال:

p {
color: red;
text-align: center;
}

 

 

در ادامه آموزش های ما را دنبال کنید……در صورت تمایل مطالب ما را به اشتراک بگذارید…..

 

کانال تلگرام ما : AmozeshFarsi@