CSS Syntax
Selectorul elementului
ID - ul selectorul
Selectorul de clasă (for all elements)
Selectorul de clasă (for only <p> elements)
gruparea selectoare
CSS Backgrounds
Setați culoarea de fundal a unei pagini
Setați culoarea de fundal a diferitelor elemente
Setați o imagine ca fundal al unei pagini
Cum se repeta o imagine de fundal numai pe orizontală
Cum de a poziționa o imagine de fundal
O imagine de fundal fix (this image will not scroll with the rest of the page) se (this image will not scroll with the rest of the page)
Toate proprietățile de fond într - o singură declarație
Exemplu avansat de fundal
Proprietățile de fundal explicate
CSS Borders
Setați lățimea celor patru frontierelor
Setați lățimea marginii de sus
Setați lățimea marginii de jos
Setați lățimea marginii din stânga
Setați lățimea marginii din dreapta
Setați stilul celor patru frontierelor
Setați stilul de marginea de sus
Setați stilul de frontiera de jos
Setați stilul de frontiera din stânga
Setați stilul de marginea dreaptă
Setați culoarea celor patru frontierelor
Setați culoarea de la marginea superioară
Setați culoarea frontierei de jos
Setați culoarea frontierei de stânga
Setați culoarea marginea dreaptă
Toate proprietățile de frontieră într - o singură declarație
Setați diferite frontiere pe fiecare parte
Toate proprietățile de frontieră de top într - o singură declarație
Toate proprietățile de frontieră de jos într - o singură declarație
Toate proprietățile rămase de frontieră într - o singură declarație
Toate proprietățile chenarul din dreapta într - o singură declarație
Proprietățile de graniță a explicat
CSS Margins
Se specifică marje diferite pentru fiecare parte a unui element
Să marja rămasă să fie moștenită de la elementul părinte
Proprietatea Marja de stenografie
Setați marja la auto pentru a centra elementul său în interiorul containerului
CSS Padding
Setați capitonarea din stânga a unui element
Setați capitonarea drept al unui element
Setați capitonarea de sus a unui element
Setați capitonarea inferioară a unui element
Toate proprietățile de umplutură într - o singură declarație
CSS Text
Setați culoarea textului de elemente diferite
Aliniați textul
Scoateți linia de sub link - uri
Decorați textul
Controlați literele într - un text
Text Indentați
Se specifică spațiul dintre caractere
Se specifică spațiul dintre liniile
Setați direcția textului unui element
Creșterea spațiul alb dintre cuvinte
Dezactivarea ambalaj text în interiorul unui element
Alinierea verticala a unei imagini în interiorul textului
CSS Fonts
Setați fontul unui text
Setați dimensiunea fontului
Setați dimensiunea fontului în px
Setați dimensiunea fontului în em
Amplasat în procente și le dimensiunea fontului
Setați stilul fontului
Setați varianta a fontului
Setați cutezanța fontului
Toate proprietățile fontului într - o singură declarație
CSS Links
Adăugați culori diferite pentru link - uri vizitate / nevizitate
Utilizarea de text-decoration pe link - uri
Specificați o culoare de fundal pentru link - uri
Adăugați alte stiluri de hyperlink - uri
Avansat - Creați cutii link
Avansat - Crearea cutii de legătură cu frontiere
CSS Lists
Toate diferitele markeri element listă în liste
Setați o imagine ca marcator listă de element
Poziționați marcatorul lista de element
Toate lista de proprietăți într - o singură declarație
Liste de stil cu culori
Full-lățime Lista marginita
CSS Tables
Specificați un chenar negru pentru masă, elemente de mii, și TD
Utilizarea de frontieră-colaps
Singur chenar în jurul mesei
Se specifică lățimea și înălțimea unui tabel
Setați alinierea orizontală a conținutului (text-align)
Setați alinierea verticală a conținutului (vertical-align)
Se specifică capitonarea pentru elementele - lea și al td
separatoare orizontale
Tabel Hoverable
tabele Striped
Precizați culoarea frontierelor de masă
Setați poziția legenda tabel
Tabelul Sensibilă
Creați un tabel de fantezie
Proprietățile tabelului explicat
CSS Box Model
Specificați un element cu o lățime totală de 250px
CSS Outline
Desenați o linie în jurul unui element (outline)
Setați stilul unui contur
Setați culoarea unui contur
Setați lățimea unui contur
CSS Dimension
Setați înălțimea și lățimea unui element
Set max-lățime a unui element
Setați înălțimea și lățimea de elemente diferite
Setați înălțimea și lățimea unei imagini utilizând procente
Set min lățime și max-lățime a unui element
Set min-max înălțime și pe înălțime a unui element
Proprietățile Dimension explicate
CSS Display
Cum de a ascunde un element (visibility:hidden)
Cum nu pentru a afișa un element (display:none)
Cum de a afișa un element de nivel bloc ca un element inline
Cum de a afișa un element de linie ca un element de nivel bloc
Cum de a utiliza CSS pentru a împreună cu JavaScript pentru a afișa conținut ascuns
Proprietăți de afișare a explicat
CSS Positioning
Poziționați un element în raport cu fereastra browser - ului
Poziționați un element în raport cu poziția sa normală
Poziționați un element cu o valoare absolută
elemente suprapunerea
Setați forma unui element
Cum de a crea o bară de defilare atunci când conținutul unui element este prea mare pentru a se potrivi
Cum de a seta browser - ul să se ocupe în mod automat preaplin
Setați marginea superioară a unei imagini folosind o valoare a pixelilor
Setați marginea de jos a unei imagini folosind o valoare a pixelilor
Setați marginea din stânga a unei imagini folosind o valoare a pixelilor
Setați marginea din dreapta a unei imagini folosind o valoare a pixelilor
Schimbarea cursorului textul imaginii Poziție (top left corner)
Text imagine Poziția (top right corner)
Text imagine Poziție (bottom left corner) din (bottom left corner)
Text imagine Poziția (bottom right corner) din (bottom right corner)
Text imagine Poziția (centered)
Proprietățile de poziționare a explicat
CSS Floating
O utilizare simplă a proprietății float
O imagine cu chenar și margini care plutește spre dreapta într - un paragraf
O imagine cu o legendă care plutește spre dreapta
Să prima literă a unui paragraf float la stânga
Creați o galerie de imagini cu proprietatea float
Dezactivarea flotor (using the clear property)
Crearea unui meniu orizontal
Crearea unei pagini de pornire fără tabele
CSS Aligning Elements
Centrul de aliniere cu marja
Stânga / Dreapta oscilanți cu poziția
Stânga / Dreapta alinierea cu poziția - soluție crossbrowser
Stânga / Dreapta cu plutitor oscilanți
Stânga / Dreapta aliniind cu flotor - soluție crossbrowser
Alinierea proprietăților explicate
CSS Combinators
selector descendentul
selector pentru copii
Selector Sibling Adiacent
Selector general Sibling
Selectoare Combinator explicat
CSS Generated Content
Introduceți URL - ul în paranteză după fiecare legătură cu proprietatea de conținut
Numerotare secțiuni și subsecțiuni cu "Section 1", "1.1" , "1.2" , etc.
Se specifică ghilimelele cu proprietatea citate
CSS Pseudo-classes
Adăugați culori diferite la un hyperlink
Adăugați alte stiluri de hyperlink - uri
Utilizarea: focus
:first-child - se potrivesc cu primul element p
:first-child - se potrivesc cu primul element i în toate elementele p
:first-child - se potrivesc toate elementele i în toate elementele p primul copil
Utilizarea de :lang
CSS Pseudo-elements
Asigurați prima literă specială într - un text
Asigurați prima linie specială într - un text
Asigurați prima literă și prima linie speciala
Utilizare: înainte de a introduce conținut înaintea unui element
Utilizare: pentru a introduce după conținut după un element
CSS Navigation Bars
Bara de navigare pe verticală Complet stil
Complet stil bara de navigare orizontală
CSS Dropdowns
Text dropdown
meniul drop - down
Meniul drop - down-aliniat dreapta
imagine dropdown
Bara de navigare Dropdown
CSS Tooltips
tooltip pe dreapta
tooltip pe stânga
tooltip Sus
tooltip de fund
Tooltip cu săgeată
Animate tooltip
CSS Image Gallery
Galerie de imagini
Receptivă Galerie de imagini
CSS Image Opacity
Crearea de imagini transparente - efect mouseover
Crearea unei cutie transparentă cu text pe o imagine de fundal
CSS Image Sprites
O imagine sprite
O imagine sprite - o listă de navigare
O sprite imagine cu efect Hover
CSS Attribute Selectors
Selectează toate <a> elemente cu un atribut țintă
Selectează toate <a> elementele cu un target = „_ blank“ atribut
Selectează toate elementele cu un atribut titlu care conține o listă separată cu spațiu de cuvinte, dintre care unul este "flower"
Selectează toate elementele cu o valoare atribut de clasă , care începe cu "top" de "top" (must be whole word)
Selectează toate elementele cu o valoare atribut de clasă , care începe cu "top" de "top" (must not be whole word)
Selectează toate elementele cu o valoare atribut de clasă care se termină cu "test"
Selectează toate elementele cu o valoare atribut de clasă care conține "te"
Caracteristica selectoare a explicat
CSS Forms
Câmp de intrare Full-lățime
Câmp de intrare căptușită
Câmp de intrare marginita
Câmp de intrare de jos bordură
Câmpurile de introducere colorate
Câmpurile de introducere focusate
Câmpurile de introducere focusate 2
Intrare cu pictograma / imagine
Animate de intrare pentru căutarea
textarea Styling
Styling selectați meniuri
Styling Butoane de intrare
CSS Counters
Creați un contor
Contoare imbricate 1
Contoare imbricate 2
CSS3 Rounded Corners
Adăugați colțuri rotunjite la elemente
Runda fiecare colț separat
Creați colțuri eliptice
Colțuri rotunjite CSS3 explicat
CSS3 Border Images
Crearea unei imagini de frontieră în jurul unui element, folosind cuvântul cheie rotund
Crearea unei imagini de frontieră în jurul unui element, folosind cuvântul cheie întindere
Imagine de frontieră - valori diferite felie
CSS3 imagini de frontieră a explicat
CSS3 Backgrounds
Adăugați mai multe imagini de fundal pentru un element
Precizarea dimensiunii unei imagini de fundal
Scalarea o imagine de fundal cu ajutorul "contain" și "cover"
Definiți dimensiuni de imagini de fundal multiple
Full-dimensiunea imaginii de fundal (completely fill the content area) de (completely fill the content area)
Utilizați fundal origine pentru a specifica în cazul în care imaginea de fundal este poziționat
Utilizați fundal clip pentru a specifica zona de pictura de fundal
CSS3 Gradients
Gradient liniar - de sus în jos
Gradient liniar - stânga la dreapta
Gradient liniar - diagonala
Linear Gradient - cu un unghi specificat
Linear Gradient - cu opriri multiple culori
Linear Gradient - culoarea unui curcubeu + Text
Linear Gradient - cu transparență
Gradient liniar - un gradient linear repetitivă
Radial Gradient - opririle de culoare egal distanțate
Radial Gradient - opririle de culoare diferit distanțați
Radial Gradient - forma set
Radial Gradient - cuvinte cheie diferite dimensiuni
Radial Gradient - un gradient radial repetitivă
CSS3 Shadow Effects
Efect de umbră simplă
Adăugați o culoare la umbra
Adăugați un efect de estompare la umbra
Text alb cu umbra negru
O strălucire umbră roșie de neon
O strălucire umbră roșu și albastru neon
Text alb cu umbra negru, albastru, și darkblue
Adăugați o simplă cutie-umbra unui element
Adăugați culoare la box-shadow
Adăugați culoare și blur efect la box-shadow
Creați carduri-hârtie cum ar fi (text)
Creați carduri-hârtie cum ar fi (polaroid images)
Efecte de umbră CSS3 a explicat
CSS3 Text
Specificați modul în care este ascuns, conținutul overflowed trebuie semnalată utilizatorului
Cum de a afișa conținutul revărsată atunci când plasați cursorul peste elementul
Se lasă cuvinte lungi să fie în măsură să fie rupte și înfășurați pe linia următoare
Specificați reguli de linie de rupere
CSS3 Fonts
Folosiți - vă @font-face „proprii“ fonturi în @font-face regulă
Folosiți - vă @font-face "proprii" fonturi (bold) @font-face regula (bold)
CSS3 2D Transforms
translate() - muta un element din poziția sa actuală
rotate() - rotiți un element în sens orar
rotate() - rotiți un element în sens antiorar
scale() - creșterea unui element
scale() - reducerea unui element
skewX() - skews un element de-a lungul axei X
skewY() - skews un element de-a lungul axei Y
skew() - skews un element de-a lungul X și axa Y
matrix() - rotire, la scară, muta și oblic un element
CSS3 3D Transforms
rotateX() - se rotesc în jurul unui element de axa X sa la un anumit grad
rotateY() - se rotesc în jurul unui element Y axa sa la un anumit grad
rotateZ() - se rotesc în jurul unui element axa Z sale la un anumit grad
CSS3 3D Transformări a explicat
CSS3 Transitions
Lățimea de schimbare a unui element - Tranziție
Tranziție - lățimea și înălțimea de schimbare a unui element
Specifica diferite curbe de viteză pentru o tranziție
Specificați o întârziere pentru un efect de tranziție
Adăugați o transformare la un efect de tranziție
Precizați toate proprietățile de tranziție într - o singură proprietate stenografie
CSS3 Animations
Legați o animație la un element
Animație - schimbare de culoare de fundal a unui element
Animație - schimbare de culoare de fundal și poziția unui element
Amânați o animație
Run animație de 3 ori înainte de a se oprește
Pornește de animație pentru totdeauna
Rulați animație în direcția inversă
Alerga animație în cicluri alternative
Curbele de viteză pentru animații
Animație proprietate prescurtare
CSS3 Images
imagine rotunjit
imagine încercuite
Thumbnail image
Imagine miniatură ca link -
imagine receptivă
Imagine text (top left corner)
Imagine text (top right corner)
Imagine text (bottom left corner) din (bottom left corner)
Imagine text (bottom right corner) din (bottom right corner)
Textul din imagine (centered)
imagini Polaroid
Filtru de imagini în tonuri de gri
Avansat - Imagine Modal cu CSS & JavaScript
CSS3 Buttons
Butoane de bază CSS
culori Button
dimensiuni Button
butoane rotunjite
Colorate frontierele buton
butoane Hoverable
butoane Shadow
butoane cu handicap
lăţime buton
Grupuri Button
Mărginit grup buton
Butonul animate (Hover Effect)
Buton animate (Ripple Effect)
Buton animate (Pressed Effect)
CSS3 Pagination
paginare simplă
Paginare activă și hoverable
Paginarea activă și hoverable cilindrat
Efect de tranziție Hoverable
paginare marginita
Paginare bordură Rotunjit
Paginare cu spațiul dintre link - uri
dimensiune paginare
Paginare cu spațiul dintre link - uri
paginare Centrat
Firimituri de pâine
CSS3 Multiple Columns
Creați mai multe coloane
Se specifică diferența dintre coloane
Precizați stilul regulii între coloane
Se specifică lățimea regulii între coloane
Precizați culoarea regulii între coloane
Specificați lățimea, stilul și culoarea regula între coloane
Specificați câte coloane un element ar trebui sa acopere întreaga
Specificați o lățime optimă sugerată pentru coloanele
Coloane multiple CSS3 explicate
CSS3 User Interface
Lăsați un utilizator redimensiona lățimea unui element
Lăsați un utilizator redimensiona înălțimea unui element
Lăsați un utilizator redimensiona atât lățimea și înălțimea unui element
Adăugați spațiu între o schiță și granița unui element
CSS3 interfața cu utilizatorul a explicat
CSS3 Box Sizing
Lățimea elementelor fără cutie-dimensionare
Latimea elementelor cu box-dimensionare
Elemente de formular + box-dimensionare
Cutie CSS3 Dimensionarea explicat
CSS3 Flexbox
Flexbox cu trei elemente flex
Flexbox cu trei elemente flex - direcția rtl
flex-direcție - rândul-revers
flex-directie - coloana
flex-directie - coloana inversă
justifică-conținut - flex-end
justifică conținut - centru
justifică-conținut - spațiu între
justifică-conținut - spațiu în jurul valorii de
aliniați-elemente - întindere
aliniați-elemente - flex start-
aliniați-elemente - flex-end
aliniați-elemente - centru
aliniați-elemente - linia de bază
flex-wrap - nowrap
flex-folie - folie
flex-wrap - wrap-revers
alinia conținut - centru
Comanda elementele flex
Marja de -dreapta: auto;
Margin: auto; = Centrare perfectă
alinia auto pe elemente flex
Se specifică lungimea elementului flexibil, în raport cu restul elementelor flex
Creați un site receptiv cu flexbox
CSS3 Media Queries
Schimbarea culoare de fundal pentru a lightgreen în cazul în care portul de vizualizare este mai mare sau lățime 480 x
Afișați un meniu care va pluti la stânga paginii dacă portul de vizualizare este mai mare sau lățime 480 x
Interogări media CSS3 a explicat
CSS3 Media Queries - More Examples
Pagina HTML
Lățime de la 520 la 699px - Aplicați o pictogramă de e - mail pentru fiecare link
Lățime de la 700 la 1000px - Prefață legăturile cu un text
Lățime de mai sus 1001PX - Aplicați adresa de e - mail pentru link - uri
Lățimea de mai sus 1151px - Adăugați o pictogramă ca am folosit înainte
Utilizați lista de link - uri de e - mail pe o bară laterală într - o pagină web
Media CSS3 interogări exemple explicate