Bună ziua, dragi cititori ai proiectului Anatomy of Business. Webmasterul Alexander este cu tine! În ultimul articol, ne-am uitat la ce sunt stilurile CSS și cât de importante sunt acestea în programarea WEB.

Este destul de evident că dacă stilurile CSS au un impact semnificativ asupra afișajului unui fișier HTML, atunci acestea trebuie conectate cumva. Astăzi ne vom uita la patru modalități principale de a conecta stilul CSS la HTML.

Să nu amânăm și să începem!

Inclusiv un fișier CSS separat!

Una dintre cele mai convenabile și moduri simple conectarea stilurilor înseamnă conectarea unui fișier separat cu stiluri. Pentru a face acest lucru, utilizați editorul de text notepad++ (sau orice altul) pentru a crea un fișier cu extensia .css și plasați-l în același folder cu fișierul în care vrem să-l plasăm.

Apoi, în fișierul HTML între etichete post următorul cod:

Acum să vedem ce înseamnă toate acestea:

Link # tradus din engleză înseamnă „link”. În acest fel, arătăm browserului că ceea ce vom vorbi în continuare este un link. rel= # cu acest atribut arătăm cum se leagă fișierul CSS cu fișierul HTML. "stylesheet" # și anume că fișierul CSS este o foaie de stil în cascadă. type="text/css" # totul este simplu aici: acesta este o indicație că fișierul este scris format textși are extensia .css href="style.css" # acesta este un link către un fișier cu stiluri CSS.

În opinia mea, acesta este cel mai preferat mod de a include stiluri CSS.

Scriem stiluri direct în fișierul HTML (prima metodă)

Următorul mod de a specifica stilurile CSS este să le scrieți direct în documentul HTML. Arata cam asa:

Dacă ne uităm la modul în care acest document HTML va fi afișat în browser, vom vedea că textul dintre etichete s-a înroșit. Și folosind atribut de stil, spunem că în continuare avem parametrii de stil de afișare. Culoare este un selector responsabil pentru culoare. roșu este valoarea acestui selector. În acest fel putem evidenția un anumit tip afișarea unor părți individuale ale textului.

Plasarea foilor de stil în cascadă în interiorul HTML (a doua metodă)

O altă modalitate de a include stiluri CSS este plasarea tabelelor în cascadă în interiorul fișierului HTML în sine. În opinia mea, aceasta metoda nu este cel mai convenabil, deoarece folosindu-l, analiza codului site-ului devine nu foarte convenabilă. Pentru a începe să scrieți stiluri CSS, trebuie doar să inserați etichete în fișierul HTML . În practică arată astfel:

Iată un exemplu: afișarea stilurilor CSS într-un document HTML

Vă rugăm să rețineți că în interiorul etichetei scriem și codul conform Reguli CSS, folosind bretele. În articolele următoare voi vorbi mai detaliat despre regulile de sintaxă în CSS.

Conectarea mai multor fișiere CSS la un document HTML.

Regulile HTML permit ca mai multe fișiere CSS să fie incluse simultan. Mulți webmasteri folosesc acest lucru: creează fișiere CSS separate pentru text și imagini. Sau fișiere separate pentru antet, subsol și corpul principal al paginii. Să ne dăm seama cum să implementăm acest lucru.

Creăm mai multe fișiere cu stiluri CSS. Numele lor să fie style-1.css și style-2.css. O plasăm, ca în metoda numărul unu, în același folder cu fișierul HTML.

Iată un exemplu: afișarea stilurilor CSS într-un document HTML

Totul este similar cu prima metodă, doar în în acest caz, oferim link-uri către două fișiere simultan.

Link la fișierul CSS din interior la un fișier de același tip.

Pe lângă toate metodele de mai sus, există o metodă care vă permite să plasați link-uri către multe altele într-un singur fișier CSS!

Aceasta este implementată după cum urmează:
În primul rând, trebuie să conectăm cel puțin un fișier CSS la codul tău în același mod.

În al doilea rând, introduceți următorul cod în fișierul deja conectat:

@import url("style-2.css");

Această linie se conectează la fișierul nostru fișier suplimentar CSS. Dacă întâmpinați dificultăți în conectarea CSS, îi puteți întreba în comentarii.
După cum am învățat din cele două lecții anterioare, tehnologia CSS este cel mai puternic instrument, pe care orice webmaster ar trebui să-l stăpânească! Pentru a îmbunătăți asimilarea materialului, am decis să adaug un videoclip de instruire + test pentru a consolida informațiile primite la finalul fiecărei lecții.

Test de fixare a materialului:

Trebuie să includem fișierul CSS prin plasarea unui link către acesta în fișierul HTML. Care dintre următoarele metode este corectă?

Opțiunea 1:

Opțiunea 2:

Opțiunea 3:

Opțiune 4:

Putem plasa cascade CSS direct în fișier HTML?

Astăzi vreau să vorbesc despre ce sunt stilurile, cum să creez un fișier de stil și cum să-l folosești.

CSS mese în cascadă stiluri. Dosar special(sau mai multe fișiere), care este responsabil pentru designul paginii. Are o extensie *.css. Acest fișier conține parametri care vor fi aplicați anumitor elemente din pagină.

Să creăm un fișier de stil pas cu pas și să îi adăugăm mai mulți parametri pentru pagina web.

1. Să creăm o pagină HTML.

Am pus acest cod in el:

Cam asa arata pagina:

2. Al doilea pas este crearea unui fișier style.css

(acest lucru se face printr-un bloc de note: creați un fișier, faceți clic pe „salvare ca”, puneți toate fișierele în parametrul tip fișier, puneți style.css în nume). Nu vom scrie nimic în fișier deocamdată. Să-l salvăm.
3. Acum, pentru ca foaia de stil să funcționeze, trebuie să o atașăm la pagina HTML.

Acest lucru se face astfel:

În eticheta HEAD trebuie să scrieți o linie:

Fișierul meu de stiluri se află în același folder cu fișierul Pagini HTML, așa că ofer doar numele. Dacă stilurile dvs. sunt, de exemplu, în folderul css, atunci ar trebui să scrieți href="css/style.css" .

Nimic nu s-a schimbat încă pe pagina noastră:

4. Acum puteți începe să scrieți stiluri.

Să deschidem fișierul style.css folosind Notepad și să scriem regula pentru antet în el:

H1 (dimensiune font: 18px; familie font: Arial;)

Reîmprospătăm pagina și vedem că nimic nu s-a schimbat.

Pentru ca modificările să intre în vigoare, trebuie să adăugați la eticheta dorită atribut de clasă= „nume stil”.

Să adăugăm atributul class="h1" la eticheta h1. Rezultatul ar trebui să se schimbe acum:

De fapt, stilul pe care îl specificăm printr-un punct, cum ar fi .h1, este universal. Putem aplica acest stil nu numai pentru h1, ci și pentru un paragraf, o listă, un element de listă și așa mai departe. Poți să încerci.

5. Acum să setăm un stil pentru un paragraf simplu. Să facem asta într-un mod diferit.

Să adăugăm următoarele în foaia de stil:

P (familie de font:Verdana; culoare:#cc0000;)

Să reîmprospătăm pagina. După cum ați observat, nu am adăugat un atribut de clasă aici, iar paragrafele s-au schimbat, ambele. Cert este că am introdus „p” în stilurile fără punct. Aceasta înseamnă că pentru întreaga pagină la care este legat aceasta masa stiluri, am reatribuit parametrii etichetei paragraf. Indiferent dacă are Opțiuni suplimentare sau nu.

6. Acum să ne uităm la o altă modalitate de a atribui stiluri.

Să adăugăm următoarea linie la foaia de stil:

p#abc (familie font:Arial; dimensiune font:14px; culoare:#c0c0c0;)

După cum puteți vedea, al doilea paragraf s-a schimbat. Dacă vă amintiți, am atribuit identificatorul id="abc" acestui paragraf. Linia noastră din foaia de stil înseamnă doar asta această regulă va fi valabil doar pentru acele paragrafe care au id=”abc”.

7. Să începem cu lista.

Să adăugăm următoarele reguli la foaia de stil:

ul (chenar:1px solid #000000; culoarea fundal:#CCCCCC;)

li (dimensiune font: 16px; culoare:#FF0000; text-decor: subliniat;)

După cum puteți vedea, în jurul listei noastre a apărut un cadru, fundalul a devenit gri, iar elementele din listă sunt roșii și subliniate.

Indiferent dacă stilizați textul cu CSS sau cu elemente de formular, se procedează în același mod. Principalul lucru este să înțelegeți structura reguli CSS, iar restul sunt fleacuri.

Acesta este rezultatul final al muncii noastre.

Nu a fost niciun scop să facă din asta o capodopera, așa că te rog nu mă certa. Principalul lucru este că înțelegeți cum funcționează CSS.
__
Cu sprijinul Everalp.ru - lucrări de acoperiș.

Felicitări! Fișierul dvs. este gata. Este gol pentru moment, dar mai târziu poate fi umplut cu conținut relevant. Mai jos ne vom uita la elementele de bază - modalități de a conecta css.

Foi de stil externe

Atenţie

Linia cu eticheta link presupune că style.css se află în același director (dosar) ca fișierul nostru (de exemplu, index.html). Dacă locația fișierului css s-a schimbat, atunci atributul href trebuie modificat în consecință. De exemplu, se întâmplă adesea ca CSS să fie folosit pentru a crea folder separat(ceea ce este convenabil și logic). Dar atunci atributul href va arăta diferit:

Foi de stil interne

Text de culoare albastră, dimensiune 14 pixeli

Avantajul este că puteți seta imediat stiluri în același fișier. Un dezavantaj semnificativ este că proprietățile specificate vor fi atribuite doar unui anumit element, în acest caz un paragraf. Deci toate beneficiile conexiune la distanță proprietățile se pierd.

Foi de stil încorporate

Antet de primul nivel

Titlu de al doilea nivel, albastru

Titlu de nivel al treilea

Din exemplu puteți vedea că am scris stilurile chiar înainte de închidere etichetă de capîn interiorul etichetelor de deschidere și de închidere stil. De fapt, etichetați stil poate fi și scris în corp, dar dacă vrei ca postările tale să pară structurate și ca persoana care vede acest cod după tine să nu-l apuce de cap, atunci este mai bine să scrii stiluri într-un singur loc.

Dezavantajul foii de stil încorporate este, de asemenea, evident - astfel de intrări vor trebui făcute pentru fiecare pagină separat.

Ce este necesar pentru a crea un server CS:S

1 - Cum se creează un server în css?

Postat inițial de autor:

Mai întâi trebuie să înțelegeți internetul. Deci, 1 Mb (megabit) este suficient, problema este în canalul de ieșire! (Permiteți-mi să vă explic imediat: incoming este viteza de conectare cu care computerul dvs. poate primi date de pe Internet, iar outgoing este viteza de conectare cu care computerul dvs. poate transmite date în rețea). Deci, pentru fiecare jucător de pe serverul css pe care l-ați creat trebuie să aveți cel puțin 50 Kb. Vizitați site-ul 2ip.ru. Notează-ți imediat adresa IP (este scrisă în partea de sus în număr mare), selectează un test de viteză a conexiunii, introduceți codul de confirmare și faceți clic pe butonul „test”. Dacă cel de intrare este sub 1000Kb/s (KiloBits pe secundă), iar cel de ieșire este sub 500Kb/s, nici măcar nu vă obosiți să creați un server cs.

Postat inițial de autor:

Deci, să ne imaginăm cum sunteți conectat la Internet atunci când aveți o adresă de rețea externă:
Computerul dvs. - ISP - Internet
Dar acest aranjament nu va funcționa:
Computerul dvs. - rețea locală - furnizor - Internet
Sunați-vă furnizorul și întrebați dacă aveți sau nu un IP extern. Aș dori să fac o remarcă: dinamismul adresei nu are nicio legătură cu performanța. Cu alte cuvinte, chiar dacă de fiecare dată când te conectezi la Internet tu adresa noua, serverul dvs. va fi în continuare vizibil pentru contragrevă sub acest IP, dar cu condiția ca acesta să fie extern.

Postat inițial de autor:

Configurația computerului trebuie să fie acceptabilă. Adică pentru Windows XP sau Linux - 512Mb (megaBYTE) memorie cu acces aleator pentru 20 de persoane sau, respectiv, Windows Vista/7/8/ - 1Gb. De asemenea, este recomandabil să vă aprovizionați cu un procesor cu 2 sau mai multe nuclee, astfel încât să vă puteți juca confortabil în timp ce vă conectați în timp ce faceți alte lucruri la computer. Nu este recomandat să jucați counter strike pe același computer pe care rulează serverul (2x procesor nuclear rezolvă parțial această problemă). Pentru a verifica performanța sistemului, rulați counter strike și instalați totul setări grafice la maximum - dacă computerul nu încetinește, atunci este complet potrivit pentru nevoile dvs.
Să presupunem că aveți tot ce aveți nevoie. Să trecem la creație.

Cum să vă creați propriul server CS:S

Mai întâi trebuie să descărcați hldsupdatetool
Îl puteți descărca aici ----> Descărcați
Dezarhivați
Când rulați fișierul din arhivă, vi se va cere să alegeți unde să instalați hldsupdatetool, acest lucru se poate face oriunde, important este ca acest folder să devină ulterior folderul Server, voi da un exemplu cu unitatea C:

Selectați Europa și faceți clic pe Următorul. Apoi, se va deschide o altă fereastră și în ea faceți clic pe Următorul și Terminați

Accesați folderul în care a fost instalat hldsupdatetool (în în acest exemplu C:\Server). Rulați fișierul HldsUpdateTool.exe, în urma căruia se vor deschide două ferestre și va porni HldsUpdateTool.exe
actualizați-vă, deoarece nu aveți cea mai recentă versiune, ecranul poate fi văzut mai jos:
Actualizarea nu va dura mai mult de 1 minut! După care fereastra se va închide singură.

După actualizarea HldsUpdateTool, mergeți la folderul cu serverul (în acest exemplu, C:\Server). Acum trebuie să descarcăm serverul, pentru aceasta creăm fișierul Update.bat
Pe desktop, faceți clic butonul corect mouse Creare\ Document text
Lipim acest cod în el:

Postat inițial de autor:

Porniți / așteptați hldsupdatetool.exe
porniți / așteptați hldsupdatetool.exe -actualizare comandă -joc " Sursa contra-atacului" -dir .
Ieșire

Postat inițial de autor:

@echo dezactivat
cls
echo Protejarea srcd-urilor de blocări...
echo Dacă doriți să închideți srcds și acest script, închideți fereastra srcds și tastați Y în funcție de limba dvs., urmat de Enter.
titlu
:srcds
:buclă
echo (%date% %time%) srcds a început.
start /wait srcds.exe -console -game cstrike -tickrate 66 -port 27015 +fps_max 600 +maxplayers 12 +map de_dust2
du-te la srcds
echo (%date% %time%) AVERTISMENT: srcds închis sau blocat, repornind.
du-te în buclă

Aspectul bloc este adesea folosit la crearea unui site web sau blog. Ca o consecință a acestui fapt, este adesea necesară indentarea blocurilor. Din acest motiv, aproximativ cum să indentați în CSS descrisă în detaliu în această lecție. Pentru browser, fiecare etichetă este un container care are conținut, umplutură, marginile externe, precum și un cadru. În această lecție vom învăța cum să facem indentări interne și externe și să luăm în considerare principalii lor parametri.

Figura de mai jos arată clar parametrii de indentare a blocului:

După cum puteți vedea, liniuțele pot fi făcute în patru direcții: liniuță de sus (sus), liniuță de jos (jos), liniuță din stânga (stânga) și liniuță din dreapta (dreapta). Unitățile de măsură pot fi pixeli, procente și altele. unități CSS- mai multe despre ei. Acest tutorial folosește pixeli.

Blocuri de umplutură

Proprietatea responsabilă pentru completarea în CSS este căptușeală. Deci, să ne uităm la un exemplu de setare a umpluturii interne pentru un bloc:

padding-top: 5px; /*padding-ul de sus*/ padding-left: 8px; /*padding stânga*/ padding-dreapta: 8px; /*padding dreapta*/ padding-bottom: 5px; /*umplutură de jos*/

În acest exemplu, umplutura este setată separat pentru fiecare parte a blocului. În plus, există mai multe moduri de a seta indentarea în CSS:

margine: 5px 8px 5px 8px; /*margini sus, dreapta, jos, stânga*/ margine: 5px 8px 5px; /*descrie marginile de sus, stânga, dreapta, jos*/ margine: 5px 8px; /*descrie marginile de sus și de jos, din dreapta și din stânga*/ margine: 7px; /*descrie toate umpluturile interne de 7px*/

Este mai ușor să-l amintești pe primul și ultimele moduri. În primul caz, indentațiile sunt plasate în sensul acelor de ceasornic (sus, dreapta, jos, stânga) - putem specifica orice cantitate de indentare, în funcție de acest din urmă caz adânciturile de pe toate părțile vor fi aceleași.

Blocați marginile

Proprietatea responsabilă pentru marjele în CSS este marginea. Exemple de marje în CSS:

margine-sus: 5px; /*margine de sus*/ margine-stânga: 10px; /*marginea din stânga*/ marginea-dreapta: 10px; /*margine din dreapta*/ margine-jos: 5px; /*marginea de jos*/

umplutură: 5px 10px 5px 10px; /*margini sus, dreapta, jos, stânga*/ padding: 5px 10px 5px; /*descrie umplutura de sus, stânga și dreapta, de jos*/ padding: 5px 10px; /*descrie umplutura de sus și de jos, dreapta și stânga*/ padding: 7px; /*descrie toate marginile de 7px*/

Prin urmare, cum să indentați în CSS- întrebarea nu este dificilă, dar foarte relevantă. Pentru a înțelege mai bine informațiile descrise mai sus, ar trebui să rețineți că există două proprietăți: padding - indentări interne și margine - indentări externe. De asemenea, după cum știți deja, există mai multe moduri de a seta indentări, le puteți utiliza.