Hvordan Design en CSS Website & border

Hvordan Design en CSS Website & border


CSS grenser er i utvikling med CSS skriptspråk. CSS grenser har flere forskjellige stiler, inkludert solid, prikkete, stiplede, dobbel grenser, og med CSS 3, avrundede hjørner. CSS og grenser er definert for alle i element i HTML-filen eller i en separat knyttet Css-filen. Koden er den samme uansett hvor du plasserer den. Å designe en nettside ved hjelp av CSS med grenser, trenger du en tekst editor som vil lagre rene tekstfiler.

Bruksanvisning

1 Opprett en HTML-fil ved å åpne teksteditor og klikke på & quot; Fil & quot ;, og & quot; New & quot ;. Klikk på & quot; Lagre & quot; og lagre filen som index.html.

2 Legg den grunnleggende HTML til nettsiden. Dette er HTML som forteller nettleseren at filen er en web-side. For eksempel:

& Lt; html & gt;
& Lt; head & gt;
& Lt; title & gt; Min Side & lt; / title & gt;
& Lt; / head & gt;
& Lt; body & gt;

& Lt; / body & gt;
& Lt; / html & gt;

3 Lag en boks med grenser ved å legge til en DIV tag og skrive inn teksten du vil ha i boksen. I eksempelet vil DIV tag gå mellom BODY-kodene:

& Lt; html & gt;
& Lt; head & gt;
& Lt; title & gt; Min Side & lt; / title & gt;
& Lt; / head & gt;
& Lt; body & gt;
& Lt; div & gt;
Dette er min side. Du er velkommen til å vise det.
& Lt; / div & gt;
& Lt; / body & gt;
& Lt; / html & gt;

4 Legg CSS til DIV tag med stilelementet. Bruk CSS grensen element for å skape en ramme rundt teksten. Grensen element tar farge, type og størrelse i betraktning. For eksempel:

& Lt; html & gt;
& Lt; head & gt;
& Lt; title & gt; Min Side & lt; / title & gt;
& Lt; / head & gt;
& Lt; body & gt;
& Lt; div style = & quot; border: 5px solid # 000000; & quot; & gt;
Dette er min side. Du er velkommen til å vise det.
& Lt; / div & gt;
& Lt; / body & gt;
& Lt; / html & gt;

Grensen er 5 piksler bred, og det er en solid svart linje rundt teksten i DIV tag. En hex koden brukes til å lage grensen svart. Hex-koder kan oppnås ved hjelp av en fargevelger program. Alternativt kan du bytte ut Solid eiendom med prikkete, stiplede, dobbelt, sporete, rillet, innfelt eller begynnelsen. Runde hjørner krever border-radius element fra CSS 3, men det er ikke støttet av alle nettlesere ennå. For eksempel:

& Lt; div style = & quot; border: 2px dotted # 000000; border-radius: 9px; & quot; & gt;

Dette vil avrunder grensen & # 039; s hjørner av 9 piksler.