داکیومنت های CSS | لیست کامل ویژگی های زبان برنامه نویسی CSS ! آموزش CSS

وقتی صحبت از طراحی وب سایت به میان می آید، اولین سوال این است که html و  css چیست ؟ با کمک css چه کارهایی می توان انجام داد؟ کاربرد و ویژگی های css چیست؟ صفحات HTML به تنهایی زیبایی خاصی ندارند اما با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد می‌توانید صفحه وب پویایی را ایجاد کنید و فرمت صفحه را تغییر دهید. یکی از این زبان‌ها css می‌باشد که می‌تواند جلوه‌های زیبایی به سایت شما دهد. در ادامه میخوایم به آموزش داکیومنت های CSS و عناصر این زبان برنامه نویسی بپردازیم . پس با سید علی ابراهیمی همراه باشید !

css چیست؟

در ابتدا باید بدانید که Css مخفف چیست؟  سی اس اس مخفف Cascading Style Sheet (CSS) است. زبان css یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.

هدف و کاربرد css چیست ؟

هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

برخی از کاربردهای CSS عبارتند از:

• تعیین ارتفاع و عرض
• طراحی سایت رسپانسیو صفحات
• انتخاب پس زمینه
• انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس و…
• تعیین چیدمان نوشته ها (چپ چین، راست چین و…)
• مشخص کردن میزان فاصله ی عناصر از همدیگر
• تغییر در نوع نوشتاری (فونت، رنگ و…)

لیست کامل داکیومنت های CSS

شما دوستان عزیز و محترم در ادامه میتوانید لیست کامل ویژگی های css را به همراه توضیح و مثال آنلاین و بصورت دسته بندی شده مشاهده نمایید.

ویژگی های CSS مربوط به انیمیشن Animation

• animation برای خلاصه نویسی ۸ ویژگی زیر
• animation-delay چقد باید طول بکشه تا انیمیشن شروع بشه
• animation-direction برای مشخص کردن جهت اجرای انیمیشن
• animation-duration برای مشخص کردن مدت زمان اجرای انیمیشن
• animation-fill-mode حذف استایل تگ در هنگام تموم شدن انیمیشن
• animation-iteration-count تعداد دفعات اجرای انیمیشن
• animation-name یک نام برای انیمیشن که باید به keyframes وصل شود
• animation-play-state مشخص میکند که انیمیشن اجرا شود یا مکث شود
• animation-timing-function یک منحنی / تابع زمانی برای نحوه اجرای انیمیشن
• keyframes@ قوانین ( مراحل چگونگی ) اجرا شدن انیمیشن

ویژگی های CSS مربوط به پس زمینه Background

• background برای خلاصه نویسی ۸ ویژگی زیر
• background-attachment برای مشخص کردن نحوه ضمیمه شدن تصویر زمینه
• background-size اندازه / سایز تصویر زمینه را مشخص میکند
• background-clip میزان پخش شدن ( رنگ یا تصویر زمینه ) را مشخص میکند
• background-color رنگ زمینه را مشخص میکند
• background-image تصویر زمینه را مشخص میکند
• background-origin نقطه شروع شدن تصویر یا رنگ زمینه را مشخص میکند
• background-position موقعیت قرار گیری تصویر زمینه را مشخص میکند
• background-repeat نحوه تکرار شدن تصویر زمینه را مشخص میکند
• background-blend-mode برای ترکیب رنگ زمینه با تصویر زمینه

داکیومنت های CSS مربوط به Border

• border برای خلاصه نویسی ۳ ویژگی زیر
• border-color رنگ بوردر ( خط دور لبه ) تگ را مشخص میکند
• border-style شکل شمایل بوردر ( خط دور لبه ) تگ را مشخص میکند
• border-width اندازه بوردر ( خط دور لبه ) تگ را مشخص میکند
• border-bottom برای خلاصه نویسی ۳ ویژگی زیر
• border-bottom-color رنگ بوردر پایین ( خط دور لبه ) تگ را مشخص میکند
• border-bottom-style شکل شمایل بوردر پایین ( خط دور لبه ) تگ را مشخص میکند
• border-bottom-width اندازه بوردر پایین ( خط دور لبه ) تگ را مشخص میکند
• border-top برای خلاصه نویسی ۳ ویژگی زیر
• border-top-color رنگ بوردر بالا ( خط دور لبه ) تگ را مشخص میکند
• border-top-style شکل شمایل بوردر بالا ( خط دور لبه ) تگ را مشخص میکند
• border-top-width اندازه بوردر بالا ( خط دور لبه ) تگ را مشخص میکند
• border-right برای خلاصه نویسی ۳ ویژگی زیر
• border-right-color رنگ بوردر راست ( خط دور لبه ) تگ را مشخص میکند
• border-right-style شکل شمایل بوردر راست ( خط دور لبه ) تگ را مشخص میکند
• border-right-width اندازه بوردر راست ( خط دور لبه ) تگ را مشخص میکند
• border-left برای خلاصه نویسی ۳ ویژگی زیر
• border-left-color رنگ بوردر چپ ( خط دور لبه ) تگ را مشخص میکند
• border-left-style شکل شمایل بوردر چپ ( خط دور لبه ) تگ را مشخص میکند
• border-left-width اندازه بوردر چپ ( خط دور لبه ) تگ را مشخص میکند
• border-image برای خلاصه نویسی ۵ ویژگی زیر
• border-image-outset میزان فضای خالی بین تصویر دور لبه و محتوای داخل تگ
• border-image-repeat چگونگی تکرار شدن تصویر دور لبه تگ را مشخص میکند
• border-image-slice نحوه بُرش خوردن تصویر دور لبه تگ را مشخص میکند
• border-image-source مسیر / آدرس تصویر دور لبه تگ را مشخص میکند
• border-image-width اندازه تصویر دور لبه تگ را مشخص میکند
• border-radius برای خلاصه نویسی ۴ ویژگی زیر
• border-top-left-radius برای گرد کردن لبه بالا سمت چپ
• border-top-right-radius برای گرد کردن لبه بالا سمت راست
• border-bottom-left-radius برای گرد کردن لبه پایین سمت چپ
• border-bottom-right-radius برای گرد کردن لبه پایین سمت راست

عناصر CSS مربوط به جدول ها Table

• border-collapse باعث میشه فقط یک خط به دور لبه جدول و سلول های جدول کشیده شود
• border-spacing میزان فاصله بین سلول های جدول
• caption-side جهت ( یا سمت ) قرار گیری کپشن جدول را مشخص میکند
• empty-cells نحوه نمایش سلول های خالی را مشخص میکند
• table-layout چگونگی نمایش ستون ، سطرهای جدول را مشخص میکند

داکیومنت های CSS مربوط به موقعیت دهی عناصر Position ها

• position موقعیت تگ را مشخص میکند
• top موقعیت قرار گیری تگ از سمت بالا
• bottom موقعیت قرار گیری تگ از سمت پایین
• left موقعیت قرار گیری تگ از سمت چپ
• right موقعیت قرار گیری تگ از سمت راست
• float برای شناور کردن تگ در سمت راست یا چپ
• clear مشخص میکند که در کدام سمت ، شناور شدن تگ ها مجاز نیست

عناصر CSS مربوط به فونت ها و متن ها Font / Text

• font برای برای تعریف نام فامیلی ، اندازه و.. فونت
• font-face@ برای تعریف فونت دلخواه در یک صفحه وب
• font-family برای تعریف نام فامیلی فونت
• font-feature-settings اعمال یکسری تنظیمات پیشرفته بروی فونت
• font-kerning میزان فضا ( فاصله ) بین کاراکترهای فونت
• font-size اندازه فونت را مشخص میکند
• font-size-adjust میزان خوانایی ( مقیاس ) فونت را مشخص میکند
• font-stretch میزان پهنی و لاغری کاراکترهای فونت را مشخص میکند
• font-style استایل / سبک فونت را مشخص میکند
• font-variant مشخص میکند که متن با حروف بزرگ نمایش داده شود
• font-variant-caps مشخص میکند که متن با حروف بزرگ نمایش داده شود
• font-weight برای مشخص کردن میزان وزن یک فونت
• letter-spacing برای ایجاد فاصله بین حروف / کاراکترهای متن
• line-height برای ایجاد فاصله بین سطر های متن
• quotes استایل نقل قول های جاسازی شده در متن را مشخص میکند
• tab-size میزان اندازه کلید Tab ( به ازای کلید Tab که فشرده شود )
• text-align تراز متن را بصورت افقی مشخص میکند
• text-align-last تراز سطر آخر متن را بصورت افقی مشخص میکند
• text-decoration برای خلاصه نویسی ۳ ویژگی زیر
• text-decoration-color رنگ خط ( دکوراسیون ) متن را مشخص میکند
• text-decoration-line نوع خط ( دکوراسیون ) متن را مشخص میکند
• text-decoration-style استایل خط ( دکوراسیون ) متن را مشخص میکند
• text-decoration-thickness اندازه خط ( دکوراسیون ) متن را مشخص میکند
• text-indent میزان تورفتگی سطر اول یک متن را مشخص میکند
• text-justify نحوه justify شدن متن را در هنگام استفاده از justify مشخص میکند
• text-overflow چگونگی سرریز شدن متن را مشخص میکند
• text-shadow برای ایجاد سایه برای متن
• text-transform برای تبدیل کردن حروف کوچک به بزرگ متن و یا برعکس
• white-space برای کنترل فضای خالی موجود در متن
• word-break نحوه شکسته شدن کلمات طولانی به سطر بعدی
• word-spacing فاصله بین کلمات متن را مشخص میکند
• word-wrap نحوه شکسته شدن کلمات طولانی به سطر بعدی
• writing-mode برای نوشتن متن در حالت عمودی

داکیومنت CSS مربوط به ستون بندی Column

• columns برای خلاصه نویسی ۲ ویژگی زیر
• column-count تعداد ستون های متن را مشخص میکند
• column-width اندازه ستون های متن را مشخص میکند
• column-gap ایجاد یک فضای خالی بین ستون های متن
• column-rule برای خلاصه نویسی ۳ ویژگی زیر
• column-rule-color رنگ خط بین ستون های متن را مشخص میکند
• column-rule-style شکل شمایل خط بین ستون های متن را مشخص میکند
• column-rule-width اندازه خط بین ستون های متن را مشخص میکند
• column-span برای جلوگیری از ستونی شدن یک عنصر
• column-fill نحوه فیت ( تکمیل یا پُر ) شدن ستون ها را مشخص میکند

عناصر CSS مربوط به فلکس Flex

• flex برای خلاصه نویسی ۳ ویژگی زیر
• flex-basis اندازه طول اولیه / پایه یک آیتم از فلکس
• flex-grow میزان بزرگ شدن یه آیتم فلکس به نسبت دیگر آیتم ها
• flex-shrink میزان کوچک شدن یه آیتم فلکس به نسبت دیگر آیتم ها
• flex-flow برای خلاصه نویسی ۲ ویژگی زیر
• flex-direction جهت قرار گیری آیتم های فلکس را مشخص میکند
• flex-wrap نحوه شکسته شدن آیتم های فلکس را به سطر بعدی مشخص میکند
• justify-content برای تراز افقی آیتم های فلکس
• align-content برای تراز عمودی سطرهایی از آیتم های فلکس
• align-items برای تراز عمودی آیتم های فلکس
• align-self برای تراز یک آیتم خاص در ظرف فلکس
• order برای سفارشی سازی ترتیب قرارگیری آیتم های فلکس

داکیومنت CSS مربوط به گرید Grid

• grid برای خلاصه نویسی ۶ ویژگی زیر
• grid-template-rows تعداد و اندازه سطرهای گرید را مشخص میکند
• grid-template-columns تعداد و اندازه ستون های گرید را مشخص میکند
• grid-template-areas نمایش آیتم های گرید از طریق نام ( که با استفاده از grid-area مشخص میشود )
• grid-auto-rows اندازه سطرهای گرید را مشخص میکند
• grid-auto-columns اندازه ستون های گرید را مشخص میکند
• grid-auto-flow ترتیب قرار گیری آیتم ها را مشخص میکند( مثلا سطر به سطر یا ستون به ستون )
• grid-area میتوان یک نام را برای آیتم مشخص کرد
• grid-row برای خلاصه نویسی ۲ ویژگی زیر
• grid-row-start سطر شروع کننده نمایش آیتم را مشخص میکند
• grid-row-end سطر پایان دهنده نمایش آیتم را مشخص میکند
• grid-gap برای خلاصه نویسی ۲ ویژگی زیر
• grid-column-gap میزان فضای خالی بین ستون های گرید
• grid-row-gap میزان فضای خالی بین سطرهای گرید
• grid-column برای خلاصه نویسی ۲ ویژگی زیر
• grid-column-start ستون شروع کننده نمایش آیتم را مشخص میکند
• grid-column-end ستون پایان دهنده نماش آیتم را مشخص میکند

عناصر CSS مربوط به اندازه دهی عناصر

• width اندازه عرض یک تگ را مشخص میکند
• height اندازه ارتفاع یک تگ را مشخص میکند
• max-width حداکثر اندازه عرض تگ را مشخص میکند
• max-height حداکثر اندازه ارتفاع تگ را مشخص میکند
• min-height کمترین / حداقل اندازه ارتفاع تگ را مشخص میکند

داکیومنت CSS مربوط به Transform ها و Transition

• transition برای خلاصه نویسی ۴ ویژگی زیر
• transition-delay مدت زمانی که باید طول بکشد تا عمل انتقال شروع شود
• transition-duration مدت زمانی که باید طول بکشد تا عمل انتقال به پایان برسد
• transition-property اون ویژگی که باید تحت تاثیر عمل انتقال قرار بگیرد را مشخص میکند
• transition-timing-function یک منحنی زمانی برای چگونگی اجرا شدن عمل انتقال
• transform برای ایجاد حالت های ۲بعدی یا ۳بعدی بروی تگ ها
• transform-origin موقعیت قرار گیری حالت های بعدی یا ۳بعدی را مشخص میکند
• transform-style مشخص میکند که آیا عناصر فرزند در حالت ۲بعدی یا ۳بعدی قرار بگیرند یا خیر

عناصر CSS مربوط به لیست ها List ها

• list-style برای خلاصه نویسی ۳ ویژگی زیر
• list-style-image یک تصویر را برای علامت گذاری آیتم های لیست مشخص میکند
• list-style-position موقعیت قرارگیری علامت گذاری آیتم های لیست را مشخص میکند
• list-style-type نوع ( حالت / شکل ) علامت گذاری آیتم های لیست را مشخص میکند

داکیومنت های CSS مربوط به Margin

• margin برای خلاصه نویسی ۴ ویژگی زیر
• margin-top ایجاد یک فضای خالی از سمت بالا
• margin-right ایجاد یک فضای خالی از سمت راست
• margin-bottom ایجاد یک فضای خالی از سمت پایین
• margin-left ایجاد یک فضای خالی از سمت چپ

عناصر CSS مربوط به Padding

• padding برای خلاصه نویسی ۴ ویژگی زیر
• padding-top ایجاد یک فضای خالی بین دیواره تگ و محتوا از سمت بالا
• padding-right ایجاد یک فضای خالی بین دیواره تگ و محتوا از سمت راست
• padding-bottom ایجاد یک فضای خالی بین دیواره تگ و محتوا از سمت پایین
• padding-left ایجاد یک فضای خالی بین دیواره تگ و محتوا از سمت چپ

سایر عناصر مهم CSS

• all برای ریست کردن استایل یک عنصر
• backface-visibility مشخص میکند که آیا قسمت پشتی یک عنصر قابل مشاهده باشد یا خیر
• box-decoration-break نحوه نمایش زمینه ها در تگ های درون خطی در هنگام شکسته شدن به سطرهای بعدی را مشخص میکند
• box-shadow ایجاد سایه برای تگ
• box-sizing مشخص میکند که آیا اندازه عرض و ارتفاع یک عنصر باید شامل اندازه های Padding و Border باشد یا خیر
• break-after شکسته شدن صفحه را بعد از یک تگ خاص مشخص میکند
• break-inside شکسته شدن صفحه را داخل یک تگ خاص مشخص میکند
• break-before شکسته شدن صفحه را قبل از یک تگ خاص مشخص میکند
• caret-color رنگ اشاره گر ماوس را مشخص میکند
• charset@ نحوه کد گذاری کاراکترهای مورد استفاده در یک فایل CSS
• clip برای بُرش زدن عناصر ( منسوخ شده )
• clip-path برای بُرش زدن عناصر ( از این استفاده کنید )
• color برای مشخص کردن رنگ متن تگ
• content برای قرار دادن محتوا در قبل یا بعد از یک تگ به کمک شبه کلاس های after:: و before::
• counter-increment برای اضافه کردن یک یا چندین واحد به شمارنده ها
• counter-reset برای ایجاد یا ریست کردن شمارنده ها
• cursor برای مشخص کردن استایل / شکل شمایل اشاره گر ماوس
• direction برای مشخص کردن جهت ( راست چین یا چپ چین ) بودن صفحه
• display برای مشخص کردن حالت نمایش یک عنصر ( مثلا یک عنصر بلاکی ( Block ) باشه یا درون سطری ( Inline )
• filter برای ایجاد فیلترهای رنگی ( معمولا بروی تصاویر )

داکیومنت های مهم CSS

• hanging-punctuation مشخص میکند که علائم نگارشی موجود در یک متن در خارج از باکس متن قرار بگیرند یا خیر
• hyphens برای ایجاد خط پیوند ( – ) به کلماتی که شکسته میشوند
• import@ برای وارد کردن ( Import ) فایل های CSS
• media@ برای مشخص کردن نوع رسانه ( مثلا صفحه نمایش کامپیوتر یا موبایل ) برای واکنش گرایی صفحات وب
• isolation میتوان از مخلوط شدن عناصر با زمینه ها ( رنگ زمینه ) جلوگیری کرد
• mix-blend-mode نحوه مخلوط شدن محتوای یک عنصر با عنصر پدرش را مشخص میکند
• object-fit نحوه قرارگیری محتویات یک عنصر جایگزین شده را مشخص میکند
• object-position موقعیت قرارگیری محتویات یک عنصر جایگزین شده را مشخص میکند
• opacity برای مشخص کردن میزان شفافیت / تار بودن تگ ها
• overflow برای خلاصه نویسی ۲ ویژگی زیر
• overflow-x نحوه سرریز شدن تگ ها را بصورت افقی مشخص میکند
• overflow-y نحوه سرریز شدن تگ ها را بصورت عمودی مشخص میکند
• perspective برای ایجاد یک فضا / حالت ۳D بروی عناصر
• perspective-origin زاویه دید / موقعیت قرارگیری فضای ۳D را مشخص میکند
• pointer-events مشخص میکند که آیا یک عنصر به اشاره گر ماوس واکنش نشان دهد یا خیر ( مثلا بروی یک لینک برود ولی قابل کلیک نباشد )
• resize نحوه تغییر اندازه دادن تگ ها را مشخص میکند
• scroll-behavior برای ایجاد اسکرول نرم ( یا به انگلیسی Soft Scroll )
• unicode-bidi برای نمایش بهتر محتوای چند جهته ( مثلا یک متن انگلیسی درون یک متن فارسی )
• user-select نحوه انتخاب شدن متن توسط کاربر را مشخص میکند ( مثلا متونیم کاری کنیم که کاربر نتونه متن رو با ماوس انتخاب کنه )
• vertical-align تراز عمودی تگ های درون سطری ( یا Inline ) را مشخص میکند
• visibility قابل مشاهده یا مخفی بودن یک عنصر را مشخص میکند
• z-index ترتیب قرارگیری عناصر بروی همدیگه ( انباشته شدن ) را مشخص میکند

دوره رایگان CSS ! آموزش CSS مجانی

CSS یا Cascading Style Sheets یک زبان برنامه‌نویسی نیست!‌ پس چیست؟ باید گفت CSS یک زبان نشانه‌گذاریست که با استفاده از آن ‌می‌توانید وبسایت‌های با ظاهر فوق‌ العاده ایجاد کنید. ما در دوره آموزش CSS سعی داریم که CSS را به شکل ساده و قدم به قدم و به شکل کامل به شما آموزش دهیم.

یادگیری CSS بسیار ساده‌ است و تنها نیاز به کمی حوصله و تمرین دارد. در ادامه این مطلب کمی در مورد این دوره و خود بحث CSS صحبت خواهیم کرد. شما میتوانید با نصب برنامه SoloLearn به یادگیری زبان CSS در گوشی خود به صورت رایگان بپردازید و کد های دیگران را مشاهده کنید و در آزمون ها شرکت کنید .