Добијте ги фактите со овој краток тек на CSS
Каскадните стилски плочи имаат многу предности. Тие ви дозволуваат да го користите истиот стилски лист низ целата своја веб-страница. Постојат два начини да го направите ова:
- поврзување со елементот LINK
- увоз со командата @import
- <стил>
- @import url ('http://www.yoursite.com/styles.css');
Предности и недостатоци на надворешните стилски плочи
Една од најдобрите работи за каскадни стилски листови е тоа што можете да ги користите за да ја одржите вашата страница доследна. Најлесен начин да го направите ова е да поврзете или увезете надворешен стилски лист. Ако го користите истиот надворешен стилски лист за секоја страница од вашиот сајт, можете да бидете сигурни дека сите страници ќе ги имаат истите стилови.
Некои од предностите за користење на надворешни стилски листови вклучуваат дека можете да го контролирате изгледот и чувството на неколку документи одеднаш. Ова е особено корисно ако работите со тим од луѓе за да креирате своја веб-страница. Многу правила за стил може да биде тешко да се запомнат, и додека можеби имате упатство за испечатен стил, потребно е постојано да се прелистува за да се утврди дали примерен текст треба да биде напишан во 12-качен Arial фонт или 14-точка курир.
Можете да креирате класи на стилови кои потоа можат да се користат за многу различни HTML елементи. Ако често користите специјален фонт Wingdings за да нагласите различни работи на вашата страница, можете да ја користите класата Wingdings што сте ја поставиле во вашиот стилски лист за да ги креирате, наместо да дефинирате специфичен стил за секој пример од акцентот.
Можете лесно да ги групирате вашите стилови за да бидете поефикасни. Сите методи на групирање што се достапни за CSS можат да се користат во надворешни стилски листови, и ова ви обезбедува поголема контрола и флексибилност на вашите страници.
Тоа, рече, исто така има многу добри причини да не се користат надворешни стилски листови. За еден, тие можат да го зголемат времето за преземање ако се поврзете со многу од нив.
Секогаш кога ќе креирате нова CSS-датотека и ќе ја поврзете или ќе ја увезете во вашиот документ, тоа бара од веб-прелистувачот да направи друг повик до веб-серверот за да ја добие датотеката. Серверот ги успорува патите за вчитување на страницата.
Ако имате само мал број на стилови, тие можат да ја зголемат комплексноста на вашата страница.
Бидејќи стиловите не се видливи во HTML, секој што гледа во страната мора да добие друг документ (CSS-датотека) за да дознае што се случува.
Како да креирате надворешен стилски лист
Надворешните стилски листови се напишани на ист начин како вградени и вградени стилски листови. Но се што треба да го напишете е селекторот на стилот и декларацијата . Не ви треба елемент или атрибут на СТИЛ во документот.
Како и кај сите други CSS, синтаксата за правило е:
селектор {сопственост: вредност; }
Овие правила се запишани во текстуална датотека со наставката .css. На пример, може да го именувате вашиот стилски лист styles.css.
Откако ќе имате документ со стилски лист, треба да го поврзете со вашите веб-страници. Како што споменав погоре, ова се прави на два начина.
Поврзување на CSS документи
За да поврзете лист со стил, го користите елементот LINK. Ова има атрибути rel и href. Атрибутот rel му кажува на прелистувачот што го поврзувате (во овој случај стилски лист), а атрибутот href го држи патот до CSS-датотеката.
Исто така постои и опција тип на атрибут кој можете да го користите за да го дефинирате MIME-типот на поврзаниот документ. Ова не е потребно во HTML5, но треба да се користи во HTML 4 документи.
Еве го кодот што ќе го користите за поврзување на стилски лист CSS наречен styles.css:
И во HTML 4 документ ќе напишете:
type = "text / css" >
Внесување на стилови на CSS
Увезените таблички за стилот се поставени во рамките на елементот СТИЛ. Потоа можете да ги користите вградените стилови, ако сакате. Исто така, можете да вклучите стилови на увезени стилови во поврзаните стилски листови. Внатре во документот СТИЛ или CSS, напишете:
@import url ('http://www.yoursite.com/styles.css');