یادداشت های میثم همتی
CSS position تعیین موقعیت
این امکان را به ما خواهد داد تا موقعیت یک عنصر را در چینش صفحه وب سایت انتخاب کنید .
تعیین موقعیت عناصر در صفحه باچهار مقدار top , right , bottom , left و روش های ( absolute , relative , fixed ) انجام میگیرد
تعیین موقعیت ثابت ( Fixed Positioning ) :
یک عنصر با نوع موقعیت ثابت ( fixed ) نسبت به پنجره مرورگر تعیین موقعیت خواهد شد . این عنصر با حرکت صفحه به بالا و پایین و حتی چپ و راست ( scroll ) تغییر موقعیت نخواهد داد
عنصر با نوع موقعیت fixed از جریان صفحه جدا شده است و با حرکت صفحه در جای خود ثابت باقی می ماند .
تعیین موقعیت مطلق ( Absolute Positioning ) :
یک عنصر با نوع موقعیت مطلق ( absolute ) از جریان طبیعی صفحه خارج خواهد شد . این عناصر نسبت به اولین عنصر پدر خود ( parent ) که دارای خاصیت relative تغییر موقعیت خواهند داد . اگر هیچ پدر نداشت که خاصیت relative داشته باشد از المنت body موقعیت میگیرد ..
مثال زیر برای قرار دادن منو در بخش head سایت است که نحوه ارتباط ul و div را نشان میدهد :
دسته بندی‌ها:htm - CSS,آموزش,طراحی وب
هر دستور css از سه بخش تشکیل میشود :
1 | Selector {property: value} |
Selector همان انتخابگر یا گزینشگر هستند مثل p ,div, …
Property همان خصویات مثل color
Value نیز مقدار هر خصوصیت black
مثالی برای موارد بالا :
1 2 3 4 5 6 | Div , p { color:black ; Font-family:arial; } |
Css جزو ابزار های اساسی طراحی قالب سایت است که تا حد زیادی حجم کد نویسی را کاهش میدهد
اضافه کردن سند css به قالب سایت :
Css را میتوان مستقیم در خود سند html نوشت اما به دلایل زیر
– خوانا نبودن کد ها
– شلوغ شدن سند html
– بالا رفتن لود سایت و تکرار کدها
در یک فایل جدا گانه به نام style.css کد های css را نوشته و به سند html لینک میکنیم
نکته : بزرگترین مزیت این روش این است که بعد از اولین نمایش سایت کد styl.css در مرورگر کاربر cache میشود
و در نمایش های بعدی ، سایت با سرعت بالاتری نمایش داده میشود
کد زیر را بین دو المنت <head> </head> قرار میدهیم
1 | <link rel="stylesheet" href="assets/css/style.css"> |
در کد فوق href مسیر فایل را مشخص میکند و css را به قالب html متصل میکند
سلام دوستان تو این سلسله آموزش ها میخوام دستورات مهم html و css را برای طراحی قالب یک سایت مرور کنیم و در یک پروژه بکار ببریم
همانطوری که برای انجام هر کاری نیاز به ابزار داریم برای طراحی قالب هم نیاز به یک Editor داریم
من خودم به دلایل زیادی Sublime Text editor را انتخاب میکنیم
چو کد نویسی را تا حد زیادی راحت و شیرین میکنه
از سایت http://www.sublimetext.com/3 برنامه فوق را دانلود کنید
تنظیمات این برنامه :
برای شروع طراحی ابتدا نیاز به یک میز کار داربم تا بتوانیم فایلهای پروژه را در آن قرار دهیم :
برای این کار از منوی view\side Bar گزینه show sidebar را انتخاب کنید
حال یک فلدر در درایو C مثلا با نام design ایجاد کنید از منوی file برنامه sublime گزینه open folder را انتخاب و فلدر design را انتخاب کنید
از منوی file با زدن new file فایلی به اسم index.html ایجاد و کد زیر را در آن قرار دهید و save کنید
دسته بندی‌ها:htm - CSS,آموزش,طراحی وب
- 1
- 1/1