آموزش زبان css (بخش اول)
فهرست مطالب
آخرین به روزرسانی در 21/10/2022
در این مقاله قصد داریم به آشنایی و آموزش زبان css بپردازیم.
زبان css به نحوی تکمیل کننده ی زبان html می باشد و ما در مقاله ای به صورت کامل به آشنایی و
آموزش زبان html پرداختیم و همانطور که گفته شد طراحی یک وبسایت بدون استفاده از زبان های html و css غیر ممکن است.
html به ایجاد و پایه گذاری صفحات و فیچر ها می پردازد و زبان css باعث استایل بندی آن ها و نمایش آن ها به یک شکل پویا و داینامیک می شود.
(لازم به ذکر است آپشن ها و کامپوننت های زبان css بسیار زیاد و گسترده بوده و ما در این مقاله تنها می توانیم بخشی
از آنهارا شرح داده و بیشتر هدفمان آشنایی و یک آموزش کلی با این زبان می باشد؛ زیراکه شما پس از آشنایی و نحوه ی کار کردن با این زبان به راحتی می توانید از منابعی مانند W3School برای آشنایی با تمامی آپشن ها و فیچر های این زبان استفاده کنید.)
پیش نیاز این مقاله ی آموزشی ، مطالعه و تسلط بر مقاله ی زبان html می باشد.
Css چیست ؟
Cascading Style Sheets، که مخفف شده ی CSS است، یک زبان طراحی و استایل بندی ساده برای وبسایت است.
CSS ظاهر و به اصطلاح فرانت یک صفحه وب را کنترل می کند.
با استفاده از CSS، میتوانید رنگ متن، سبک فونتها، فاصله بین پاراگرافها، نحوه اندازهگذاری و چیدمان ستونها، تصاویر پس زمینه ، رنگ ها ، طرحهای چیدمان، انیمیشن ها ، تغییرات در نمایش برای دستگاههای مختلف ، اندازههای صفحه نمایش و بسیاری دیگر از این موارد را کنترل کنید.
یادگیری و درک CSS بسیار آسان است اما لازم به ذکر است که کنترل قدرتمندی بر روی یک فایل HTML فراهم می کند.
معمولاً CSS با زبان های HTML یا XHTML ترکیب می شود.
مزایا و کاربرد های آموزش زبان Css
CSS زبان بسیار بهینه ای می باشد و روش های متعددی را برای ادغام با html دارد که یکی از بهترین این روش ها ، روش فراخوانی می باشد.
کنترل آسان : برای ایجاد یک تغییر بزرگ، به سادگی استایل مورد نظر را تغییر دهید، و تمام عناصر در تمام صفحات وب که با کلاس مورد نظر مشخص شده اند تغییر پیدا می کند.
باعث زیبایی و پویانمایی صفحات وب شده و می توان برای هر دیوایز یک نسخه ی اختصاصی واکنش گرا از وبسایت طراحی کرد.
فراخوانی Css
ما قبلا در مقاله ی زبان html در رابطه با فراخوانی css برای html به صورت کامل توضیح دادیم.
اما الان مجدد جهت یادآوری توضیحاتی را ارائه خواهیم کرد.
به طور کلی ما دو روش اصلی برای استفاده از css برای html داشتیم که این دو روش به شرح زیر می باشد :
1- روش inline :
این روش که روش بهینه ای نبوده اما در موارد خاص کاربردهای خود را دارد به اینصورت است که شما درون همان فایل
html استایل بندی های مربوط به css را مانند مثال زیر انجام خواهید داد :
This is a heading
This is a paragraph.
2- روش outline :
در این روش تمامی فایل های html و فایل های css از یکدیگر مجزا می باشند و شما تنها کافی است که در فایل html خود، فایل css را فراخوانی کنید.
همچنین نیاز است برای هر کامپوننتی که در فایل html خود ایجاد می کنید یک کلاس یا یک آی دی تعریف کنید.
به مثال زیر توجه کنید :
فایل html :
This is a heading
This is a paragraph.
فایل css(mystyle.css) :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
(لازم به ذکر است در مثال بالا چون ما تنها یک تگ هدینگ و یک تگ پاراگراف داشتیم نیازی به استفاده از کلاس و یا آی دی نبوده و خود تگ را مستقیما در فایل css استایل دهی کردیم.)
ساختار سینتکس در Css
یک CSS دارای یک سری قوانین و استایل بندی های خاصی است که توسط مرورگر تفسیر شده و سپس به عناصر مربوطه در فایل HTML شما اعمال می شود.
ساختار این استایل بندی دارای سه بخش اصلی است که این سه بخش به شرح زیر می باشد :
Selector : Selector یک تگ HTML است که در آن یک استایل اعمال می شود. (ما در مقاله ی زبان HTML تمامی تگ های مهم را معرفی کردیم.)
Property : نوعی ویژگی تگ HTML است. به زبان ساده، تمام ویژگی های HTML به ویژگی های CSS تبدیل می شوند. آنها می توانند رنگ، بوردر و .. باشند.
Value : مقادیر به properties اختصاص داده می شوند. به عنوان مثال، ویژگی رنگ می تواند دارای مقدار قرمز یا #F1F1F1 و .. باشد.
شما می توانید CSS Style Rule Syntax را به صورت زیر تعریف کنید :
selector { property: value }
در تصویر بالا همانطور که مشاهده می کنید table یک selector و border یک ویژگی است و مقدار داده شده 1px solid #C00 مقدار آن ویژگی است.
به صورت دلخواه می توانید selector ها را به متدهای مختلف ساده تعریف کنید.
انواع selectors
حالت اول سکلتور مانند همان مثال هایی است که در قسمت های بالا زدیم :
h1 {
color: #36CFFF;
}
Universal Selectors
در این روش به جای انتخاب المان ها از یک نوع خاص، Universal Selectors به سادگی با نام هر نوع عنصر ، مطابقت دارد.
در واقع شما در روش پایین استایلی به تمامی المان های موجود می دهید.
h1 {
color: #36CFFF;
}
The Descendant Selectors
فرض کنید میخواهید یک استایل را فقط زمانی برای یک المان خاص اعمال کنید که در داخل یک المان دیگری قرار دارد.
همانطور که در مثال زیر گفته شده است ، style فقط زمانی برای المان em اعمال میشود که داخل تگ <ul> باشد.
ul em {
color: #000000;
}
The Class Selectors
شما می توانید استایل دهی را بر اساس ویژگی کلاس المان ها تعریف کنید.
اگر برای المانی کلاسی تعریف کرده باشید می توانید به روش زیر آن المان را استایل دهی بکنید.
.black {
color: #000000;
}
در مثال بالا هر المانی که دارای کلاس black باشد این ویژگی برای آن اعمال می شود.
اما شما طبق مثال زیر می توانید این انتخاب را محدود تر کرده و به عنوان مثال تعریف کنید که فقط کلاس black در تگ h1 این ویژگی را به خود بگیرد.
h1.black {
color: #000000;
}
The ID Selectors
این سلکتور نیز مانند بالا است با این تفاوت که به جای کلاس در html از آی دی استفاده شده است.
شما می توانید استایل را بر اساس ویژگی id المان ها تعریف کنید.
تمام عناصری که آن id را دارند طبق قانون تعریف شده قالب بندی می شوند.
#black {
color: #000000;
}
محدود کردن تعریف مانند حالت کلاس بالا :
h1#black {
color: #000000;
}
The Child Selectors
در این حالت شما به اصطلاح فرزند یا زیر مجموعه ی یک المان را قالب بندی می کنید ، به مثال زیر توجه کنید :
body > p {
color: #000000;
}
در مثال بالا اگر پاراگرافها مستقیماً فرزند المان <body> باشند، این قانون همه پاراگرافها را سیاه نشان میدهد.
پاراگراف های دیگری که در داخل المان های دیگر مانند <div> یا <td> قرار می گیرند هیچ تأثیری از این قانون ندارند.
The Attribute Selectors
شما میتوانید استایلهایی را برای المان HTML با ویژگیهای خاص اعمال کنید.
قانون سلکتور زیر با تمام عناصر ورودی دارای ویژگی type با مقدار text ، مطابقت دارد.
input[type = "text"] {
color: #000000;
}
مزیت این روش این است که عنصر </”input type = “submit > بیتأثیر است و رنگ فقط در قسمتهای متن مورد نظر اعمال میشود.
قوانین زیر برای سلکتور اعمال می شود.
p[lang] : تمام المان های پاراگراف را با ویژگی lang انتخاب می کند.
p[lang=”fr”] : تمام المان های پاراگراف را انتخاب می کند که ویژگی lang آنها دقیقاً “fr” است.
p[lang~=”fr”] : تمام المان های پاراگراف را که ویژگی lang آنها حاوی کلمه “fr” است را انتخاب می کند.
p[lang|=”en”] : تمام المان های پاراگراف را انتخاب می کند که ویژگی lang آنها حاوی مقادیری است که دقیقاً “en” هستند، یا با “en-” شروع می شوند.
Multiple Style Rules
ممکن است لازم باشد چندین استایل دهی برای یک المان تعریف کنید.
شما می توانید این استایل دهی را برای ترکیب چندین ویژگی و مقادیر متناظر در یک بلوک تعریف کنید که در مثال زیر تعریف شده است :
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
فقط توجه داشته باشید پس از هر ویژگی حتما آن را با علامت ; ببندید ، زیراکه در غیراینصورت کد شما اجرا نمی شود.
Grouping Selectors
در صورت تمایل می توانید یک استایل را برای سلکتورهای زیادی اعمال کنید.
فقط انتخابگرها را با کاما جدا کنید، همانطور که در مثال زیر آمده است :
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
لازم به ذکر است سلکتورهای گروهی می تواند برای کلاس یا آیدی مطابق با کد زیر نیز باشد :
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
Measurement Units
در این بخش قصد داریم به معرفی واحدهای اندازهگیری CSS بپردازیم.
CSS از واحدهای اندازه گیری مانند : اینچ، سانتی متر، points و … و همچنین اندازه گیری های نسبی مانند درصد و واحد em پشتیبانی می کند.
هنگام تعیین اندازه گیری های مختلف در استایل دهی ما به این مقادیر نیاز داریم .
به عنوان مثال :
“border = “1px solid red.
ما تمام واحدهای اندازه گیری CSS را همراه با مثال های مناسب در جدول زیر فهرست کرده ایم.
Unit | Description | Example |
% | اندازه گیری به درصد | p {font-size: 16pt; line-height: 125%;} |
cm | اندازه گیری به سانتی متر | div {margin-bottom: 2cm;} |
em | اندازه گیری نسبی برای ارتفاع font در فضاهای em. | p {letter-spacing: 7em;} |
ex | این مقدار یک اندازه گیری نسبت به ارتفاع x فونت را تعیین می کند. | p {font-size: 24pt; line-height: 3ex;} |
in | اندازه گیری به اینچ | p {word-spacing: .15in;} |
mm | اندازه گیری به میلی متر | p {word-spacing: 15mm;} |
pc | اندازه گیری را در واحد picas تعریف می کند. (هر اینچ برابر 6 پیکا است.) | p {font-size: 20pc;} |
pt | اندازه گیری بر حسب points (یک پوینت برابر با 1.72 اینچ است.) | body {font-size: 18pt;} |
px | اندازه گیری بر حسب پیکسل | p {padding: 25px;} |
رنگ ها در Css
CSS از مقادیر رنگ برای تعیین یک رنگ استفاده می کند.
به طور معمول، از اینها برای تنظیم یک رنگ برای پیش زمینه ، تعیین رنگ یک متن ، border و سایر جلوه های گرافیکی استفاده می شود.
شما می توانید مقادیر رنگ خود را در فرمت های مختلف مشخص کنید.
جدول زیر تمام فرمت های ممکن را برای تعیین رنگ المان ها مشخص می کند.
Format | Syntax | Example |
Hex Code | #RRGGBB | p{color:#FF0000;} |
Short Hex Code | #RGB | p{color:#6A7;} |
RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
keyword | aqua, black, etc. | p{color:teal;} |
بک گراند ها در css
در این بخش تنظیم پس زمینه برای المان های مختلف در HTML را خواهیم گفت.
ویژگی های پس زمینه عبارتند از :
background-color برای تنظیم رنگ پس زمینه یک المان استفاده می شود.
background-image برای تنظیم تصویر پس زمینه یک المان استفاده می شود.
Background-repeat برای کنترل تکرار یک تصویر در پس زمینه استفاده می شود.
background-position برای کنترل موقعیت یک تصویر در پس زمینه استفاده می شود.
background-attachment برای کنترل اسکرول یک تصویر در پسزمینه استفاده میشود.
مثال background-color :
This text has a yellow background color.
مثال background-image :
Hello World!
مثال background-repeat :
manataz
لازم به ذکر است background-repeat مقادیر زیر را نیز می گیرد :
- No-repeat : بدون تکرار
- repeat-y : تکرار در محور y
- repeat-x : تکرار در محور x
مثال background-position :
manataz
مثال بالا نحوه تنظیم موقعیت تصویر پس زمینه 100 پیکسل از سمت چپ را نشان می دهد.
manataz
مثال بالا نحوه تنظیم موقعیت تصویر پس زمینه را 100 پیکسل از سمت چپ و 200 پیکسل پایین از بالا نشان می دهد.
مثال Background Attachment :
manataz
ویژگی Background Attachment دو مقدار به شرح زیر می گیرد :
- Fixed : این مقدار تصویر را ثابت نگه داشت و با اسکرول به بالا یا پایین نیز تصویر ثابت است.
- Scroll : این مقدار با حرکت اسکرول به بالا یا پایین باعث تغییر درحرکت تصویر نیز می شود.
فونت ها
در این بخش به ویژگی فونت ها و مقادیر آنها خواهیم پرداخت.
font-family برای تغییر ظاهر یک فونت استفاده می شود.
font-style برای استایل فونت مانند حالت ایتالیک استفاده می شود.
font-variant برای ایجاد افکت حروف کوچک استفاده می شود.
font-weight برای افزایش یا کاهش میزان bold یا light بودن یک فونت استفاده می شود.
font-size برای افزایش یا کاهش اندازه فونت استفاده می شود.
مثال برای font-family :
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
برای ویژگی font-family شما می تواند هر خانواده فونتی را به عنوان مقدار تعریف کنید.
مثال برای Font Style :
This text will be rendered in italic style
مقادیر دیگر برای این ویژگی عبارتند از :
Normal : عادی
Oblique : مایل
مثال برای Font Variant :
This text will be rendered as small caps
مثال برای Font Weight :
This font is bold.
This font is bolder.
This font is 500 weight.
مثال بالا نحوه تنظیم وزن فونت یک المان را نشان می دهد.
ویژگی font-weight این قابلیت را فراهم می کند که مشخص کند یک فونت چقدر تو پر است.
مقادیر ممکن می تواند normal ، bold ، bolder ، lighter و 100، 200، 300، 400، 500، 600، 700، 800، 900 باشد.
مثال برای Font Size :
This font size is 20 pixels
This font size is small
This font size is large
مثال بالا نحوه تنظیم اندازه فونت یک المان را نشان می دهد.
ویژگی font-size برای کنترل اندازه فونت ها استفاده می شود.
مقادیر ممکن می تواند xx-small، x-small، small ، medium ، large ، x-large، xx-large، smaller ، larger یا برابر واحد پیکسل یا درصد باشد.
Text (متن)
در این بخش خواهیم گفت که چگونه متن را با استفاده از ویژگی های CSS سفارشی سازی کنید.
ویژگی های متن عبارتند از :
- از color برای تنظیم رنگ متن استفاده می شود.
- direction برای تنظیم جهت متن استفاده می شود.
- letter-spacing برای اضافه یا کم کردن فاصله بین حروف تشکیل دهنده یک کلمه استفاده می شود.
- word-spacing برای اضافه یا کم کردن فاصله بین کلمات یک جمله استفاده می شود.
- text-indent برای تورفتگی متن یک پاراگراف استفاده می شود.
- text-align برای تراز کردن متن یک داکیومنت استفاده می شود.
- text-decoration برای underline (خط زیر متن) ، overline (خط بالای متن) و strikethrough (خط روی متن) استفاده می شود.
- text-transform برای بزرگ کردن متن یا تبدیل متن به حروف بزرگ یا کوچک استفاده می شود.
- white-space برای کنترل جریان و قالب بندی متن استفاده می شود.
- text-shadow برای تنظیم سایه متن در اطراف متن استفاده می شود.
مثال برای Text Color :
This text will be written in red.
مثال برای Text Direction :
This text will be rendered from right to left
مثال برای Space between Characters :
This text is having space between letters.
مثال بالا نحوه تنظیم فاصله بین کاراکترها را نشان می دهد.
مقادیر ممکن نرمال یا عددی هستند که فضای بین کارکترها را مشخص می کنند.
Space between Words نیز مانند همین مثال تعریف می شود تنها با تفاوت ایجاد فاصله بین کلمات.
مثال Text Indent :
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
مثال بالا نحوه تورفتگی خط اول پاراگراف را نشان می دهد.
مقادیر ممکن % یا عددی است که فضای تورفتگی را مشخص می کند.
مثال Text Alignment :
This will be right aligned.
This will be center aligned.
This will be left aligned.
مثال بالا نحوه تراز کردن یک متن را نشان می دهد. مقادیر ممکن چپ، راست و مرکز هستند.
مثال Decorating the Text :
This will be underlined
This will be striked through.
This will have a over line.
This text will have blinking effect
مثال Text Cases :
This will be capitalized
This will be in uppercase
This will be in lowercase
مثال Space between Text :
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
مثال Text Shadow :
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
تصاویر
رسیدیم به یکی از مهم ترین بخش های موجود در پویا نمایی صفحات وب یعنی تصاویر.
CSS ویژگی های نسبتا خوبی را برای کنترل تصاویر ارائه می دهد که این ویژگی ها عبارتند از :
- border برای تنظیم و ایجاد حاشیه ی تصاویر.
- height برای تنظیم ارتفاع تصویر استفاده می شود.
- width برای تنظیم عرض یک تصویر استفاده می شود.
- opacity برای تنظیم شفافیت یک تصویر استفاده می شود.
مثال برای Border Property :
ویژگی border می تواند شامل مقادیر پیکسل یا درصد باشد.
مثال برای Height Property :
از ویژگی height یک تصویر برای تنظیم ارتفاع یک تصویر استفاده می شود.
این ویژگی می تواند دارای مقدار طول یا درصد باشد.
در حالی که مقدار را به درصد می دهد، آن را در مورد کادری که یک تصویر در آن موجود است اعمال می کند.
(لازم به ذکر است width نیز همانند مثال زیر تعریف می شود.)
مثال opacity Property :
This text will be rendered as small caps
لازم به ذکر است که opacity مقادیری بین صفر تا 1 یا به صورت درصدی اعدادی بین 1 تا 100 را به خود اختصاص می دهد.
لینک ها در css
در این بخش خواهیم گفت که چگونه با استفاده از CSS ویژگی های مختلف یک hyperlink را تنظیم کنید.
شما می توانید ویژگی های زیر را برای یک لینک تنظیم کنید :
- Link : به معنای پیوندهای بازدید نشده است.
- Visited : نشان دهنده لینک های بازدید شده است.
- Hover : نشان دهنده عملکرد برای زمانی است که موس کاربر روی المان خاصی از صفحه ی وب می رود.
- Active : نشان دهنده عنصری است که کاربر در حال حاضر روی آن کلیک می کند.
به خاطر داشته باشید که a:hover باید بعد از a:link و a:visited در تعریف CSS آمده باشد تا کارایی داشته باشد.
برویم سراغ مثال تا بهتر مفاهیم را درک کنیم :
Links :
خروجی :
Visited Links :
خروجی :
Hover :
خروجی :
Active :
خروجی :
(ادامه ی آموزش css و معرفی سایر المان ها و ویژگی های موجود در این زبان در بخش دوم آموزش زبان css گفته خواهد شد.)
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
در زندگی رویاهات را دنبال کن