آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

دوره مجازی طراحی وب (جلسه 12): ویژگی های CSS - قسمت دوم

41 12012 ۱۲ بهمن ۹۳
در این جلسه هم مثل جلسه قبل به آموزش ادامه ویژگی های زبان CSS می پردازیم . در این جلسه ویژگی های مربوط با باکس-مدل و سایه ها برای متن ها و تگها، و خصوصیت های متن و فونت رو به شما معرفی می کنیم. :: عموم مطالب مطرح شده در این جلسه عبارتند از :
  • ویژگی border و کاربردهای آن
  • ویژگی border-bottom و کاربردهای آن
  • ویژگی border-bottom-color و کاربردهای آن
  • ویژگی border-bottom-left-radius و کاربردهای آن
  • ویژگی border-bottom-right-radius و کاربردهای آن
  • ویژگی border-bottom-style و کاربردهای آن
  • ویژگی border-bottom-width و کاربردهای آن
  • ویژگی border-color و کاربردهای آن
  • ویژگی border-image و کاربردهای آن
  • ویژگی border-left و کاربردهای آن
  • ویژگی border-left-color و کاربردهای آن
  • ویژگی border-left-style و کاربردهای آن
  • ویژگی border-left-width و کاربردهای آن
  • ویژگی border-radius و کاربردهای آن
  • ویژگی border-right و کاربردهای آن
  • ویژگی border-right-color و کاربردهای آن
  • ویژگی border-right-style و کاربردهای آن
  • ویژگی border-right-width و کاربردهای آن
  • ویژگی border-style و کاربردهای آن
  • ویژگی border-top و کاربردهای آن
  • ویژگی border-top-color و کاربردهای آن
  • ویژگی border-top-left-radius و کاربردهای آن
  • ویژگی border-top-right-radius و کاربردهای آن
  • ویژگی border-top-style و کاربردهای آن
  • ویژگی border-top-width و کاربردهای آن
  • ویژگی border-width و کاربردهای آن
  • ویژگی box-shadow و کاربردهای آن
  • ویژگی text-shadow و کاربردهای آن
  • ویژگی overflow و کاربردهای آن
  • ویژگی overflow-x و کاربردهای آن
  • ویژگی overflow-y و کاربردهای آن
  • ویژگی padding و کاربردهای آن
  • ویژگی padding-bottom و کاربردهای آن
  • ویژگی padding-left و کاربردهای آن
  • ویژگی padding-right و کاربردهای آن
  • ویژگی padding-top و کاربردهای آن
  • ویژگی margin و کاربردهای آن
  • ویژگی margin-bottom و کاربردهای آن
  • ویژگی margin-left و کاربردهای آن
  • ویژگی margin-right و کاربردهای آن
  • ویژگی margin-top و کاربردهای آن
  • ویژگی letter-spacing و کاربردهای آن
  • ویژگی line-height و کاربردهای آن
  • ویژگی tab-size و کاربردهای آن
  • ویژگی text-align و کاربردهای آن
  • ویژگی text-indent و کاربردهای آن
  • ویژگی text-justify و کاربردهای آن
  • ویژگی text-transform و کاربردهای آن
  • ویژگی white-space و کاربردهای آن
  • ویژگی word-break و کاربردهای آن
  • ویژگی word-spacing و کاربردهای آن
  • ویژگی word-wrap و کاربردهای آن
  • ویژگی text-decoration و کاربردهای آن
  • ویژگی text-decoration-color و کاربردهای آن
  • ویژگی text-decoration-line و کاربردهای آن
  • ویژگی text-decoration-style و کاربردهای آن
  • ویژگی @font-face و کاربردهای آن
  • ویژگی font و کاربردهای آن
  • ویژگی font-family و کاربردهای آن
  • ویژگی font-size و کاربردهای آن
  • ویژگی font-style و کاربردهای آن
  • ویژگی font-variant و کاربردهای آن
  • ویژگی font-weight و کاربردهای آن
 
این مطلب یک جلسه از کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : به جای صرف هزینه های چند صد هزارتومانی برای یادگیری طراحی وب ، تنها با 30% هزینه ی کلاس های حضوری، دوره ی کامل و حرفه ای آموزش طراحی وب را برای شما عزیزان برگزار کرده ایم. در این دوره مفاهیم اساسی و پایه ای طراحی وب مطرح خواهد شد و زبان های HTML5 و CSS3 با جزئیات کامل و به صورت کاملا عملی و کاربردی تدریس می شود. وجه تمایز و مزیت این دوره نسبت به دوره های مشابه، کاربردی بودن آن است. در این دوره مواردی مانند آموزش طراحی قالب متناسب با سئو، آموزش طراحی وب واکنشگرا (Responsive)، آموزش تبدیل قالب فتوشاپی به صفحه وب، آموزش ترجمه و فارسی سازی قالب های خارجی، آموزش طراحی قالب برای سیستم های وبلاگدهی (بلاگفا و میهن بلاگ) به صورت کاملا عملی، از پایه تا پیشرفته توسط مدرسی با تجربه 10 ساله طراحی وب و دانشجوی دکترای نرم افزار برای شما به صورت کاملا اصولی و عملی تدریس می شود. شما برای این حجم مطالب آموزشی فقط یک سوم کلاس های حضوری هزینه می کنید! ما رضایت شما را تضمین خواهیم کرد ...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 41 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    بهرام آزادی(۲۴ مهر ۱۳۹۴)

    سلام
    یه سوال داشتم
    فرمودید که استایل دهی در html5 بکلی بر عهده css3 گذاشته شده و ما برای استایل دهی حق استفاده از attribute های html رو نداریم
    این در حالی هست که ما در html 5 خاصیت dir رو داریم که همان کاری را انجام میدهد که کد css مشابه آن یعنی direction انجام میدهد و همان استایل دهیست و قاعدتا نباید در html5 تعریف میشد
    نظر شما چیه؟

    • ‏‏
      لقمان آوند(۲۴ مهر ۱۳۹۴)

      این خصوصیت رو از ویژگی های مربوط به زبان محتوا بدونید. مثل lang . بعضا می تونه به موتور های جستجو در تعین جهت نوشتاری محتوا کمک کنه .

  • ‏‏
    sokoot67(۲۴ دی ۱۳۹۴)

    درود

    برای وسط چین کردن یک div طبق ترفند margin:0 auto به صورت افقی وسط چین می شد
    یک div ایجاد کردم با طول و عرض مشخص و درونش یک عکس گذاشتم
    حالا برای وسط چین کردن در محور عمود چکار باید کرد؟
    مثلا طبق عکسی که در زیر لینکش رو گذاشتم
    http://uupload.ir/files/tzlr_1-14-2016_7-23-15_pm.png
    و با کد زیر عکس در div در محور افق وسط چین شد
    display: block;
    margin: 0 auto;
    ولی چکار کنم در محور عمود هم بشه؟

  • ‏‏
    sokoot67(۲۴ دی ۱۳۹۴)

    ادامه سوال قبلی
    چرا وقتی به همین img
    position: absolute;
    top: 50%;
    left: 50%;
    در حالی که اولین پدرش که همین باکش قرمز هست position:relative هست
    و عکس که فرزندش هست نسبت بهش تراز میشه
    و چنین می شود عکس زیر
    http://uupload.ir/files/0lei_1-14-2016_7-28-42_pm.png
    ولی با 34% تقریبا وسط میشه
    چرا با 50 درصد نمیشه؟

    لطفا راهنمایی کنید خیلی برام مهمه
    ممنون

    • ‏‏
      لقمان آوند(۲۷ دی ۱۳۹۴)

      خوب شما چپ و بالای تصویر رو 50% فاصله میدید. نه وسط تصویر رو …

  • ‏‏
    محمد علیزاده(۹ مرداد ۱۳۹۵)

    سلام
    امیدوارم حالتون خوب باشه
    یه سوال داشتم استاد اوند
    چرا متن هایی که درون تگ div هست رو با تگ br ازهم جدا کردین مگه شما نگفتین نباید در المانهای بلاکی از تگ
    br استفاده کرد..؟
    سوال بعد اینکه چرا در تگ text-indent از واحد cmاستفاده کردید در حالی که در سایت w3s از واحد px استفاده کرده..؟
    ایا واحد cm برای متن استفاده بشه اشکالی نداره…؟
    پیشاپیش ممنون از پاسخ دهی شما استاد عزیز.

    • ‏‏
      لقمان آوند(۱۰ مرداد ۱۳۹۵)

      سلام
      برای بردن متن به خط بعدی همه جا می تونید از br استفاده کنید
      از هر واحدی دوست داشتید می تونید استفاده کنید مشکلی نیست

      • ‏‏

        استاد اوند اگه اشتباه نکرده باشم توی اویل گفته بودید که از این نوع واحد ها استفاده نکنیم توی طراحی هامون و باعث اسکرول خوردن میشه درسته ؟؟؟؟

        • ‏‏
          لقمان آوند(۱۴ مرداد ۱۳۹۵)

          واحد ها برای استفاده هستند. مهم اینه که درست استفاده کنید…

  • ‏‏

    سلام استاد اوند عزیز یه سوال در مورد line-height:;داشتم !!!
    استاد مقدار این ویژگی میتونه منفی بگیره مثلا واسه این عکس
    http://s2.picofile.com/file/8262309042/Screenshot_from_2016_08_03_16_51_52.png

    وسوال دیگه اینکه
    استاد الان تا این جلسه ما میتونیم قالب کد بزنیم 😛 😛 و طراحی کنیم ؟ 🙂 🙂
    طاقتم تموم شده 😳 😐 😥 😥 😥 😥 😥 😥
    و اینکه واسه اینکه تب بین نوشته ها اعمال بشه و فاصله ها باید از تگ pre استفاده کنیم ؟؟؟
    توی تعریف تگ pre گفتین برای اینکه یه کد برنامه نویسی توی صفحه وب استایل و فاصله ها توی خروجی اهمال بشه میتونین ازش استفاده کنیم
    ممنون بابت پاسخگویی خوبتون

    • ‏‏
      لقمان آوند(۱۴ مرداد ۱۳۹۵)

      سلام
      هر عدد صحیحی می تونه بگیره منتهی عرف نیست مقدار منفی استفاده کنید
      می تونید ولی بهتره دوره رو تا آخر ببینید. خیلی موارد رو توی پروژه ها می گیم که بدردتون می خوره در عمل
      بله از pre استفاده کنید

  • ‏‏
    Aria Banazadeh(۲۴ دی ۱۳۹۵)

    با سلام من طبق چیزی که خوندم توی w3schools نیازی به اوردن margin:0 auto نیست و فقط اوردن margin:auto این کار را برای ما انجام می دهد و المنت را برای ما وسط چین میکند پس چرا شما از margin:0 auto استفاده کردید؟

    • ‏‏
      لقمان آوند(۲۵ دی ۱۳۹۵)

      0 اول که گذاشتیم برای تعین فاصله از بالا و پایین هست. چپ و راست مهمه که auto باشه. تو حالتی که auto خالی هست برای بالا و پایین هم فواصل پیش فرض رو در نظر می گیره

  • نکته : برای پاسخگویی سریعتر و بهتر، بخش نظرات این مطلب مختص پرسش و پاسخ های کاربران ثبت نامی در دوره ی کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است .
    اگر قبلا در این دوره ثبت نام کرده اید پس از ورود به سایت می توانید تمامی پرسش و پاسخ ها و نظرات مطرح شده ی این مطلب را مشاهده و اگر سوالی دارید در همینجا مطرح کنید.

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :