031- 344 500 60

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

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

طریقه نوشتن css

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

طریقه نوشتن 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
درباره نویسنده :
مرضیه ناجی

مطالب مرتبط

شرکت نرم افزاری پاد

طراحی سایت شرکتی پاد ایران کو

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

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته

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

آموزش دستوراتhtml5

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

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

طراحی سایت خدماتی خیام باشی

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

ارسال دیدگاه

*    

*