031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » css » طریقه نوشتن css

طریقه نوشتن css

۲۳ام آبان ۱۳۹۷
مرضیه ناجی
0
76

طریقه نوشتن css برای طراحی سایت

Style دهی به عناصر html روش های گوناگونی دارد .اگر شما هم در نوشتن style عناصر خود دچار مشکل هستید و نمی دانید از کدام روش استفاده کنید با تیم وب یار از طراحی سایت اصفهان  همراه باشید.

به طور کلی  طریقه نوشتن css به سه صورت انجام می گیرد (internal, inline ,external)  اولین روش به آن internal style sheet می گویند. در این روش کد های css را درون فایل html و تگ head   قرار می دهیم. این روش زمان بارگذاری صفحه را افزایش می دهد. بنابراین اصلا توصیه نمی شود. تنها مزیت این روش نسبت به روش بعدی (درون خطی) این است که می تواند از خاصیت ارث بری کلاس ها استفاده کند.

یعنی می توانید از یک style در چندین جای صفحه استفاده کنید.

طریقه نوشتن css

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

<head>

<style>

h {color:silver;}

p {

margin-left:20px;

}

body {

background-image:url(“images/bg.gif”);

}

</style>

</head>

 

روش دوم از طریقه نوشتن inline style sheet ، css است. در این روش دقیقا style را درون عنصری تعریف می کنیم که می خواهیم به آن cssبدهیم .این روش برای سایت هایی که تعداد صفحات کمتری دارند می تواند استفاده شود اما هرگز توصیه نمی شود زیرا مانند روش قبل سرعت بارگذاری صفحه را افزایش می دهد .

مثال :

<!DOCTYPE html>

<html>

<body> <h1 style=”color:blue”>این یک عنوان است</h1> <p style=”color:red”>این یک پاراگراف است.</p> </body>

</html>

روش سوم و مرسوم ترین  طریقه نوشتن css روش external style sheet (ظاهر سازی به روش خارجی ) است. این روش بسیار ایده ال است. و سرعت بارگذاری صفخه در آن نسبت به روش های قبل بالاتر است زیرا به طور مثال اگر شما بخواهید رنگ یا فونت تگ p درون صفحه html را تغییر دهیدلازم نیست مانند روش بالا در کنار هر تگ p  ،style مورد نظرتان را اضافه کنید کافی است صفحه ای جدا گانه به نام style.sheet باز کزده و style مورد نطرتان را تنها با یک بار نوشتن به کلیه تگ های p اضافه کنید

P:{

Color:red;

Font-size:12px;

}

 

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

<head>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
</head>

در کد بالا قسمت rel و type را لازم نیست تغییر دهید اما باید لینک صفحه cssخود را به درستی در قسمت href قرار دهید تا صفحه html تان به صفحه cssلینک شود در غیر این صورت عنصر ها stlye های مورد نظر را نمی گیرند .

همان طور که می دانید کد نویسی سایت را با تگ <div> بخش بندی می کنند. حال اگر بخواهیم به div  در صفحه خارجی Style  دهیم می توانیم مانند کد های زیر به آن کلاس یا id دهیم و در صفحه css با . برای کلاس و # برای id، divمورد نظر را فراخوانی کنیم . تفاوت کلاس با id در این است که id  یکسان فقط به یک عنصر یا  divتعلق می گیرد (انحصاری )است اما می توان به چند عنصر یا div کلاس یکسان داد.

صفحه html:

<html>

<body>

<div id=”search”></div>

<div class=”search-submit”><p>hello world</p></div>

</body>

صفحه css:

#search{

Width:500 px;

Height:200px;

Float:right;

}

.search-submit{

Width:500 px;

Height:200px;

Float:right;

}

حال اگر بخواهیم به تگ p درون کلاس search-submit ، style دهیم باید به صورت زیر بنویسیم:

.search-submit  P {

Color:red;

}

سخن پایانی : در مطلب فوق سعی بر آن بود که شما را با روش های style دهی عناصر html آشنا کنیم تا طریقه نوشتن css

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

طریقه نوشتن css
5 (100%) 5 votes
درباره نویسنده :
مرضیه ناجی

مطالب مرتبط

طراحی سایت خدماتی صدرا

طراحی سایت خدماتی صدرا طراحی سایت اختصاصی صدرا ارایه دهنده ی انواع آزمایش های تشخیصی به روش Realtime PCR-HRM در اصفهان می باشد. از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت خدماتی صدرا برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف دامپزشکی و نیازمند انجام کلیه ی آزمایش […]

طراحی سایت فرهنگی سایت کودک

طراحی سایت فرهنگی کودک خلاق

طراحی سایت فرهنگی کودک خلاق طراحی سایت اختصاصی کودک خلاق با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. طراحی سایت اختصاصی کودک خلاق برای مشتریان عزیزی که کسب و کارشان در حوزه های فرهنگ و خدماتی است بسیار مناسب می باشد. آدرس سایت جهت مشاهده تمامی […]

طراحی سایت خدماتی کانون ایران فردا

طراحی سایت خدماتی کانون ایران فردا

طراحی سایت خدماتی کانون ایران فردا طراحی سایت اختصاصی کانون ایران فردا با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. این سایت در زمینه ی معرفی متخصصین، ثبت آگهی و معرفی مشاغل فعالیت دارد. همچنین در سایت کاف ( کانون ایران فردا ) فروشگاه اینترنتی راه […]

طراحی سایت اختصاصی آجیل بازار

طراحی سایت خدماتی آجیل بازار

طراحی سایت خدماتی آجیل بازار طراحی سایت اختصاصی آجیل بازار با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت و سئو سایت وب یار است. این سایت در زمینه ی تولید و توزیع عمده پسته و خشکبار فعالیت دارد. طراحی سایت خدماتی آجیل بازار برای مشتریان عزیزی که کسب و کارشان […]

ارسال دیدگاه

*    

*