آموزش یادگیری CSS برای طراحی وب واکنشگرای مدرن وب سایت هایی را از ابتدا HTML5 CSS3 ایجاد کنید
Learn CSS for Modern Responsive Web Design create websites from scratch HTML5 CSS3
CSS بخش مهمی از فرآیند توسعه وب است بیاموزید که چگونه HTML خود را با استفاده از CSS در کد وب خود زنده کنید
راهنمای شروع سریع صفحات وب با طراحی CSS برای مبتدیان
شامل بیش از 35 صفحه راهنمای دانلود PDF
کاوش کنید و بیاموزید که چگونه صفحات وب را با استایل CSS طراحی کنید. برای زنده کردن صفحات وب خود از CSS استفاده کنید. سینتکس و کدنویسی مدرن CSS برای ایجاد سریع و آسان وب سایت. کد منبع گنجانده شده است تا بتوانید در حین گذراندن دروس دوره، کد را امتحان کنید.
افزودن CSS به صفحه HTML خود از فایل CSS
نحوه انتخاب عناصر صفحه CSS HTML Page Element Selection
تنظیم رنگ‌ها برای متن و پس‌زمینه با CSS افزودن تصاویر به عناصر واحدهای ارزش رنگ
مدل CSS Box چیست و نحوه تنظیم حاشیه حاشیه برای عناصر
نحوه اعمال CSS برای استایل فونت تنظیم متن، تزیین متن و تغییرات.
نحوه تنظیم مقادیر نمایش عنصر و اینکه کدام صفحه نمایشی در مقابل ویژگی نمایان بودن وجود ندارد
روش موقعیت CSS برای صفحه HTML Element Absolute Relative Fixed Static
نحوه استفاده از float برای تنظیم تصاویر در راستای متن و موقعیت عناصر با CSS Element Float
کلاس‌های شبه CSS برای جلوه‌های شناور و موارد دیگر ایجاد محتوای تعاملی CSS
CSS عناصر شبه در حال افزودن محتوا به عناصر صفحه با CSS
نحوه ایجاد یک الگوی ساده با استفاده از CSS Float Layout با CSS
ایجاد طرح‌بندی وب‌سایت 3 ستونی با طراحی طرح‌بندی ساده CSS flexbox
قالب وب سایت 3 ستونی واکنش گرا مدرن با طراحی طرح بندی سریع شبکه CSS
افزودن CSS به صفحه HTML خود از فایل CSS:
چگونه CSS را به صفحات وب خود اضافه کنید. یک فایل CSS جداگانه ایجاد کنید و آن را به صفحه HTML خود پیوند دهید. عناصر صفحه را انتخاب کنید، مقادیر استایل را به ویژگی های سبک اعمال کنید. ویژگی سبک خط خطی، برچسب سبک و فایل CSS سبک.
نحوه انتخاب عناصر صفحه CSS HTML صفحه انتخاب عنصر
انتخاب عنصر صفحه را می توان با انتخاب عناصر بر اساس برچسب، نام کلاس یا ویژگی شناسه عنصر انجام داد. همه عناصر را می توان با استفاده از یک علامت عام انتخاب کرد. انتخاب عنصر همچنین می تواند با جداسازی انتخابگرها با کاما گروه بندی شود. هنگام برنامه ریزی و طراحی عناصر صفحه وب HTML خود، مطمئن شوید که برای انتخاب عنصر با CSS برنامه ریزی کرده اید. عناصری را ایجاد کنید که در صورت نیاز به یک سبک خاص، انتخاب آنها آسان و به اندازه کافی منحصر به فرد باشد که سایر عناصر با انتخاب مطابقت نداشته باشند.
تنظیم رنگ ها و پس زمینه با CSS
رنگ های متن و رنگ های پس زمینه را می توان به راحتی اعمال کرد. می توان از مقادیر رنگ متفاوتی مانند مقدار HEX رنگ، مقدار رنگ RGB یا مقدار رنگ نامگذاری شده استفاده کرد. تصاویر پس زمینه را نیز می توان روی هر عنصر صفحه تنظیم کرد. با استفاده از یک تصویر پس زمینه، ویژگی هایی وجود دارد که می توان آنها را برای اعمال تصاویر با جزئیات خاص تر تنظیم کرد. مقادیر HEX مانند مقادیر رنگ RGB در سه قسمت هستند. مقدار HEX برای 0 00 است و بالاترین مقدار 255 FF است. با استفاده از مقدار hex می توانید رنگ ها را به مقدار اعمال کنید. RGB رنگ‌های قرمز سبز آبی است، با حداقل مقدار 0 و حداکثر مقدار 255. بالاترین مقدار دقیقاً مانند مقادیر HEX بیشترین مقدار آن رنگ خاص را اعمال می‌کند.
مدل جعبه CSS چیست و نحوه تنظیم حاشیه حاشیه برای عناصر
عناصر HTML به شکل مستطیل هستند، هر کدام را می توان به عنوان یک جعبه در نظر گرفت. با خاصیت بیرونی حاشیه و درونی با بالشتک و محتوا. خط تقسیم کننده مرزی است که می تواند روی هر عنصری تنظیم شود. مدل جعبه در اطراف عنصر HTML متشکل از حاشیه، مرزها، padding و محتوا قرار می گیرد. ابعاد ارتفاع و عرض محتوا را نیز می‌توان برای محتوا تنظیم کرد.
نحوه اعمال CSS برای سبک فونت تنظیم متن، تزئین متن و تبدیل.
از CSS برای به روز رسانی ظاهر و احساس متن از وب سایت خود استفاده کنید. تراز متن را در عنصر والد با چپ راست و مرکز تنظیم کنید. نحوه تبدیل متن درون یک عنصر به حروف بزرگ، کوچک و نحوه بزرگ کردن متن با CSS. یک ظاهر طراحی فونت با ایتالیک و پررنگ. نحوه اضافه کردن یک خانواده فونت جدید و تنظیم سبک فونت متن با CSS. استفاده از فونت های Google برای انتخاب فونت برای استفاده از فونت های وب Google.
نحوه تنظیم مقادیر نمایش عنصر و اینکه هیچ کدام در مقابل ویژگی visibility چه نمایشی را انجام نمی دهد
عنصر CSS نمایش بلوک و درون خطی و تفاوت آنها. نحوه استفاده از مقدار نمایش بلوک درون خطی تفاوت بین نمایش هیچ کدام و نمایان بودن پنهان برای عناصر صفحه HTML در هنگام اعمال خصوصیات CSS چیست.
روش موقعیت CSS برای عنصر صفحه HTML
تنظیم یک مقدار برای موقعیت یک عنصر صفحه را می توان با 5 مقدار موقعیت مختلف انجام داد. هنگامی که ویژگی اضافه می شود، می توان عناصر را در موقعیت قرار داد، و تعیین کرد که در آن عنصر از مقادیر ویژگی های پایین، بالا، راست و چپ نمایش داده شود. همه مقادیر موقعیت با همه ویژگی های موقعیت ها کار نمی کنند.
نحوه استفاده از float برای تنظیم تصاویر در راستای متن و موقعیت عناصر با CSS Element Float
از ویژگی float می توان برای قرار دادن عناصر در ظرف استفاده کرد. شناور معمولاً با تصاویر انجام می شود به طوری که آنها متن اطراف را برای پیچیدن در اطراف تصویر داشته باشند. شناورها همچنین می توانند برای طرح بندی، برای ایجاد ستون با عناصر استفاده شوند. شناورها ویژگی های مفیدی برای قرار دادن عناصر در یک ظرف عنصر والد هستند.
کلاس‌های شبه CSS برای جلوه‌های شناور و موارد دیگر ایجاد محتوای تعاملی CSS
کلاس های شبه برای تعریف وضعیت یک عنصر استفاده می شود. به طور پیش‌فرض در تگ‌های لنگر، این ویژگی‌ها می‌توانند ظاهر و احساس را در حالت‌های مختلف تنظیم کنند. کلاس‌های شبه را می‌توان برای هر عنصری اعمال کرد و در صورت تغییر حالت، استایل عنصر به‌روزرسانی می‌شود.
عناصر شبه CSS در حال افزودن محتوا به عناصر صفحه با CSS
عناصر شبه می توانند بخشی از یک عنصر را انتخاب کنند و یک ظاهر طراحی کنند. آنها همچنین می توانند برای اضافه کردن محتوا قبل و بعد از محتوا در انتخاب عنصر استفاده شوند.
نحوه ایجاد یک الگوی ساده با استفاده از CSS Float Layout با CSS
یک طرح بندی ساده ایجاد کنید که می تواند به عنوان یک الگوی شروع استفاده شود. وب سایت سه ستونی به سرعت و به راحتی با شناور CSS ایجاد می شود. کاوش کنید که چگونه می توانید یک الگوی CSS برای وب سایت خود با استفاده از شناور CSS ایجاد کنید.
یک طرح‌بندی وب‌سایت 3 ستونی با طراحی طرح‌بندی ساده CSS flexbox ایجاد کنید
نحوه ایجاد یک وب سایت 3 ستونی که کاملاً واکنش گرا و آماده برای موبایل باشد را بررسی کنید. ستون‌هایی را در بخش محتوای اصلی ایجاد کنید و نوار ناوبری را تنظیم کنید که با CSS Flexbox پاسخگو باشد. طراحی وب سایت مدرن و قالب با CSS Flexbox.
قالب وب سایت 3 ستونی واکنشگرا مدرن با طراحی طرح بندی سریع شبکه CSS
از شبکه CSS برای یک وب سایت کاملاً واکنش گرا استفاده کنید که می تواند به عنوان یک الگو برای طراحی وب پیچیده تر استفاده شود. از ویژگی ها و مقادیر CSS Grid برای ایجاد یک وب سایت 3 ستونی از ابتدا استفاده کنید. یک نوار پیمایش کاملاً پاسخگو با استفاده از شبکه CSS ایجاد کنید.
این دوره آموزشی نهایی برای یادگیری در مورد CSS است. برگه‌های سبک آبشاری یکی از بلوک‌های اصلی محتوای وب هستند که در همه جا برای افزودن یک ظاهر به HTML ساده استفاده می‌شود. استفاده از آن آسان است و برای هر کد HTML اعمال می شود.
آموزش ایجاد الگوهای CSS - که می تواند پایه ای برای تعداد بی نهایت صفحه وب جدید باشد. محتوای وب خود را با CSS
زنده کنیدما شما را از طریق تمام نحوهای استفاده شده در CSS راهنمایی می کنیم و به شما کمک می کنیم بفهمید که در کجا باید خواص و مقادیر را اعمال کنید. چه مبتدی باشید و چه بخواهید مهارت های خود را به روز کنید، این دوره برای شما مناسب است!
پروژه یک وب سایت 3 ستونی از ابتدا ایجاد کنید.
با استفاده از floats، flexbox یا CSS Grid یا ترکیبی از آنها یک وب سایت 3 ستونی کاملاً پاسخگو از ابتدا ایجاد می کند. برای ارائه پروژه می توانید از یک اسکرین شات از وب سایت تکمیل شده، کد منبع پروژه، آپلود در سروری مانند github یا موارد دیگر استفاده کنید.
- وب سایت ها را برنامه ریزی کنید
- هدر، نوار پیمایش، ناحیه اصلی با 3 ستون و پاورقی را با HTML اضافه کنید
- عناصر صفحه را انتخاب کنید و از CSS برای ایجاد طراحی وب برای پروژه استفاده کنید
چند درس آخر شامل نمونه هایی از استفاده از 3 روش طراحی برای ایجاد وب سایت می باشد.
درس ها Lessons
-
10 عنصر شبه CSS 10 Pseudo elements CSS
-
6 نمایش عنصر CSS 6 CSS element Display
-
9 کلاس شبه CSS 9 CSS Pseudo classes
-
12 Flex Layout CSS 12 Flex Layout CSS
-
4 باکس مدل حاشیه حاشیه 4 Box Model Border Margin Padding
-
13 CSS Grid Layout CSS 13 CSS Grid Layout CSS
-
11 Float Layout CSS 11 Float Layout CSS
-
2 CSS انتخاب عنصر 2 Element Selection CSS
-
7 موقعیت عنصر CSS 7 CSS Element Position
-
8 شناور عنصر CSS 8 CSS Element Float
-
1 افزودن CSS به صفحه 1 Adding CSS to Page
-
0 CSS Quick Start مقدمه 0 CSS quickstart Introduction
-
5 متن و فونت CSS 5 Text and Fonts CSS
-
3 تنظیم رنگ و پس زمینه با CSS 3 Setting Colors and Backgrounds with CSS
https://donyad.com/d/3844
Laurence Svekis
پرفروش ترین مدرس دوره
نویسنده دوره طراحی وب و توسعه وب - آموزش حضوری و آنلاین به بیش از 1,000,000 دانش آموز در سطح جهان. کارشناس توسعه دهنده Google از سال 2020 GDE
من اینجا هستم تا به شما کمک کنم یاد بگیرید، به رویاهای خود برسید، امروز در این ماجراجویی شگفت انگیز به من بپیوندید
Google Developers Expert - GSuite
ارائه دوره های توسعه وب و دوره های استراتژی بازاریابی دیجیتال از سال 2002.
متخصص فناوری نوآور با طیف گسترده ای از تجربه دنیای واقعی. ارائه راه حل های دیجیتال هوشمند به صورت آنلاین برای مشاغل کوچک و تجاری.
"من به هر چیزی که مربوط به فناوری دیجیتال باشد علاقه دارم، از برنامه نویسی و چالش ایجاد تجربیات دیجیتال موفق لذت می برم. به عنوان یک توسعه دهنده با تجربه، اولین برنامه های کامپیوتری خود را در سال 1990 و اولین وب سایت خود را در سال 1998 ایجاد کردم. از به اشتراک گذاری مطالب خود لذت می برم. دانش با دیگران است و می خواهم به شما کمک کنم در فرصت های فوق العاده ای که اینترنت فراهم می کند به اشتراک بگذارید."
"یادگیری، درک با اشتیاق قوی برای آموزش. اینترنت فرصت های جدیدی را برای گسترش و به اشتراک گذاری دانش در اختیار ما قرار داده است."
می‌خواهید درباره تبدیل شدن به یک توسعه‌دهنده وب اطلاعات بیشتری کسب کنید، آیا می‌خواهید آزادی‌ای را که فناوری برای ما فراهم می‌کند، تجربه کنید؟ یاد بگیرید که چگونه چیزهای شگفت انگیز را به صورت آنلاین زنده کنید. فناوری همه ما را از طرق مختلف به هم متصل می کند. این درها را به روی کسانی باز می کند که آن را در آغوش می گیرند و یاد می گیرند که چگونه این ارتباطات را واقعی کنند.
"دوره های آموزشی من برای کمک به شما در دستیابی به اهداف، یادگیری و به روز رسانی مهارت ها طراحی شده اند"
سابقه و هدف : یک توسعه دهنده باتجربه برنامه های کاربردی وب، که روی چندین برنامه در سطح سازمانی، صدها وب سایت، راه حل های تجاری و بسیاری از برنامه های کاربردی وب منحصر به فرد و نوآور کار کرده است. زمینه های تخصصی توسعه برنامه های کاربردی وب عبارتند از HTML، CSS، JavaScript، JQuery، Bootstrap، PHP و MySQL. هر چیزی که مربوط به ایجاد وب و تجربه دیجیتال باشد. علاقه‌مند به هر کاری که با توسعه برنامه‌های کاربردی وب، برنامه‌نویسی تا بازاریابی آنلاین با تمرکز قوی بر رسانه‌های اجتماعی و SEO .
" درک فناوری وسیله ای برای ارتباط بهتر با کاربران فراهم می کند. همچنین درهای زیادی را باز می کند. دانش کلید موفقیت است و من می خواهم به شما کمک کنم تا آنچه را که فناوری ارائه می دهد تجربه کنید. من به فن آوری های وب علاقه مند هستم و مشتاقانه منتظر به اشتراک گذاشتن دانش و تجربه خود با شما هستم!"
نمایش نظرات