بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
13
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
5
تعیین اندازه و موقعیت عنصرها، در CSS
تعیین اندازه و موقعیت عنصرها، در CSS
4
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
3
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (links)، در CSS
لینک ها (links)، در CSS
5
رنگ ها، در CSS
رنگ ها، در CSS
1
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
مباحث عمومی، در CSS
مباحث عمومی، در CSS
8
×

دانلود فروشگاه اندروید کلیدستان

531

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

شیوه های به کار بردن کدهای CSS

برای به کار بردن کدهای CSS دو شیوه را به شما معرفی می کنم . یکی نوشتن کدهای CSS در یک فایل جدا از فایل صفحات html و دیگری نوشتن کدهای CSS در میان کدهای html هر صفحه . خوب مسلما روش اصلی ، همان نوشتن کدهای CSS در یک فایل جداگانه می باشد زیرا اگر قرار باشد کدهای CSS را درون هر صفحه html بنویسیم که مجبور خواهیم بود برای هر بار تغییر سایت ، همه صفحات را باز کرده و کدهای CSS را تغییر دهیم . در آموزش های CSS سایت کلیدستان ، ابتدا به شما یاد می دهم که چگونه کدهای CSS را در فایلی جداگانه بنویسید اما پس از آن در تمامی مثال ها ، کدهای CSS را به همراه کدهای html می نویسم (نه در فایلی جداگانه) و هدفم هم این است که شما به راحتی بتوانید همه کدها را سریع در فایلی در کامپیوترتان کپی کرده و نتیجه را مشاهده کنید و با تغییر دادن آن متوجه شوید که چگونه نتایج تغییر می کند زیرا فعلا هدف این است که شما کدنویسی CSS را یاد بگیرید .

نوشتن کدهای CSS در فایلی جداگانه :

ابتدا روش اصلی نوشتن کدهای CSS که همان نوشتن کدهای CSS در فایلی جداگانه می باشد را شرح می دهم . اول باید بگویم که چگونه فایل html و فایل CSS را بسازید . برای ساخت این دو فایل می توانید از هر نرم افزار ویرایش متن دلخواه استفاده کنید . ساده ترین نرم افزار برای ساخت هر دو فایل html و CSS ، نرم افزار Notepad در ویندوز می باشد که آن را می توانید در منوی ویندوز بیابید . همچنین نرم افزار Adobe Dreamweaver نیز نرم افزاری حرفه ای و بسیار مناسب می باشد و من آن را به شما توصیه می کنم . این نرم افزار به کدنویسی شما سرعت می بخشد و با رنگی کردن بخش های مختلف کدها ، باعث می شود که دید بهتری نسبت به کدهای نوشته شده داشته باشید . در مورد این نرم افزار در بخش مربوط به آموزش html توضیحاتی داده شده است که لینک آن در زیر نمایش داده شده است :


نرم افزار Dreamweaver برای راحت تر نوشتن کدها

ابتدا فایل مربوط به html را می سازیم . کدهای زیر را در نرم افزار ویرایشگر متن کپی کنید :


<html>
 
<head>
</head>
 
<body bgcolor="blue">
 
<p>this is a paragraph</p>
 
</body>
</html>

سپس فایل را با نامی دلخواه (معمولا index انتخاب می شود) و با پسوند html. ذخیره کنید و آن را با مرورگر اینترنت خود باز کنید .

همان طور که می دانید کدهای یک صفحه html ، با تگ <html> شروع شده و با تگ <html/> پایان می یابد . درون این دو تگ ، کدهای html به دو بخش head و body تقسیم می شوند که کدهای بخش head ، با تگ <head> شروع شده و با تگ <head/> پایان می یابند . کدهای بخش head در مرورگر اینترنت نمایش داده نمی شوند و تنها اطلاعاتی را در مورد صفحه html نوشته شده فراهم می کنند که البته فعلا ما کدی برای این بخش نمی نویسیم و تنها دو تگ آن را نوشته ایم تا فراموش نشود . کدهایی که نتیجه آنها در مرورگر اینترنت نمایش داده می شود باید در بخش body نوشته شوند . کد های بخش body ، با تگ <body> شروع شده و با تگ <body/> پایان می یابند . زوج تگ <p> و <p/> هم برای ساختن یک پاراگراف به کار می روند . دقت شود که درون تگ <body> ، مشخصه bgcolor را برابر blue تعیین کرده ایم که باعث می شود رنگ پس زمینه به رنگ آبی نمایش داده شود .

نتیجه :

Result

خوب این روش معمولی تعیین رنگ پس زمینه با کدهای html بود و تنها برای مقایسه با روش استفاده از CSS آن را شرح دادیم . اما ما اکنون می خواهیم یک فایل CSS بسازیم که در آن با کدهای CSS تعیین کنیم که رنگ پس زمینه صفحه به چه صورت باشد . ابتدا فایل CSS را می سازیم ، برای این منظور کدهای زیر را در نرم افزار ویرایشگر متن خود کپی کنید :


@charset "utf-8";

body {
          background-color:blue;
     }

سپس آن را با نام MyStyle.css ذخیره کنید . دقت کنید که پسوند فایل حتما باید css. باشد که پسوند مخصوص فایل های CSS است . در فایل CSS ، ابتدا کلمه body را نوشته ایم که یعنی باید تغییرات برای تگ body در کدهای html هر صفحه ای که به این فایل CSS ارجاع می دهد ، صورت گیرد . زیرا تعیین رنگ پس زمینه با استفاده از تگ body انجام می شود . سپس دو علامت } و { را آورده ایم که نشان می دهد که مشخصه هایی که تعیین خواهیم کرد مربوط به تگ body است که البته در اینجا ما تنها یک مشخصه نوشته ایم . مشخصه مد نظر ما background-color است که آن را برابر blue تعیین کرده ایم . در پایان نیز علامت ; را نوشته ایم . دقت شود که اگر مثلا 5 مشخصه مختلف را می خواستیم برای تگ body بنویسیم ، باید آنها را در میان دو علامت } و { می نوشتیم و به این صورت که هر کدام در خطی جداگانه نوشته شده و در انتهای هر کدام ، علامت ; قرار داده شود .

حال باید کدهای html صفحه را بنویسیم ، نسبت به روش معمولی که گفته شد ، باید در کدهای html صفحه ، مشخصه bgcolor را حذف کنیم و یک ارجاع به فایل CSS نیز بنویسیم :


<html>
 
<head>
<link href="MyStyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 
<body>
 
<p>this is a paragraph</p>
 
</body>
</html>

سپس فایل را با نام index.html که دارای پسوند html است ، در همان فولدری که فایل MyStyle.css قرار دارد ، ذخیره کنید و آن را با مرورگر اینترنت خود اجرا کنید . دقت شود که مشخصه bgcolor دیگر در تگ body نوشته نشده و همچنین با تگ <link> ، یک ارجاع به فایل MyStyle.css مشخص کرده ایم . دقت شود که تگ <link> باید در بخش head از کدهای html صفحه ، یعنی میان دو تگ <head> و <head/> ، نوشته شود . در تگ <link> ، با مشخصه href باید آدرس فایل CSS ای را که به آن ارجاع می دهیم ، مشخص کنیم . احتیاجی به حفظ کردن عبارت نوشته شده برای تگ <link> نیست و تنها می توانید این عبارت را در فایل های خود کپی کرده و در مواقعی که لازم شود ، فقط احتیاج به تغییر آدرس تعیین شده برای مشخصه href داریم .

Result

بنابراین یاد گرفتیم که چگونه یک فایل CSS را ساخته و سپس در صفحات html به آن فایل CSS ارجاع بدهیم .

نوشتن کدهای CSS در خود صفحه html :

همان طور که گفتیم ، می توان کدهای CSS را در خود صفحه html هم نوشت که در این صورت دیگر احتیاجی به ساخت فایل CSS نمی باشد . اما همین جا تذکر می دهم که روش اصلی و حرفه ای استفاده از کدهای CSS ، همان ساخت فایل CSS و نوشتن کدهای CSS درون آن می باشد . اما در سایت کلیدستان در مباحث دیگری که شرح می دهیم ، کدهای CSS را در خود صفحه html می نویسیم تا شما به راحتی و تنها با ساختن یک فایل html بتوانید نتیجه کدها را بنویسید و درگیر ساخت دو فایل ، آدرس دهی و ... نشوید . زیرا فعلا هدف ما یادگیری برنامه نویسی CSS می باشد و بعد که حرفه ای شدید ، خودتان کدهای CSS مورد نظرتان را در فایلی جداگانه بنویسید .

اکنون همان مثال قبلی را این بار به شیوه ای دیگر می نویسیم تا کدهای CSS درون خود فایل html اجرا شوند . کدهای زیر را در نرم افزار ویرایش متن خود کپی کنید :


<html>
 
<head>
<style type="text/css">
body {
      background-color:blue;
     }      
</style>
</head>
 
<body>
 
<p>this is a paragraph</p>
 
</body>
</html>

سپس فایل را با نام index.html که دارای پسوند html می باشد ، ذخیره کرده و آن را با مرورگر اینترنت خود باز کنید . مشاهده می کنید که برای نوشتن کدهای CSS درون فایل html ، از زوج تگ <style> و <style/> استفاده کرده ایم که این دو تگ باید در بخش head صفحه html ، یعنی بین دو تگ <head> و <head/> ، نوشته شوند . همان کدهای مربوط به تگ body را که در مثال قبل در فایل CSS نوشته بودیم ، این بار بین دو تگ <style> و <style/> ذکر کرده ایم . دقت شود که در تگ <style> ، مشخصه type به صورت text/css تعیین شده است .

نتیجه :

Result

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
جستجو در عنوان کلیدها :
جستجو توسط گوگل :
پرسیدن سوال :
ارسال نظر :
نظرات 2 2 0
سارا
۱۳۹۶/۰۴/۱۷
۱۵:۵۲

برای من مفید بود . ممنونم سپاس بسیار

عماد
۱۳۹۶/۰۴/۱۸
۱۰:۴۸

منون.  آموزنده و مفید بود .فقط برای پروژم از متن هاتون استفاده کردم  Blush

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

مباحث اولیه
مباحث اولیه برای آشنایی با LESS
مباحث اولیه برای آشنایی با LESS
4
بستن منو
۷۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
نمایش متن، در HTML
5
نمایش عکس، در HTML
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
17
تعیین مشخصات کلی صفحه، در HTML
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
مباحث عمومی، در HTML
10
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
انیمیشن ها (Animation)، در W3.CSS
5