Предишен ◈ Следващото

HTML CSS начинаещи

  • брой урок.
    практика
    за многоколонните оформления
  • брой урок.
    практика
    на реални оформления

курс за напреднали

  • брой урок.
    проблеми
    кръстосано браузър HTML и CSS
  • брой урок.
    напреднал
    CSS свойства
  • брой урок.
    работа
    с HTML форми
  • брой урок.
    работа
    с разширени селектори
  • брой урок.
    Работа с псевдо-
    класове и елементи

    напреднали неща

    • брой урок.
      работа
      с плавен преход
    • брой урок.
      работа
      анимация за CSS
    • брой урок.
      CSS трансформация
      в самолета
    • брой урок.
      CSS трансформация
      в обема
    • брой урок.
      Работа с език по-малко
      Програмиране CSS
    • брой урок.
      Работа с език SASS
      Програмиране CSS

    Като се започне от този урок, аз вече няма да доведе до структурата на цялата страница, помислете, че винаги работи в тялото маркер.

    Unit. Структурата на най-простото масата

    Мисля, че можете да си представите какво маса е в реалния живот - това е набор от редове и колони. в пресечната точка на които има клетки.

    В HTML, маси са създадени по подобен принцип. Там също има редове и колони с клетки, но HTML кодови таблици на пръв поглед може да изглежда необичайно.

    Самата маса е с твърда структура: най-важното е маркер

    . във вътрешността на който трябва да се основава на тагове . който създаде серия (ред) на масата, а вътре в тях - тагове
    . които създават клетката.

    Както можете да видите, няма маркери, които биха създали колони - таблици са създадени в йерархията: първо, на първия ред, а след това на втория и така нататък.

    Разгледайте внимателно следния пример на таблица (таблица етикет добавена граница атрибут, който определя граничния масата и неговите клетки.)

    Така че кодът ще изглежда в браузъра:

    Че cellspacing има стойност по подразбиране, често можете да получите в начина. В този случай, просто да го постави на нула.

    В HTML5, този атрибут е отхвърлена (но все още прикрепен към вдлъбнатината по подразбиране). Вместо това, използвайте специален CSS собственост, която ще обсъдим по-късно.

    Ако мислите, че не е нужно да се проучи този атрибут се дължи на факта, че тя е остаряла - грешите. Светът е много повече сайтове, които не са направени на HTML5, и в тях можете да се сблъскат с този атрибут (и няколко други наследство, което ние ще мине). В този случай, трябва да знаете какво е това и как да го използвате.

    Unit. атрибут cellpadding

    Cellpadding атрибут определя разстоянието между текста и на границата на клетката. В следващия пример ще поставя този атрибут за 20px текст сега се отдалечава от границите на клетката:

    Така че кодът ще изглежда в браузъра:

    За сравнение, аз цитирам как таблицата ще изглежда по подразбиране:

    Cellpadding атрибут също има стойност по подразбиране. Ако това ви спира - тя е празна.

    Този атрибут, както и cellspacing, смята остарели в HTML5.

    Unit. Зануляване cellpadding и cellspacing

    Нека нула, cellpadding и cellspacing и да видим какво ще се случи с таблицата в този случай:

    Така че кодът ще изглежда в браузъра:

    Както можете да видите, в този случай, сплъстена клетка в таблицата. но все пак се забелязва, че всяка клетка има своя граница (т.е. на границата в момента е двойна). Вие ще бъдете в състояние да го оправи, когато ще научите CSS език.

    Unit. Добавянето на ширина и височина

    Има и ширината и височината атрибути. които ви позволяват да определите ширината на маса и височина, съответно, на масата (без атрибутите ширината и височината на масата и съдържанието му се уреждат от: много текст - ширината на големи, малко текст - малка ширина).

    Вижте примера на тяхната употреба:

    Така че кодът ще изглежда в браузъра:

    Умение стойности могат да действат пиксели или процент. Процентните стойности са определени по такъв начин: ширина = "30%" - в този случай, на масата ще се 30% от ширината на родителя.

    Какво да направите после:

    Преминете към решаване на проблемите на следния линк: цели за урока.

    Когато всичко се реши - да преминете към изучаването на нова тема.

    HTML CSS начинаещи

    • брой урок.
      практика
      за многоколонните оформления
    • брой урок.
      практика
      на реални оформления

    курс за напреднали