← Nazaj na funkcije
Free

CSS Inšpektor

CSS Inšpektor je zmogljivo, brezplačno orodje za razvijalce, ki vam omogoča, da premaknete kazalec nad katerikoli element na spletni strani in takoj vidite njegove izračunane CSS lastnosti.

Ne glede na to, ali odpravljate težave s postavitvijo ali preučujete spletno mesto, ki vam je všeč, CSS Inspector ponuja vse, kar potrebujete, v čisti plavajoči plošči. Pregledujte enostavno brez odpiranja brskalnikovih DevTools.

Predogled v živo
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
Ključne lastnosti

Prikaz lastnosti v realnem času

Takoj si oglejte pisave, velikosti, barve, razmike in še več, ko z miško pojdite čez kateri koli element.

Kliknite za zaklepanje

Kliknite na element, da ploščo zaklenete, da ne izgine, kar omogoča podroben pregled.

Urejanje slogov v živo

Dvakrat kliknite na vrednosti, da jih neposredno spremenite. Vaši popravki se takoj odrazijo na strani.

Kopiranje z enim klikom

Z enim klikom kopirajte posamezne lastnosti ali celoten blok slogov v odložišče.

Vizualizacija box modela

Vizualno si oglejte vrednosti odmikov (margin), obrob (border) in notranjih odmikov (padding).

Velikost in položaj elementa

Prikaže širino, višino in položaj elementa na strani.

Kaj lahko preverite

CSS Inspector prikazuje več kot 40 lastnosti:

Tipografija

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Box Model

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Postavitev

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Ozadje

  • background-color
  • background-image
  • background-size
  • background-position

Učinki

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Pogosti primeri uporabe

Odpravljanje težav s postavitvijo

Natančno preglejte neporavnane elemente.

Učite se iz obstoječih dizajnov

Preučite sloge svojih najljubših spletnih mest.

Hitri dizajnerski poskusi

Preizkusite spremembe, preden napišete kodo.

Pregledi s strankami

Pokažite spremembe v živo med sestanki.

Ekstrakcija slogov

Preprosto pridobite kodo CSS za nove elemente.

Kako uporabljati
1

Aktivirajte CSS Inspector

Kliknite ikono CSS Inspector v orodni vrstici DevSuite Pro.

2

Pregled s pomikom miške

Premaknite kazalec čez kateri koli element, da vidite njegove lastnosti.

3

Kliknite za zaklepanje

Kliknite na element, da ploščo pripnete.

4

Uredite sloge

Dvakrat kliknite na vrednosti, da jih prilagodite.

5

Kopirajte in uporabite

Kopirajte posodobljeno kodo in jo uporabite v svojem projektu.

Pripravljeni na poskus? CSS Inšpektor?

Namestite DevSuite Pro brezplačno in odklenite več kot 39 orodij za razvijalce za svoj brskalnik.

Dodaj v Chrome Dodaj v Edge Dodaj v FireFox