::. کد نویس .::

آموزش طراحی سایت و برنامه نویسی تحت وب

::. کد نویس .::

آموزش طراحی سایت و برنامه نویسی تحت وب

وب نوشت " کدنویس " به شما کمک میکند که با زبان های برنامه نویسی تحت وب بهتر آشنا شوید .
آموزش های " کد نویس " را دنبال کنید و به خود ایمان داشته باشید که شما نیز میتوانید یک طراح وب شوید و به تجارت الکترونیکی بپردازید.
اگر این تارنما را میپسندید به ما لینک بدهید و " کد نویس " را به اشتراک بگذارید تا بیشتر دیده شویم .
با سپاس فراوان

۸ مطلب با موضوع «آموزش css» ثبت شده است

 

 

شاید شما خیلی وقت ها خواستید یک فایل HTML رو ویرایش کنید

خوب زیاد سخت نیست خیلی راحت میتونید در این آموزش این کار رو انجام بدید

با ما همراه باشید

  • علی حاتمی

با سلام خدمت دوستان عزیز و همه ی عزیزان علاقه مند به طراحی و برنامه نویسی سایت

در این قسمت از آموزش قرار هست آموزش کپی کردن کدهای قالب یک سایت رو برای شما آموزش بدیم

وب سایت مورد نظر ما در این بخش : Sadjad.ac.ir

دانشگاه صنعتی سجا

 

 

 

 

 

 

 

 

 

 

 

  • علی حاتمی

opacity یا همان مقدار وضوح یک شی یا متن یا هر فایلی در html که میتوان وضوح آن را با استفاده از opacity تعیین کرد میباشد

مقدار تاری , وضوح و نوع المنت را نشان میدهد که به صورت زیر میشود از آن استفاده کرد :

opacity : 0.9; که در این مثال مقدار وضوح را از 1 به 0.9 کاهش داده ایم

  • علی حاتمی

اضافه کردن گوشه های گرد در CSS2 بسیار وقت گیر بود . ما باید برای هر گوشه از یک تصویر استفاده میکردیم .

در CSS3 ایجاد گوشه های گرد آسان است .
در CSS3 از ویژگی border-radius برای ایجاد گوشه های گرد استفاده میشود .
و شما میتوانید گوشه های گرد در آن ایجاد کنید

به مثال زیر توجه کنید :

این جعبه دارای گوشه های گرد است.

برای این کار میتوایند از کد زیر استفاده کنید .

div {
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 یا قدیمی تر */
}
</div>
  • علی حاتمی

html - آموزش 5 ام

برای اینکه بخواهیم کد نویسی مرتب و تمیزی داشته باشیم و کار کردن خود نیز راحت تر باشد میبایست در کدنویسی html فایل css را که در فایلی دیگر قرار است نوشته شود را فراخوانی کنیم .

حال چگونه این کار را انجام دهیم ؟

  1. ابتدا یک صفحه ی html ایجاد کنید ( مثلا index.html )
  2. سپس بخش های آن ( html , header , body و... ) را مشخص کنید
  3. یک فایل css ایجاد کنید ( فایل های Css میبایست با فرمت css باشد مثل : style.css )
  4. سپس در بخش هدر ( header ) کد زیر را قرار دهید :
  5. <link type="text/css" rel="stylesheet" href="style.css" />

حال هر آنچه در css سایت ذخیره کنید و در المنت ها بکار ببرید در صفحه ی html شما اعمال خواهد شد .

  • علی حاتمی

css3 - آموزش دوم

توضیح کلی دررابطه Class و ID !

از این دو برای معرفی کردن به المنت ها ( DIV ) به استایل سایت برای شناختن قسمتی از سایت برای استایل دادن به آن میباشد

مثال :

		<div id="head"></div>
		<div class="head"></div>

 

در مثال بالا ما با یک المنت که با مشخص کردن قسمت head سایت آن را در Css سایت میتوانیم تغییر داده و به آن استایل دهیم .

 

  • علی حاتمی

css3 - آموزش اول

در کار با css در کدنویسی html میبایست تعدادی از کلمات و المنت های ضروری را یاد داشته باشید .

 

margin : اطراف المنت رو خالی میکنه و یه جورایی ایجاد فاصله بین عکس ها , متن ها و ... میکنه

float : برای مشخص کردن مکان المنت ها میباشد - راست یا چپ بودن آن

padding : فاصله ی داخلی المنت های را تغییر داده و تغییرات درونی آن میباشد و شباهاتی به margin دارد

background : برای ایجاد بکگراند درون المنت استفاده میشود

direction : برای مشخص کردن نوع چپ چین بودن یا راست چین بودن نوشته ( برای زبان های فارسی و انگلیسی )

border : برای ایجاد کادر در دوره المنت استفاده میشود

font-family : برای معرفی نوعه فونت نوشته ها میباشد

font-size : اندازه ی فونت نوشته ها

height : ارتفاع المنت موجود را میتوان با استفاده از آن مشخص کرد

width : برای اینکه بتوانید عرض المنت را مشخص کنید باید از این کد استفاده کنید

color : همانطور که از اسمش مشخص است برای تعیین رنگ المنت میباشد ولی دقت کنید رنگ نوشته ها را تغییر میدهد نه کل المنت را !

background-color : برای تعیین رنگ کلیه بک گرانده المنت ها

display : با استفاده از این کلمه در css میتوانید مشخص کنید که طریقه ی نمایش یک المنت به چه صورت باشد یا حتی آن را نمایش ندهد !

در آموزش های بعدی به نحوه ی استفاده ی کامل از این کدها اشاره خواهم کرد . ( کد های بیشتر برای شکیل کردن صفحه ی را در آینده آموزش خواهم داد )

  • علی حاتمی

css
css چیست ؟
CSS دستوراتی است که توسط آنها میتوان تمامی خصوصیات ظاهری صفحه وب سایت را تعیین کرد.
بنابراین شما توسط کدهای HTML صفحه وب سایت خود را پیاده سازی میکنید و با دستورات CSS مشخص میکنید هر عنصر چه خصوصیات ظاهری داشته باشد. خصوصیاتی مانند رنگ عنصر، اندازه هر عنصر، رنگ و اندازه فونت های مورد استفاده، فاصله عنصرها از یکدیگر، حاشیه و غیره . CSS مخفف کلمه Cascading Style Sheets و به معنی شیوه نامه آبشاری است. علت این نامگذاری نحوه اعمال دستورات به عناصر موجود در صفحه است. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که بعد از استفاده از دستورات متوجه این موضوع خواهید شد.

چرا باید از css استفاده کنیم ؟
CSS می تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید، سپس هرکجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید. همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد.
  • علی حاتمی