آموزش زبان css (بخش دوم)
فهرست مطالب
آخرین به روزرسانی در 21/10/2022
در بخش دوم آموزش زبان css قصد داریم به ادامه ی معرفی ویژگی ها و المان های css بپردازیم.
لازم به ذکر است ما در بخش قبل تا لینک ها پیش رفتیم و در این بخش توضیحات آموزشی مربوط به
این زبان را تکمیل خواهیم کرد.
پیشنیاز این دوره ی آموزشی تسلط بر بخش اول آموزش زبان css می باشد.
جداول در css
در این بخش خواهیم گفت که چگونه ویژگی های مختلف جدول HTML را با استفاده از CSS تنظیم کنید.
شما می توانید ویژگی های زیر را برای یک جدول تعریف کنید :
border-collapse : مشخص می کند که آیا مرورگر باید ظاهر border های مجاور را که یکدیگر را قطع می کنند کنترل کند یا اینکه هر ردیف
باید سبک خود را حفظ کند.
border-spacing :عرضی را که باید بین سلول های جدول ظاهر شود مشخص می کند.
caption-side : به طور پیش فرض، این موارد در بالای جدول در بخش داکیومنت ارائه می شوند.
شما از ویژگی caption-side برای کنترل قرارگیری عنوان جدول استفاده می کنید.
empty-cells : مشخص میکنند که در صورت خالی بودن یک سلول، border باید نشان داده شود یا خیر.
table-layout : به مرورگرها اجازه می دهد تا با استفاده از اولین ویژگی های عرضی که برای بقیه ستون مشاهده می شود، به جای بارگذاری کل جدول قبل از رندر کردن، سرعت طرح بندی جدول را افزایش دهند.
حال در ادامه با مثال و نمایش خروجی نحوه استفاده از این ویژگی ها را خواهیم دید.
border-collapse :
این ویژگی می تواند دو مقدار جمع و جدا داشته باشد.
مثال زیر از هر دو مقدار ، استفاده می کند.
Collapse Border Example
Cell A Collapse Example
Cell B Collapse Example
Separate Border Example
Cell A Separate Example
Cell B Separate Example
خروجی :
Collapse Border Example |
Cell A Collapse Example |
Cell B Collapse Example |
Separate Border Example |
Cell A Separate Example |
Cell B Separate Example |
border-spacing :
ویژگی border-spacing فاصله ای را که سلول های مجاور را از هم جدا می کند مشخص می کند.
border ها ، می توانند یک یا دو مقدار را بگیرد. اینها باید واحدهای طولی باشند.
اگر یک مقدار ارائه کنید، هم برای مرزهای عمودی و هم برای افقی اعمال می شود.
یا می توانید دو مقدار را مشخص کنید که در این صورت، اولی به فاصله افقی و دومی به فاصله عمودی اشاره دارد.
Separate Border Example with border-spacing
Cell A Collapse Example
Cell B Collapse Example
Separate Border Example with border-spacing
Cell A Separate Example
Cell B Separate Example
خروجی :
Separate Border Example with border-spacing |
Cell A Collapse Example |
Cell B Collapse Example |
Separate Border Example with border-spacing |
Cell A Separate Example |
Cell B Separate Example |
caption-side :
این ویژگی می تواند یکی از چهار مقدار بالا، پایین، چپ یا راست را داشته باشد.
مثال زیر از هر چهار مقدار استفاده می کند.
This caption will appear at the top
Cell A
Cell B
This caption will appear at the bottom
Cell A
Cell B
This caption will appear at the left
Cell A
Cell B
This caption will appear at the right
Cell A
Cell B
خروجی :
This caption will appear at the top |
Cell A |
Cell B |
This caption will appear at the bottom |
Cell A |
Cell B |
This caption will appear at the left |
Cell A |
Cell B |
This caption will appear at the right |
Cell A |
Cell B |
empty-cells :
این ویژگی می تواند یکی از سه مقدار را داشته باشد – show، hide یا inherit.
در اینجا ویژگی سلولهای خالی است که برای پنهان کردن border های سلولهای خالی در المان <table> استفاده می شود.
Title one
Title two
Row Title
value
value
Row Title
value
خروجی :
Title one | Title two | |
Row Title | value | value |
Row Title | value |
table-layout :
ویژگی table-layout قرار است به شما کمک کند تا نحوه نمایش یا چیدمان جدول را مرورگر کنترل کنید.
این ویژگی می تواند یکی از سه مقدار fixed ، auto یا inherit را داشته باشد.
مثال زیر تفاوت بین این ویژگی ها را نشان می دهد.
1000000000000000000000000000
10000000
100
1000000000000000000000000000
10000000
100
خروجی :
10000000000000000 | 10000000 | 100 |
100000000000 | 10000000 | 100 |
Border ها
ویژگی های border به شما امکان می دهد تعیین کنید که مرز کادری که یک المان را نشان می دهد چگونه به نظر برسد.
سه ویژگی از یک border وجود دارد که می توانید آنها را تغییر دهید که به شرح زیر می باشد :
border-color رنگ یک border را مشخص می کند.
border-style مشخص میکند که یک border باید solid (یکدست)، dashed (خط چین)، double line (دو خط) یا یکی از مقادیر ممکن دیگر باشد.
border-width عرض یک حاشیه را مشخص می کند.
حال نحوه استفاده از این ویژگی ها را با مثال هایی خواهیم گفت.
border-color :
در این ویژگی شما می توانید به صورت جداگانه رنگ قسمت های پایین، چپ، بالا و راست حاشیه یک المان را تغییر دهید.
border-bottom-color : رنگ حاشیه پایین را تغییر می دهد.
border-top-color : رنگ حاشیه بالایی را تغییر می دهد.
border-left-color : رنگ حاشیه سمت چپ را تغییر می دهد.
border-right-color : رنگ حاشیه سمت راست را تغییر می دهد.
مثال :
This example is showing all borders in different colors.
This example is showing all borders in green color only.
خروجی :
This example is showing all borders in different colors.
This example is showing all borders in green color only.
border-style :
ویژگی border-style به شما امکان انتخاب یکی از سبک های زیر را می دهد :
none : بدون مرز
جامد – مرز یک خط توپر است.
Dotted : Border مجموعهای از نقاط است.
dashed : Border مجموعه ای از خطوط کوتاه است.
double : مرز دو خط ثابت است.
groove : یک حاشیه برجسته.
ridge : حالت شیاردار به نظرمی رسد.
inset : به نظر می رسد کادر در صفحه جاسازی شده است.
outset : حاشیه ی دور حال برآمدگی را برای المان رقم می زند.
hidden : مخفی
شما می توانید به صورت جداگانه سبک حاشیه های پایین، چپ، بالا و راست یک المان را با استفاده از ویژگی های زیر تغییر دهید :
- border-bottom-style
- border-top-style
- border-left-style
- border-right-style
مثال :
This is a border with none width.
This is a solid border.
This is a dashed border.
This is a double border.
This is a groove border.
This is a ridge border.
This is a inset border.
This is a outset border.
This is a hidden border.
This is a a border with four different styles.
خروجی :
This is a border with none width.
This is a solid border.
This is a dashed border.
This is a double border.
This is a groove border.
This is a ridge border.
This is a inset border.
This is a outset border.
This is a hidden border.
This is a a border with four different styles.
Margin ها در css
ویژگی margin فضای اطراف یک المان HTML را تعریف می کند.
برای این ویژگی امکان استفاده از مقادیر منفی نیز وجود دارد.
مقادیر ویژگی margin توسط المان ها فرزند به ارث نمی رسد.
در واقع اگر واضح تر بخواهیم توضیح بدهیم margin میزان فضای باز اطراف یک المان را تعریف می کند.
ویژگی هایی که می توان برای margin تعریف کرد عبارتند از :
margin-bottom حاشیه پایین یک المان را مشخص می کند.
margin-top حاشیه بالایی یک المان را مشخص می کند.
margin-left حاشیه سمت چپ یک المان را مشخص می کند.
margin-right حاشیه سمت راست یک المان را مشخص می کند.
در مثال پایین نحوه ی ایجاد حاشیه را در چهار جهت و با مقادیر دلخواه شرح داده ایم.
all four margins will be 15px
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
خروجی :
all four margins will be 15px
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser
مثال برای margin-top :
(لازم به ذکر است سایر جهات (left-right و buttom) نیز مشابه با همین مثال است ، به همین علت از پرداختن به مسائل ابتدایی پرهیز خواهیم کرد.)
This is a paragraph with a specified top margin
This is another paragraph with a specified top margin in percent
خروجی :
This is a paragraph with a specified top margin
This is another paragraph with a specified top margin in percent
Padding ها
بسیاری از افراد مفهوم و ویژگی Padding را با ویژگی margin اشتباه می گیرند.
از آنجایی که هر دوی این ویژگی ها مفهوم فاصله را دارد بسیار اشتباه گرفته می شود.
اما این دو یک تفاوت بسیار بزرگ دارند.
در margin حاشیه فاصله بین المان اولیه با سایر المان ها مورد بررسی قرار می گیرد به عنوان مثال
شما تعریف می کنید المان تصویر از المان متن 10 پیکسل به جهت مورد نظر فاصله بگیرد و فاصله نسبت
به عناصر اطراف مشخص می شود.
اما در padding فاصله نسبت به محتوای خود المان مشخص می شود و شما زمانیکه فاصله ای را در جهت دلخواه
تعیین می کنید آن فاصله نسبت به خود المان مورد نظر تعیین می شود نه نسبت به سایر المان ها.
مقدار این ویژگی باید طول یا درصد یا کلمه inherit باشد.
ویژگی های آن عبارتند از :
- padding-bottom
- padding-top
- padding-left padding
- padding-right padding
برای ویژگی های بالا دو مثال می زنیم و برای سایر ویژگی ها مثال های زده شده مفهوم را رسانده است.
مثال برای padding-bottom :
This is a paragraph with a specified bottom padding
This is another paragraph with a specified bottom padding in percent
خروجی :
This is a paragraph with a specified bottom padding
This is another paragraph with a specified bottom padding in percent
مثال برای padding-top :
This is a paragraph with a specified top padding
This is another paragraph with a specified top padding in percent
خروجی :
This is a paragraph with a specified top padding
This is another paragraph with a specified top padding in percent
اندازه ها در css
در این بخش قصد داریم به بررسی ابعاد بپردازیم.
این ابعاد در قالب عرض و ارتفاع تعریف می شوند و ما تمامی ویژگی هایی را که برای عرض و ارتفاع المان ها تعریف می شوند را شرح خواهیم داد.
ویژگی های زیر به شما امکان می دهد ابعاد یک باکس را کنترل کنید.
از ویژگی height برای تنظیم ارتفاع یک باکس استفاده می شود.
از ویژگی width برای تنظیم عرض یک باکس استفاده می شود.
ویژگی line-height برای تنظیم ارتفاع یک خط متن استفاده می شود.
ویژگی max-height برای تعیین حداکثر ارتفاعی که یک باکس می تواند باشد استفاده می شود.
ویژگی min-height برای تنظیم حداقل ارتفاعی که یک باکس می تواند باشد استفاده می شود.
ویژگی max-width برای تنظیم حداکثر عرضی که یک باکس می تواند باشد استفاده می شود.
ویژگی min-width برای تنظیم حداقل عرضی که یک باکس می تواند باشد استفاده می شود.
مثال برای Height و Width :
This paragraph is 400pixels wide and 100 pixels high
خروجی :
This paragraph is 400pixels wide and 100 pixels high
مثال برای line-height :
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
خروجی :
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels. This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
مثال برای max-height :
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
خروجی :
This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px
مثال برای min-height :
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
خروجی :
This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px
(از مثال های زده شده سایر ویژگی های باقی مانده نیز قابل درک است.)
Positioning
CSS به شما امکان این را می دهد تا المان HTML مورد نظر خود را در پوزیشن یا جایگاه دلخواه خود قرار دهید.
شما میتوانید تعیین کنید که آیا میخواهید المان نسبت به موقعیت طبیعی خود در صفحه قرار گیرد یا بر اساس المان های دیگر.
اکنون، تمام ویژگی های مربوط به موقعیت یابی CSS را با مثال هایی مشاهده خواهیم کرد.
Relative:Position
موقعیت المان HTML را نسبت به جایی که معمولاً ظاهر می شود تغییر می دهد.
در واقع موقعیت المان در این حالت یک وضعیت شناور و واکنش پذیری را دارد.
بنابراین left:20″ ” 20پیکسل به موقعیت LEFT عنصر اضافه می کند.
می توانید از دو مقدار بالا و چپ به همراه ویژگی position برای انتقال یک عنصر HTML در هر نقطه از داکیومنت HTML استفاده کنید.
Move Left : از یک مقدار منفی برای سمت چپ استفاده کنید.
Move Right : از یک مقدار مثبت برای سمت چپ استفاده کنید.
Move Up : از یک مقدار منفی برای بالا استفاده کنید.
Move Down : از یک مقدار مثبت برای بالا استفاده کنید.
لازم به ذکر است می توانید از مقادیر پایین یا راست نیز مانند بالا و چپ استفاده کنید.
مثال :
This div has relative positioning.
خروجی :
Absolute : Position
در این حالت المان نسبت به گوشه بالا و سمت چپ صفحه شما قرار می گیرد.
می توانید از دو مقدار بالا و چپ به همراه ویژگی position برای انتقال یک عنصر HTML در هر نقطه صفحه استفاده کنید.
Move Left : از یک مقدار منفی برای سمت چپ استفاده کنید.
Move Right : از یک مقدار مثبت برای سمت چپ استفاده کنید.
Move Down : از یک مقدار منفی برای بالا استفاده کنید.
Move Up : از یک مقدار مثبت برای بالا استفاده کنید.
می توانید از مقادیر پایین یا راست نیز مانند بالا و چپ استفاده کنید.
مثال :
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
خروجی :
fixed : Position
پوزیشن fixed (ثابت) به شما امکان می دهد بدون توجه به اسکرول کردن، موقعیت یک عنصر را در یک نقطه خاص در صفحه ثابت کنید.
مختصات مشخص شده نسبت به پنجره مرورگر خواهد بود.
می توانید از دو مقدار بالا و چپ به همراه ویژگی position برای انتقال یک عنصر HTML در هر نقطه صفحه استفاده کنید.
Move Left : از یک مقدار منفی برای سمت چپ استفاده کنید.
Move Right : از یک مقدار مثبت برای سمت چپ استفاده کنید.
Move Down : از یک مقدار منفی برای بالا استفاده کنید.
Move Up : از یک مقدار مثبت برای بالا استفاده کنید.
می توانید از مقادیر پایین یا راست نیز مانند بالا و چپ استفاده کنید.
مثال :
This div has fixed positioning.
خروجی :
به علت در هم ریختن قالب صفحه خروجی قابل نمایش نیست.
لازم به ذکر است طبق توضیحات داده شده نوشته و بک گراند به صورت ثابت در صفحه قرار گرفته و با اسکرول صفحه نیز نیز دیده می شود.
Pseudo Elements
ما در بخش اول آموزش css به شبه کلاس هایی مانند hover و visit پرداختیم اما در این بخش قصد داریم به شبه المان ها بپردازیم.
Pseudo Elements (شبه المان ها) برای افزودن جلوه های ویژه به برخی از انتخابگرها استفاده می شود.
برای استفاده از این افکت ها نیازی به استفاده از جاوا اسکریپت یا هر اسکریپت دیگری ندارید.
یک مثال ساده از این شبه عنصر ها به شرح زیر می باشد :
selector:pseudo-element {property: value}
رایج ترین Pseudo Elements به شرح زیر می باشد :
first-line :
از این المان برای اضافه کردن استایل های خاص به خط اول متن در یک انتخابگر استفاده کنید.
first-letter :
از این المان برای اضافه کردن استایل خاص به حرف اول متن در یک انتخابگر استفاده کنید.
before :
از این المان برای درج مقداری محتوا قبل از یک المان استفاده کنید.
after :
از این المان برای درج محتوایی بعد از یک المان استفاده کنید.
مثال برای first-line :
This line would not have any underline because this belongs to nline class.
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
خروجی :
بر زیر متون خط کشیده می شود و به علت بهم ریختن قالب صفجه قابل نمایش نیست.
مثال برای :first-letter :
First character of this paragraph will be normal and will have font size 10 px;
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
خروجی :
حرف اول با حروف بزرگ نمایش داده می شود .
مثال برای before :
This line will be preceded by a bullet.
This line will be preceded by a bullet.
This line will be preceded by a bullet.
خروجی :
This line will be preceded by a bullet.
This line will be preceded by a bullet.
This line will be preceded by a bullet.
مثال برای after :
This line will be succeeded by a bullet.
This line will be succeeded by a bullet.
This line will be succeeded by a bullet.
خروجی :
This line will be succeeded by a bullet.
This line will be succeeded by a bullet.
This line will be succeeded by a bullet.
افکت های تصاویر و متون
شما میتوانید از فیلترهای CSS برای افزودن جلوههای ویژه به متن، تصاویر و سایر مباحث گرافیکی یک صفحه وب استفاده کنید.
(لازم به ذکر است که برخی از این فیلترها در تمامی مرورگرها پشتیبانی نمی شوند.)
Alpha Channel
یک فیلتر رنگ بندی که میزان شفافیت المان و میزان ترکیب شدن آن با بک گراند را تعریف می کند.
ویژگی های آن عبارتند از :
opacity
میزان شفافیت بین 0 تا 100
style
شکل ترکیب شدن گرادینت
0 = uniform
1 = linear
2 = radial
3 = rectangular
startX
مختصات X برای شروع گرادینت
startY
مختصات y برای شروع گرادینت
finishX
مختصات x برای شیب گرادینت تا پایان
finishY
مختصات y برای شیب گرادینت تا پایان
مثال :
Image Example:
Text Example:
CSS Tutorials
خروجی :
Image Example:
Text Example:
Chroma Filter
فیلتر کروما برای شفاف کردن هر رنگ خاصی استفاده می شود و معمولاً از آن برای تصاویر استفاده میکنیم.
می توانید از آن برای اسکرول نیز استفاده کنید.
پارامتر زیر را می توان در این فیلتر استفاده کرد :
color
رنگی که قصد ایجاد افکت روی آن را دارید.
مثال :
Image Example:
Text Example:
CSS Tutorials
خروجی :
Image Example:
Text Example:
(لازم به ذکر است به علت سیاه بودن بک گراند صفحه برخی افکت ها مشخص نیست)
Drop Shadow Effect
Drop Shadow برای ایجاد سایه ای از شی شما در افست و رنگ مشخص شده در جهات X (افقی) و Y (عمودی) استفاده می شود.
پارامترهای زیر را می توان در این فیلتر استفاده کرد :
Color :
انتخاب رنگ
offX :
موقعیت افست در جهت x
offY :
موقعیت افست در جهت y
Positive :
اگر مقدار آن true باشد، تمام پیکسلهای مات شی دارای یک dropshadow هستند.
اگر false باشد، همه پیکسلهای شفاف دارای یک dropshadow هستند.(حالت پیش فرض درست است)
مثال :
Image Example:
Text Example:
CSS Tutorials
خروجی :
Image Example:
Text Example:
Glow Effect
افکت Glow برای ایجاد درخشش در اطراف جسم استفاده می شود.
اگر یک تصویر شفاف باشد، درخشش در اطراف پیکسل های مات آن ایجاد می شود.
پارامترهای زیر را می توان در این فیلتر استفاده کرد :
Color :
رنگ افکت
Strength :
شدت درخشش (از 1 تا 255).
مثال :
Image Example:
Text Example:
CSS Tutorials
خروجی :
Image Example:
Text Example:
(لازم به ذکر است به علت سیاه بودن بک گراند صفحه برخی افکت ها مشخص نیست)
Invert Effect :
از افکت Invert برای نگاشت رنگ های شی به مقادیر مخالف آنها در طیف رنگ استفاده می شود، در واقع برای ایجاد یک تصویر کاملا مخالف از لحاظ رنگ بندی.
پارامتر زیر در این فیلتر استفاده می شود.
Invert :
رنگ های جسم را به مقدار مخالف آنها در طیف رنگی نگاشت می کند.
مثال :
Image Example:
Text Example:
CSS Tutorials
خروجی :
Image Example:
Text Example:
Shadow Filter
از فیلتر Shadow برای ایجاد یک سایه ضعیف در جهت و رنگ مشخص شده استفاده می شود.
این فیلتری است که بین Dropshadow و Glow قرار دارد. پارامترهای زیر را می توان در این فیلتر استفاده کرد :
Color :
رنگ سایه
Direction :
جهت سایه (مقدار پیش فرض 270 است)
0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left |
مثال :
Image Example:
Text Example:
CSS Tutorials
خروجی :
Image Example:
Text Example:
(لازم به ذکر است به علت سیاه بودن بک گراند صفحه برخی افکت ها مشخص نیست)
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد