Mening yordamchim nomli qolanma

MENING YORDAMCHIM

NOMLI QOLANMA:

QOLANMADA OZMI KOPMI SIZ UCHUN FOYDALI BOLGAN MALUMOTLAR MAVJUD FOYDAM TEKGAN BOLSA XURSANDMAN

654_19 TOSHMATOV MUXAMMADDIYOR

HTML

Hr- chuziq tortib beradi

• tartibsiz tartiblash

  ul tartibsiz tartiblasha kiradi va uni korinishini ozgartirsa boladi uni korinishini ozgartirish uchun type xususiyatidan foydalanamiz

  
  
  
  1. tartibli tartiblsh

     Ol tartibli tartiblash buni turini ozgartirish uchun type xususiyatidan foydalanamiz

     Va bunga qoshimcha ravishda qaysi xolatdan boshlashnixam belgilab berishimmiz munkin bunda biz start dan foydalanamiz misol=”b” buxolatda biz b dan boshlab tartiblashimmiz munkun

     Font otributining bir turu xisoblanadi va bu atrebutdan farqi bu tegda koproq xususiyatlar mavjud

     Giper silka ichiga target=”_blank” yangi saxifa ochib beradi;

     Admin e-mail pochtaga murojat qilish korinishida beriladi

     Telefon ga murojat qilish tel:+998999997730”> korinishda boladi

     Boshqa saxifaga otish korinishda boladi

     
     
     ishlamagan saxifani rangini beradi
     
     ustiga bosib turilganda sariq korsatadi
     
     ishlaganlarini rangini korsatadi

     id nomi faqatgina bita bolishi kerak (boshqa nomli bolishi munkin)

     saytni ichidagi id ga otib beradi
     
     ichidagi sozni jirniy qib chiqarib beradi
     
     

     ichiga malummot nomi

     
     ichidagi malumot
     malumotni ustiga bossa pasga tushirib korsa boladi(ichiga video,rasim,audiyo va bosha malumotlar kiritsa boladi

     Rasim yoki media fayllarini kochirib olish uchun href=”img.jpg” dowland=”nom bn soxranit qilish” ni ishlatishimmiz kerak

     
     
     

     ichiga odatda media fayllar joylanadi(rasim,video)

     Img bizga rasim qoyishimmizda yordam beradi va uning ichidagi scr=”bu joyga rasim bomi va joylashgan joyi belgilanadi” alt=”Rasim xaqida malumot”

     Figcaption -opisaniya

     Title-> img ni ichida berilsa bu misol uchun title=”rasimnu ustiga borganda bu soz chiqadi”

     
     
     aloxida blok xosil qilib beradi va uni ichidagi malumotlar osha bilok ichida xosil boladi bundan tashqar aynan shu blokni nomlanishini bilishimmiz uhun

     qoshimchasini qoshishimmiz munkun shu legend ichiga yozilgan malumotlar blokni ustida xosil boladi

     Table (tr, td, th){

     Tr-table rouse tr bizga vertikal yaniy Y oqi boyicha qatorlarga bolib beradi

     Td-table bizga gorizontal yaniy X oqi boyicha liniya xosil qilib beradi

     Th- tegi asosan sarlavxa uchun ishlatiladi xususiyati(markazga roslab beradi xamda jirniy qilib chiqarib beradi)}

     Cellpadding=”20px” tablitsaning ichki soxasidan 20 px joy tashlab beradi

     Callspacing=”10px” bu tablitsaning tashqi soxasidan joy tashhhlab beradi

     Agar jadvaldag bironta elementni kengaytirmoqchi bolsak (colspacn xamda rowspan) dan foydalanamiz

     Callspan- bu x oqi boyicha kengaytiradi

     Roqspan - Y oqi byicha kengaytiradi

     Table ichiga (text,width,height,bgcolor,callspacking,callpadding) qoshimchalarini qoyishimmiz munkun
     
     korinishda rasim joylanadi
     
     

     Input ichiga plackholder=” ichidagi nomi” kiritilsa blok ichida mavxum soz chiqadi

     Input ichiga name qoyish kerak xar bir inputni brauzerga jonatish uchun

     Input ichiga maxlenght=”10” input ichiga max 10 ta simvol kiritiladi

     Input ichiga minlenght=”2” minimal 2 ta simvol kiritish

     Input ichiga readonly qoyilsa input faqat oqish uchun bolib qoladi

     Input ichiga disablet qoyilsa faqatgina korinishi qoladi (malumot jonatmaydi)

     Input href=”number” ga max=”” min=”” qiymatlar berishimmiz munkin

     Input href=”date” max=”2020-01-01” min=”2019-01-01” qiymat berganda oraliqni ola oladi

     Input type=”range” bizga ----0------- chiziq xosil qilib beradi

     
     
     malumot ichida malumot chiqaradi
     
     ichida diapason xosil qiladi
     
     nomi : nomini bosganda inputga otkazib beradi
     
     nomi id ga boglab qoyilsa inputga boglanadi
     
     iktadan qadam bn otib ketadi

     Form dan tashqaridagi malumotni bog’lash uchun formga id xamda tashqaridagi inputga formni id sini berib qoyamiz misol: korinishda boladi

     Input ichidagi malumotlar saqlanib qolmasligi uchun

     Required input ichiga required qoshimchasi qoshilganda aynan shu input toldirilishi kerakligini anglatadi

     Value=”bu yerga yozilgan narsa barauzerda saqlanib qoladi ”

     Barcha inputlarga name=” ” qoshimchasi qoshilishi kerak aks xolda biz kiritgan malumotlar brauzerga yuborilmaydi

     
     
     
     qoshimchalarini qoshishimmiz munkun

     Select ichida option kiritilsa shunga oxshash xolat korishimmiz munkun

     Optgtrupt kiritilsa bu bolimga ajiratadi

     Select ichiga yaniy qohimchasi qoshilsa bu xolatda biz birnechta faylni tanlash imkoniyatiga ega bolamz

     Agar formadagi malumotlarimmizni yashirmoqchi bolsak u xolatda

     korinishida joylashimmiz munkun

     Form ichidagi action xususiyati malumotlarni qayerga yollashni korsatib beradi

     Autocomlate =”off” brauzerga kiritgan malumotlarimmiz braauzerxotirasida saqlanib qolmasligi uchun
     
     <<<<<<<<<<<<<<<<<<<<<<<<<-----------------CSS--------------->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

     Box-shadow: 0 0 10px red; borderga prozrachniy rang berish uchun

     Text-shadow: 0px 0px 10px black; textni prozravhniy qilish

     Font-size: 2em; shirift kataligini belgilab beradi

     Font-style: normal; shirift stili

     Font-weight: bold; textni jirniy qilib beradi

     Font-variant: smal-caps; textni xammasini katta xarifga olib beradi

     Line-height:2; xar bir sozdan keyin 2 ta xarif sigimidagi joyni tashlab ketadi

     Letter-spacing: 10px ; xar bir xarif orasidan 10px joy tashlab ketadi

     Border-width: 4px ; border kengligi

     Border-color: red; border rangi

     Border-style: solid; border turi

     Border-top-color: red; border ni yuqori qismini rangi

     Border-top-style: solid; borderni yuqori stili

     Border-top-style:10px; borderrni yuqori stili

     Wodr-wrap:break-word; matinni gorizontal shakilda roslab beradi

     Overflow:scroll; bu matinni ortiqchasini scrol ichiga olib beradi

     Text-decaration:underline; xar bir textni tagiga chiziq tortib beradi

     Text-decaration-color:red; dekaratsiyani rangi

     Text-decaration-line:underline; chiziqni stili

     Text-decaration-style: ***; dekaratsiyani stili

     px; abzatsdan joy tashlab beradi

     Text-transform:capitalize ; shiriftni katta va kichik qilish uchun ishlaydi

     *{ } blok html dokumentni barcha elementlariga murojat qiladi

     List-style:armenian; li tegini korinishini ozgartirish

     List-style-image:url(1.jpg); 0li tegini korinishiga rasim qoyib beradi

     List-style-position:inside; stilni joylashuvi (ichida)

     Border-image:url(rasim.jpg); borderga rasim qoyish

     Birder-image-slayd:20; borerni ichidagi rasimni slaydlarga bolib birlashtirib beradi

     Outline: 1px solid red; border tashqarisiga rang qoyib beradi

     Outline-offsed:5px ; borderdan 5px masofasa joylashtirib beradi

     Backgroud-image:liner-gradient(ranglar) chiziqli gradient

     Backgroud-image:repeating-liner-gradient(ranglar)takrorlanuvchi gradient

     Background-image:radial-gradient(ranglar) aylanma gradient

     Background-image: url(rasim); orqa fonga rasim qoyish uchun

     Background-repeat: no repeat; orqa fonni takrorlanishi

     Background-size: x px y px; orqa fonni kattaligi

     Background-positon:top left; orqa fonni joylashuvi

     Background-attachmand:fixed; orqa fon scrol yursayam qimirlamaydi

     Opacity:0-1; mavxum tasvir xosil qilib beradi

     Visibility:hidden; blokni yashirib qoyadi

     (H1,p,header,idv,section,main,aside,footer) Blochniy

     (Span,strong,em,I,del,a) strochni

     Blochniyni strochniga otkazish uchun display:inline;

     Strochnida margin-top va buutom ,width,height xam ishlamaydi

     Strochnini blochniga olish uchun Display:block;

     :hover- bironta element ustiga borsa osha elementni ushlaydi

     Input[type=”text”]:focus ustiga borganda osha elementni ushlaydi

     :empty{} bu bosh xolatni oladi

     :nth-of-type(1){} birxil elementlarning biriga murojat qilish uchun

     :nth-of-type(odd){} faqat tog’larini oladi yokiy (2n+1) desa boladi

     :nth-of-type(even){} faqat juftlarini olib beradi yokiy (2n) desa boladi

     :nth-child(1){} elementlarning biriga murojat qilish

     -Webkit- google uchun

     -o- opera uchun

     -moz- ozilla uchun

     -ms- internet exploer uchun

     (.nomi yokiy)(#nomi)::-webkit-scrollbar{

     Width:*px;} bu scrol oynasini kenglihini beradi

     (.nomi yokiy)(#nomi)::-webkit-scrollbar-track{

     Background:rang; bu scrolni orqa foni

     Border-radius:*px;} border-radiusini berish uchun

     (.nomi yokiy)(#nomi)::-webkit-scrollbar-thumb{

     Background-image: liner-gradient(ranglar);

     Border-radius:*px;

     } skrolni ozini xsusiyatlarini beradi

     Postion:relative | absolute |static | fixed;

     Top:|buttom:*px;

     Left: |right:*px;

     Blokni joylashuvi relaive bu blokni ota ona element shu blokdan chiqib ketmaydi

     @font-face{ src: url(‘../ikonka joylashgan joy’)

     justify-content ning xususiyatlari

     flex-start: bu xolatda element chab boshlang’ich xolatda chiqadi

     flex-end: O’ng tarafda xosil boladi.

     center: Elementmmiz konteynerning markazida xosil boladi.

     space-between: elementlar ortasida bir xil masofa tashlanan xolatda chiqadi .

     space-around: elementlar atrofida bir xil masofa tashlanadi

     align-items: bu elementlarni vertikal xolatda siljitish uchun ishlatiladi

     flex-start: bu xolatda elementimmiz yuqori joyga joylashadi.

     flex-end: bu xolatda element pasga joylashadi

     center: elementimmiz vertikal xolatdan markazda joylashadi.

     baseline: Элементы отображаются на базовой линии контейнера.

     stretch: Элементы растягиваются, чтоб заполнить контейнер.

     Лягушатам нужно выстроиться в порядке их лилий, используя flex-direction. Это CSS свойство задает направление, в котором будут расположены элементы в контейнере и принимает следующие значения:

     row: Элементы размещаются по направлению текста.

     row-reverse: Элементы отображаются в обратном порядке к направлению текста.

     column: Элементы распологаются сверху вниз.

     column-reverse: Элементы распологаются снизу вверх.

     ----------9----dars-------------------------------------------------------------------

     ----------10----dars-------------------------------------------------------------------

     Display: none; displayni yoqotib qoyadi

     Transform: rotate(45deg);

     Transition:all 2s; transl---atsiya jarayonini vaqti

     @keyframes (na.nomi){

     From{

     Boshlangich vaziyatdan

     
     
     }

     To{
     

     
     Ga otish

     }

     }

     
     
     Qaysi blokda ishlash uchun osha blok ichiga

     Animation-name: animatsiya nomi;

     Animation-duration:2s; animatsiya vaqti

     Animation-interation-count:infinite; animatsiya takrorlanishlar soni (infinite-cheksiz)

     Animation-file-mode:forward; animatsiya bajarilgndan keyingi joyda qolish

     Animation-direction:alternate-reveres; animatsiya borgan yonalishida qaytadi

     Animation-timing-function:ease; animatsiya harakatlanish usuli (turi);

     @keyframes (animatsiya nomi){

     10%{

     Left:0;}
     

     
     …

     100%{
     

     
     Left:700px;}

     }

     ----

     
     
     @keyframes (name){

     From{
     transform: rotate(0); // translatsiya 0 gradus dan boshlanadi

     }

     To{
     transform:rotate(360deg); //translatsiya 360 gradusga aylantiradi

     
     
     }}

     @keyframes nomi{

     From{

     Transform:translate(0,0); shu nuqtadan

     
     
     }

     To{
     

     
     Transform:translete(0,70px); y oqi boyicha 70px ga otkazib beradi

     }}
     
     <------------------------------------------ JavaScript ------------------------------------->

     
     
     < script type=”text/javascript”>Html saxifada shu kod ichida Js kodlarini ishlatishimmiz munkun
     
     
     
     
     

     ---

     Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
     ma'muriyatiga murojaat qiling