لیست UL و LI در سی اس اس
در این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.
ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که List را در 3 حالت زیر نمایش دهیم.
در HTML دو نوع ار انواع لیست وجود دارد
Text Color
در این بخش از آموزش css ، تنظیم متن و نوشته را آموزش میدهیم.
ویژگی color برای تنظیم رنگ متن استفاده میشود.این ویژگی با 3 روش زیر میتواند مقدار دهی شود
رنگ پیش فرض در یک صفحه وب سایت بستگی به رنگ انتخاب شده در بدنه وب سایت شما دارد
Font Family
در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.
در css دو نوع از خانواده فونت ها وجود دارد.
با ویژگی font-family شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.
Background
در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های پس زمینه برای یک عنصر به کار میرود.این ویژگی در طراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.
انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم
تنظیم ابعاد در CSS
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.
در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.
در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.
مثال صحیح :
margin-left:20px;
مثال غلط:
margin-left:20 px;
با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .
یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.
برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.
از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی
، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر
صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای
گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS خارجی را میتوان در هر ویرایشگر متنی نوشت ، CSS Style ها باید با فرمت css. ذخیره شوند. با استفاده از این سبک در واقع شما از یک Style میتوانید در چندین صفحه از وب سایت خود استفاده کنید.
برای نامگذاری فایل های CSS باید نکاتی را رعایت کرد که در بخش قوانین نام گذاری فایل های CSS به طور کامل به آن خواهیم پرداخت.
CSS داخلی
یکی از روشهای تعریف css استفاده از روش Internal Style Sheet میباشد. برای استفاده از این روش بایستی کد های CSS را در فایل HTML ، درون .star-rating, .star-rating a:hover, .star-rating a:active, .star-rating .current-rating{ background: url(/temp/img/star.png) left -1000px repeat-x;direction:rtl ;cursor:pointer} .star-rating{ position:relative; width:120px; height:24px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top;direction:rtl } .star-rating li{ display: inline;padding:0px;} .star-rating a, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:24px; line-height:24px; outline:none; overflow:hidden; border: none; } .star-rating a:hover, .star-rating a:active{ background-position: left bottom; } .star-rating a.one-star{ width:20%; z-index:6; } .star-rating a.two-stars{ width:40%; z-index:5; } .star-rating a.three-stars{ width:60%; z-index:4; } .star-rating a.four-stars{ width:80%; z-index:3; } .star-rating a.five-stars{ width:100%; z-index:2; } .star-rating .current-rating{ z-index:1; background-position: left center; }">تگ<head> قرار دهید.
از این روش فقط در طراحی سایت هایی که تعداد صفحات کمتری دارند ، ولی بهترین روش برای داشتن طراحی سایت حرفه ای استفاده از روش css خارجی میباشد.
مزایای استفاده از این سبک :
معایب استفاده از این سبک :
<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url("images/bg.gif");}
</style>
</head>
این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.این روش در واقع هدف واقعی استفاده از css را کاهش میدهد .
برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.
با استفاده از ویژگی style در یک عنصر میتوانید از این روش نوشتن css استفاده کنید.
مثال :
<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>
با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام میشود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام میدهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.
تعداد صفحات : 93
تگ لینک ( تگ Link )