Co to jest format pliku CSS?
Pliki .css służą do formatowania treści i opisywania prezentacji strony internetowej.
Pliki z rozszerzeniem .css zawierają reguły definiujące sposób wyświetlania elementów .html na danej stronie. Reguły te obejmują takie obszary jak:
- ustawienia czcionek (krój, rozmiar, kolor i styl),
- odstępy między wierszami i wcięcia,
- zasady układu dla elementów osadzonych i pozycjonowanych,
- odniesienia do zasobów, animacje i punkty przerwania (breakpoints) poprzez zapytania
@media.
CSS - Cascading Style Sheets - to język arkuszy stylów używany do tworzenia plików .css. Został zaprojektowany, aby umożliwić oddzielenie treści strony internetowej od jej prezentacji, co znacznie ułatwia modyfikowanie wyglądu witryny bez wpływu na treść. Pliki .css pozwalają również na różne renderowanie stron w zależności od urządzenia używanego do uzyskania do nich dostępu - czy jest to urządzenie mobilne, komputer stacjonarny czy tablet - co zapewnia znacznie lepsze wrażenia użytkownika. Część „kaskadowa” oznacza, że wiele reguł może dotyczyć tego samego elementu jednocześnie, a specyficzność i kolejność źródłowa rozstrzygają, która z nich wygrywa.
CSS nie jest pojedynczym formatem wersjonowanym: od czasu CSS3 rozwija się jako niezależne moduły (Selectors, Flexbox, Grid, Color, Animations i inne), z których każdy postępuje we własnym tempie. Preprocesory takie jak .scss i .less rozszerzają składnię tworzenia CSS, ale zawsze kompilują się do zwykłego formatu .css, który przeglądarki konsumują bezpośrednio.
Pliki .css przechowują dane w formacie zwykłego tekstu, dzięki czemu można je edytować za pomocą dowolnego edytora tekstu. Zaleca się jednak edytowanie plików .css przy użyciu dedykowanych narzędzi, aby uniknąć potencjalnych błędów - takie narzędzia automatycznie podświetlają słowa kluczowe, poprawiają błędy składniowe i oferują funkcje autouzupełniania. Plik .css nie posiada sygnatury binarnej; może opcjonalnie zaczynać się od deklaracji @charset, reguły @import lub komentarza /* comment */.
Bezpieczeństwo
RYZYKO: LOWCSS to zwykły tekst i nie wykonuje kodu, więc otwarcie pliku .css wiąże się z niskim ryzykiem. Przypadki brzegowe: historycznie CSS mógł ładować zasoby zdalne (czcionki/obrazy), a starsze przeglądarki miały specyficzne cechy CSS expression()/behavior (dawno wycofane); nowoczesny CSS nie może uruchamiać skryptów. Prawdziwą ostrożność należy zachować przy pobieraniu oprogramowania typu „darmowy edytor/przeglądarka CSS” z portali pełnych reklam, które dołączają niechciane programy (PUP) - korzystaj z renomowanych edytorów wymienionych powyżej.
Szczegóły formatu
w pigułceProgramy otwierające pliki CSS
Windows4 apps
Sublime Text
Płatny Otwórz do edycji; bezpłatny do testowania, wymaga licencji do dalszego użytkowania. 
Visual Studio Code
Darmowy Otwórz plik .css, aby edytować go z podświetlaniem składni, IntelliSense i rozszerzeniami podglądu na żywo. 
Web browser (Chrome/Firefox/Edge)
Darmowy Przeglądarki automatycznie stosują CSS podczas ładowania strony; użyj DevTools (F12), aby sprawdzać i edytować style na żywo. 
macOS2 apps
TextEdit
Wbudowany Otwórz w trybie zwykłego tekstu, aby czytać/edytować; najpierw wyłącz tryb tekstu sformatowanego.
Visual Studio Code
Darmowy Otwórz plik .css, aby edytować go z podświetlaniem składni, IntelliSense i rozszerzeniami podglądu na żywo. 
Linux1 app
VS Code / gedit / GNU Emacs
Darmowy Otwórz .css w dowolnym edytorze tekstu/kodu, aby go przeglądać lub edytować.
CodePen / JSFiddle
Darmowy Wklej CSS do internetowego placu zabaw, aby edytować i przeglądać go na żywo w połączeniu z HTML. Szczegóły techniczne
specyfikacja| Typ MIME | text/css |
| Kodowanie pliku | Zwykły tekst, domyślnie UTF-8; zestaw znaków może być jawnie zadeklarowany za pomocą reguły `@charset` na samej górze pliku |
| Sygnatura binarna | Brak - pliki `.css` nie mają magicznych bajtów; identyfikacja opiera się na rozszerzeniu pliku lub typie MIME |
| Typowy rozmiar pliku | Od 1 KB do 500 KB; zminifikowane pakiety frameworków innych firm (Bootstrap, Tailwind) mogą osiągać górną granicę |
| Podstawowa struktura | Zestawy reguł: selektor lub lista selektorów, po których następuje blok deklaracji par `property: value` ujętych w nawiasy klamrowe |
| At-reguły | `@media` (punkty przerwania responsywności), `@import`, `@font-face`, `@keyframes`, `@supports` i `@layer` kontrolują warunkowe ładowanie, niestandardowe czcionki, animacje i wykrywanie funkcji |
| Algorytm kaskadowości | Sprzeczne reguły są rozstrzygane przez specyficzność, pochodzenie kaskady (autor / użytkownik / przeglądarka) i kolejność źródłową; wartości propagują do elementów podrzędnych poprzez dziedziczenie |
| Model wersjonowania | Modułowy od CSS3; poszczególne moduły, takie jak Selectors, Flexbox, Grid i Color, przechodzą przez etapy W3C Candidate Recommendation niezależnie |
| Właściwości niestandardowe | Natywne zmienne CSS deklarowane jako `--name: value` i używane przez `var(--name)`, umożliwiające stosowanie tokenów projektowych wielokrotnego użytku bez preprocesora |
| Interoperacyjność preprocesorów | Pliki `.scss`, `.sass` i `.less` kompilują się do zwykłego `.css`; PostCSS przekształca źródło `.css` w czasie budowania; przeglądarki konsumują tylko końcowy plik `.css` |
| Kompresja transferu | Zazwyczaj serwowane z kompresją gzip lub Brotli przez HTTP w celu oszczędności przepustowości; na dysku plik jest nieskompresowanym tekstem |
| Integralność zasobów podrzędnych | Skrót SHA-256/384/512 można umieścić w atrybucie HTML `<link integrity="…">`, aby zweryfikować pobrany plik; żaden skrót nie jest przechowywany w samym pliku `.css` |
| Prefiksy dostawców | Prefiksy `-webkit-`, `-moz-` i `-ms-` historycznie chroniły właściwości eksperymentalne; większość z nich jest obecnie przestarzała, ponieważ podstawowe właściwości zostały ustandaryzowane |
| Model obiektowy przeglądarki | Analizowany przez silnik przeglądarki do CSSOM (CSS Object Model), który jest łączony z drzewem DOM w celu obliczenia ostatecznych stylów i wyrenderowania strony |
| Podmiot utrzymujący standard | W3C CSS Working Group; specyfikacje są publikowane jako niezależne dokumenty modułów, każdy z własnymi szkicami redakcyjnymi i rekomendacjami kandydackimi |
| Wydano | CSS Level 1, December 1996 (W3C Recommendation) |
| Najnowsza wersja | CSS is now modular (CSS3+); modules like Selectors, Flexbox, Grid, Color advance independently |
| Otwarty standard | Tak · bezpłatny (royalty-free) |
| Specyfikacja | www.w3.org |
Konwersje CSS
Pytania i odpowiedzi społeczności
pytania użytkownikówBrak pytań - bądź pierwszą osobą, która zapyta o pliki CSS.
