Introducere în comenzile CSS
CSS reprezintă Cascading Style Foets. Este utilizat pentru a descrie prezentarea documentului care este scris într-un limbaj de marcare, cum ar fi HTML. Face lucrarea de separare a prezentării și a conținutului, care include aspect, culori și fonturi diferite. Separarea oferă flexibilitate și, de asemenea, controlul diferitelor caracteristici care permit mai multor pagini web să partajeze formatarea, specificând CSS relevante. Specificațiile CSS sunt menținute de World Web Consortium. În afară de aceasta, oferă și reguli specifice care ajută la formatarea alternativă dacă este accesat conținutul de pe un dispozitiv mobil.
Comenzi CSS de bază
1. Sintaxa CSS: Există un set de reguli care trebuie respectate în comanda CSS. Setul de reguli CSS constă dintr-un selector și un bloc de declarații. Selectorul este folosit pentru a indica elementul HTML pe care utilizatorul ar dori să îl creeze. Blocul de declarații poate conține una sau mai multe declarații care pot fi separate prin punct și virgulă. Fiecare declarație ar trebui să includă un nume de proprietate cu valoarea acesteia și acestea separate prin puncte.
2. Selector ID : Selectorul ID poate utiliza id-ul unui atribut al elementului HTML și poate ajuta la selectarea unui anumit element. Este utilizat pentru a selecta un element unic, iar acest element ar trebui să fie unic pentru pagina respectivă. Pentru a selecta un element cu un anumit id, „#” este utilizat și acesta este urmat de id-ul acelui element.
3. Selector de clase: Pentru a selecta un anumit atribut de clasă, selectorul de clase este utilizat pentru a selecta elementele din acea clasă. Pentru a utiliza elementele dintr-o anumită clasă, se folosește un caracter (.). Este urmată de numele clasei. În acest sens, dacă utilizatorul dorește ca numai anumite elemente să fie utilizate, atunci doar acestea pot fi specificate de o clasă.
4. Gruparea selectoarelor: Există momente în care elementele au aceleași definiții de stil. O opțiune mai bună este să le grupezi și să minimalizezi codul. Pentru grup, utilizatorul selectorului poate folosi o virgulă și poate separa fiecare selector
5. Comentarii: Aceste comenzi CSS sunt recomandate pentru a fi utilizate la scrierea codului. Ele dau claritate în ceea ce privește ceea ce face codul și te ajută pe tine sau pe altcineva nou la cod să lucreze în consecință. Comentarii sunt ignorate de browsere. Un comentariu CSS începe și se termină cu / * * /.
6. Display: Block - Multe elemente HTML sunt setate la acest mod de afișare. În mod implicit, elementele de nivel de bloc ocupă cât mai mult spațiu și nu pot fi plasate pe aceeași linie cu niciun alt mod de afișare. Este posibil să câștigați capacitatea de a schimba înălțimea și lățimea elementului conform dorinței dvs.
7. Culori în CSS: În aceste comenzi CSS, culorile pot fi specificate în formula RGB. Fiecare parametru definește intensitatea acestor culori și definește o culoare nouă. De exemplu, pentru a afișa culoarea neagră, toți parametrii de culoare trebuie să fie setați la RGB (0, 0, 0).
8. Culoarea fundalului: proprietatea culorii de fundal definește culoarea care trebuie setată pentru fundalul unui element. Culoarea poate fi ușor definită dând un nume de culoare, adăugând o valoare Hex sau setând o valoare RGB
9. Imagine de fundal: Imaginea de fundal poate fi setată la orice imagine specială la alegere. Odată ce imaginea este setată, aceasta se repetă și acoperă întregul element.
10. Margini CSS: Comanda CSS are proprietăți de marjă diferite, care pot ajuta la crearea de spațiu în jurul diferitelor elemente și, de asemenea, definește aceste granițe. CSS poate avea proprietăți precum marginea de sus, marginea-dreapta, marginea de jos și marginea-stânga.
Comenzi CSS intermediare
1. Selectoare de clasă și de identificare: în plus față de eticheta HTML, un utilizator poate defini selectori proprii care pot fi sub formă de clasă sau de ID. Principala utilizare a acestora este că puteți avea același element HTML și să îl prezentați diferit pe baza ID-ului sau a clasei care este necesară.
2. Pseudo-class: Aceste clase sunt utilizate pentru a specifica o anumită stare sau o relație cu un anumit selector. Aceste clase pot lua, de asemenea, forma selectorului: pseudo_class (property: value; ). Această clasă este definită prin simpla acordare a unui punct între selector și pseudo-clasă.
3. Formatare text: textele care se adaugă pot fi personalizate și formatate prin utilizarea proprietăților de formatare. Culoarea poate fi modificată folosind cuvântul cheie „culoare”. La fel și alinierea textului. Făcând uz de text-decorațiuni pot fi setate și eliminate. Transformările se pot face cu privire la cazuri.
4. Fonturi CSS: Fonturile din CSS au diferite familii precum familia generică și familia de fonturi. Familia de fonturi este o familie de texte. Cel generic având un grup de familii cu aspect similar și font unul cu un tip specific.
5. Icoane: Utilizând biblioteca de pictograme și adăugând numele pictogramelor clasei de pictograme specificate pot fi ușor utilizate în CSS.
6. Tabele: CSS poate afișa, de asemenea, tabele și ajută la personalizarea cu marginile, lățimea și înălțimea lor. Folosind cuvinte cheie precum „graniță”, „lățime” și înălțime, utilizatorul poate avea cu ușurință tabele pe o pagină web.
7. Poziționare: Această proprietate specifică tipul metodei de poziționare care poate fi folosită pentru orice element. Această poziție poate fi statică, relativă, fixă, absolută sau lipicioasă.
8. Debord: Această proprietate ajută la controlul conținutului prea mare pentru a se încadra într-o zonă.
9. Float: Proprietatea float permite elementului să știe cum ar trebui să plutească. Acesta specifică ce elemente pot pluti lângă elementele eliminate.
10. Opacitate: Această proprietate definește opacitatea sau transparența oricărui element.
Comenzi CSS avansate
1. CSS Colțuri rotunjite: Utilizând proprietatea „rază de frontieră”, un element poate fi dat colțuri rotunjite. De asemenea, puteți specifica un anumit colț din cele patru colțuri și puteți efectua modificările după alegerea dvs.
2. Imagini de bordură: Puteți seta o imagine ca graniță în jurul oricărui element. Acest lucru este posibil prin utilizarea unei proprietăți de imagine de frontieră. Preia imaginea și o feliază în nouă secțiuni și apoi așează colțurile la colțuri și secțiunile din mijloc sunt repetate sau întinse.
Sfaturi și trucuri pentru a utiliza comenzile CSS:
- Utilizați reset.css și resetați toate stilurile fundamentale.
- Utilizați Shorthand CSS pentru a avea o modalitate mai scurtă de a scrie codurile CSS de comandă.
- Utilizați instrumente de depanare CSS pentru a modifica, înțelege și debuga stilurile de comandă CSS.
Concluzie
Comanda CSS vă ajută să păstrați separat conținutul informațional al unui document și vă ajută la afișarea acestuia. Vă ajută să evitați duplicarea, să mențineți codul cu ușurință și să utilizați același conținut cu stiluri diferite.
Articole recomandate
Acesta a fost un ghid pentru comenzile CSS. Aici am discutat comenzile de bază, intermediare, precum și avansate CSS. De asemenea, puteți consulta articolul următor pentru a afla mai multe -
- Comenzi de top MySQL
- Comenzi PL / SQL
- Cum se utilizează comenzile SQL
- Comenzi unghiulare