CSS Orodje za delo - PHPStorm

PHPStorm je zmogljivo razvojno orodje, ki ga uporabljajo profesionalni razvijalci za ustvarjanje in urejanje spletnih strani, vključno s CSS datotekami. Omogoča urejanje kode na organiziran in hiter način s številnimi funkcionalnostmi, ki olajšajo delo. Kako delati s PHPStorm pri urejanju CSS:

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>kako delati s css v phpstorm</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            padding: 30px;
            height: 100%;
            width: 100%;
        }

        h1 {
            text-align: center;
            color: green;
            border: 2px solid red;
            border-radius: 5px;
            margin-bottom: 0;
            padding: 10px;
            font-family: "Bookman Old Style", sans-serif;
        }

        p {
            font-size: 20px;
            font-family: "Segoe UI Semibold", sans-serif;
        }

        img {
            width: 100%;
            height: auto;
        }

        h3 {
            font-family: "Trebuchet MS", sans-serif;
            color: red;
        }
    </style>
</head>
<body>
<h1>Kako napisati svojo spletno stran</h1>
<p>Dobrodošli v CSS vadnico, kjer smo na začetku izdelave sloga za spletno stran. Ker smo <a href="html.php">HTML</a>
    vadnico obdelali, se nahajamo v CSS Vadnici in vas lepo pozdravljam. Prvi slog (zunanji) bomo napisali, kar v
    beležnici.</p>

<img src="/demo/demo.png" alt="Kako napisati svojo spletno stran">

<p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi
    že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16.
    stoletja. To besedilo pa ni zgolj preživelo pet stoletij, temveč se je z malenkostnimi spremembami uspešno
    uveljavilo tudi v elektronskem namiznem založništvu. Na priljubljenosti je Lorem Ipsum pridobil v sedemdesetih letih
    prejšnjega stoletja, ko so na trg lansirali Letraset folije z Lorem Ipsum odstavki. V zadnjem času se Lorem Ipsum
    pojavlja tudi v priljubljenih programih za namizno založništvo kot je na primer Aldus PageMaker.</p>

<h3>Zakaj ga uporabljamo</h3>
<p>Dokazano je, da razumljiva vsebina, med pregledovanjem oblikovne rešitve določene strani, neželeno preusmeri
    pozornost bralca. Ker ima Lorem Ipsum relativno enakomerno razporeditev znakov uspešno nadomesti začasna vsebinsko
    pomenska besedila. Veliko namizno založniških programov in spletnih urejevalnikov uporablja Lorem Ipsum kot privzeti
    slepi tekst. Zato spletno iskanje s ključnimi besedami "lorem ipsum" vrne številne zadetke še nedokončanih spletnih
    mest. Tekom let so namreč nastale številne različice tega slepega teksta, bodisi nenačrtovano ali namenoma, z
    različnimi šaljivimi in drugimi vložki.</p>
</body>
</html>

REZULTAT

Ustvarjanje nove CSS datoteke
1. Najprej odpri PHPStorm in ustvari nov projekt ali odpri obstoječega, kjer boš delal na spletni strani.
2. Na levi strani v Project View (prikaz strukture datotek) klikni desni gumb miške, izberi možnost New → Stylesheet (CSS) in poimenuj datoteko, na primer style.css. PHPStorm bo samodejno generiral prazno CSS datoteko.
Pisanje in urejanje CSS kode
1. Ko odpreš datoteko style.css, lahko začneš pisati CSS pravila. Na primer:
2. PHPStorm omogoča samodokončanje (autocomplete), ki ti med pisanjem predlaga CSS lastnosti in vrednosti. To prihrani čas in zmanjša možnost napak.
Predogled in povezovanje s HTML datotekami
1. Datoteko style.css poveži s HTML datoteko tako, da v <head> odseku HTML dokumenta uporabiš oznako <link>, na primer:
2. Ko shraniš spremembe v HTML in CSS datotekah, PHPStorm omogoča hitri predogled v brskalniku. Desni klik na datoteko HTML in izberi Open in Browser.
Prednosti uporabe PHPStorm za CSS
1. Barvni predogled: Če v CSS uporabiš barve, kot so #ff0000 ali rgb(255, 0, 0), PHPStorm samodejno pokaže majhno barvno ikono ob njih, tako da vidiš dejansko barvo.
2. Samodejno preverjanje sintakse: PHPStorm preverja CSS kodo za napake in ti jih takoj označi, na primer, če pozabiš zaklepaj {} ali podpičje ;.
3. Uporaba predlog (templates): Na voljo so številne predloge oblikovanja (Boilerplate), s katerimi hitro začneš pisati CSS ali pa vstaviš pogosto uporabljene vzorce kode.
Shranjevanje in urejanje projekta
1. Vse spremembe lahko shraniš s kombinacijo Ctrl + S (Windows) ali Cmd + S (Mac). PHPStorm prav tako omogoča sledenje spremembam v projektu, če uporabljaš sistem za verzioniranje, kot je Git.
Prilagoditev urejevalnika
1. Če želiš, lahko prilagodiš barvno shemo urejevalnika v PHPStorm, tako da bo delo s CSS bolj prijetno za oči. To spremeniš v nastavitvah pod File → Settings → Editor → Color Scheme → CSS.

PHPStorm je izjemno vsestransko orodje, ki olajša delo z CSS ter omogoča hitrejše in natančnejše pisanje kode. Če iščeš profesionalen način za razvoj spletnih strani, je PHPStorm ena najboljših izbir.