CSS on CSS-tyylitaulukko, joka on kieli verkkosivujen ulkonäön kuvaamiseen. Yksi CSS: n tärkeimmistä eduista on kyky korvata taulukon asettelu lohkoasettelulla.
Se on välttämätöntä
HTML-koodieditori
Ohjeet
Vaihe 1
Luo ensimmäinen lohko. HTML-muodossa se näyttää div-tagilta, jonka tunnus on 'block01'. Tässä lohko01-tunniste osoittaa, että CSS-kuvauksessa kaikki tämän lohkon ominaisuudet määritetään valitsimelle # lohko01.
Vaihe 2
Kuvaile lohkoa CSS: ssä. Määritä CSS-tyyleissä tunnuksen nimi (# block01) ja kuvaa kiharaisissa aaltosulkeissa sen parametrit - leveys, sijoittelu, siirtymä, taustaväri jne. Se voi esimerkiksi näyttää tältä: # block01 {width: 150px; korkeus: 150px; sijainti: absoluuttinen; yläosa: 0px; vasen: 0px; taustaväri: vaaleanpunainen}. Tässä kuvauksessa oletetaan, että laatikko on 150 pikseliä pitkä ja 150 pikseliä leveä, se sijoitetaan jäykästi asiakirjan vasempaan yläkulmaan ja sen tausta on vaaleanpunainen.
Vaihe 3
Anna lohkolle suhteellinen sijainti. Jos CSS-kuvauksessa ei käytetä absoluuttista, vaan suhteellista sijaintia, voit sijoittaa lohkoja jäykällä napsautuksella koordinaattiruudukkoon, mutta suhteessa muihin jo olemassa oleviin lohkoihin. Muuta koodin sijainti: absoluuttinen; yläosa: 0px; vasen: 0px sijainnin mukaan: suhteellinen; yläosa: 200 kuvapistettä; vasen: 100 kuvapistettä.
Vaihe 4
Anna lohko pyöristys. CSS: ssä raja-säde-lausunto on vastuussa tästä. Lisää seuraava koodi tyylitaulukkoon: reunan säde: 8 kuvapistettä. Lohkossa on nyt pyöristetyt kulmat. Jos haluat pyöristää vain joitain kulmia, kuvaile säde erikseen kullekin: reunan säde: 8px 8px 0px 0px.
Vaihe 5
Anna lohkolle aivohalvaus. Korosta lohkon ääriviivat ohuella viivalla lisäämällä seuraava koodi sen CSS-kuvaukseen: border-top: 1px katkoviivainen. Tämä ohje tarkoittaa, että lohkon reunus on musta ja sen paksuus on yksi pikseli. Tässä tapauksessa ääriviiva itsessään näytetään katkoviivana (katkoviiva - katkoviiva, pisteviiva - piste, kiinteä - yhtenäinen viiva).
Vaihe 6
Aseta loput lohkon ominaisuudet. Määritä CSS-kuvauksessa, mitä kirjasintyyppiä käytetään lohkon sisällä olevaan tekstiin, mikä on kirjasimen koko, tasaus ja sisennys lohkon reunoista. Nämä ominaisuudet on kuvattu määritelmissä font-family, font-size, text-align ja padding.
Vaihe 7
Float-ominaisuuden avulla voit mukauttaa yhden lohkon kulkua toisen yli. Jos asetat sen "vasemmalle", loput elementit virtaavat vasemmalla olevan lohkon ympäri ja "oikea" - oikealla. Jos asetat float-arvoksi “none”, lohkon tasausta ei aseteta. CSS: n selkeä ominaisuus estää lohkoa virtaamasta oikealle, vasemmalle tai molemmille puolille ja ohittaa float-käskyn.
