Pam Ddefnyddio CSS?

By Ffon Host
October 22, 2024

Mae gan ddefnyddio CSS sawl mantais:

Ayrchedd o gynnwys a dyluniad: Mae’n ayrchu eich cynnwys HTML oddi wrth y ffordd y caiff ei gyflwyno.
Cysondeb: Gallwch ddylunio llawer o dudalennau gwe gyda ffeil CSS un, gan sicrhau cysondeb ledled eich gwefan.
Hyblygrwydd: Mae CSS yn rhoi mwy o hyblygrwydd dylunio nag yn defnyddio HTML yn unig.
Ymatebgarwch: Mae’n helpu i greu dyluniadau ymatebol sy’n edrych yn dda ar bob dyfais, megis cyfrifiaduron desg, tabledi, a ffonau.

Ychwanegu CSS i’ch HTML

Mae tair ffordd i gymhwyso CSS i ddogfen HTML:

CSS Inline: Achosir yn uniongyrchol o fewn elfennau HTML gan ddefnyddio’r atributed style.
CSS Mewnol: Ychwanegir o fewn y tag <style> yn adran <head> ffeil HTML.
CSS Allanol: Cysylltir trwy ffeil steil allanol sydd wedi’i chynnwys yn y ddogfen HTML gan ddefnyddio’r tag <link>.

Gadewch i ni fynd i mewn i sut y gallwch gymhwyso steiliau syml gan ddefnyddio pob dull.

1. CSS Inline

Mae CSS inline yn ffordd gyflymaf o ychwanegu steiliau i’ch elfennau. Fe’i cymhwysir yn uniongyrchol ar elfennau HTML gan ddefnyddio’r atributed style. Mae hyn yn ddefnyddiol ar gyfer newidiadau bach, cyflym, ond nid yw’n ddelfrydol ar gyfer prosiectau mwy, gan ei fod yn cymysgu cynnwys gyda steil.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Inline CSS Example</title>
 </head> 
<body> 
<h1 style="color: blue; text-align: center;">Hello, World!</h1> <p style="font-size: 18px; color: gray;">This is a paragraph styled with inline CSS.</p> 
</body> 
</html>

2. CSS Mewnol

Gyda CSS mewnol, rydych chi’n rhoi eich holl steiliau yn yr adran <style> yn y <head> o’ch ffeil HTML. Mae’r dull hwn yn cadw eich steiliau yn wahân oddi wrth y cynnwys HTML ond yn dal i fod yn yr un ffeil. Mae’n ddefnyddiol ar gyfer gwefannau un dudalen.

Enghraifft:

<!DOCTYPE html>
<html lang="cy">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enghraifft CSS Mewnol</title>
    <style>
        h1 {
            color: blue; /* Testun glas */
            text-align: center; /* Canolbwyntio */
        }
        p {
            color: gray; /* Testun llwyd */
            font-size: 18px; /* Maint ffont o 18px */
        }
    </style>
</head>
<body>
    <h1>Croeso i'n Gwefan</h1>
    <p>Mae hwn yn enghraifft o CSS mewnol.</p>
</body>
</html>

3. CSS Allanol

Mae CSS allanol yn y dull mwyaf effeithlon ac a ddefnyddir yn gyffredin, yn enwedig ar gyfer gwefannau aml-dudalen. Mae eich holl CSS yn cael ei ysgrifennu mewn ffeil .css ar wahân, ac rydych chi’n ei gysylltu â’ch ffeil HTML. Mae hyn yn eich galluogi i newid ymddangosiad sawl tudalen trwy ddynodi ffeil CSS un.

Enghraifft:

Creae ffeil CSS: Creu ffeil o’r enw styles.css a chynnwys y steiliau canlynol:

<!-- index.html --> 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>External CSS Example</title>
 <link rel="stylesheet" href="styles.css"> 
</head> 
<body> <h1>Hello, World!</h1> <p>This is a paragraph styled with external CSS.</p> 
</body> 
</html>

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 18px;
    color: gray;
}

Gyda CSS Allanol

Gyda CSS allanol, mae’r holl steiliau yn cael eu storio yn styles.css, ac mae’r tag <link> yn yr adran <head> o’ch dogfen HTML yn ei gysylltu â’r wefan. Mae’r dull hwn yn cadw eich cod yn daclus ac yn hawdd ei reoli.

Priodweddau CSS Sylfaenol

Dyma rai priodweddau CSS cyffredin y gallwch eu defnyddio i steilio elfennau HTML:

color: Sefydlu lliw y testun.
font-size: Penodwyd maint y ffont.
background-color: Diffiniad lliw y cefndir elfen.
margin: Sefydlu’r gofod y tu allan i ffin yr elfen.
padding: Sefydlu’r gofod y tu mewn i ffin yr elfen.
text-align: Cyfeirio testun o fewn elfen (chwith, de, canol, cyfiawn).

Enghraifft

Dawn i greu gwefan syml gan ddefnyddio CSS allanol:

Creae ffeil CSS: Creu ffeil o’r enw styles.css a chynnwys y steiliau canlynol:

<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Simple Webpage</title> 
<link rel="stylesheet" href="styles.css"> 
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section> <p>This is a simple webpage styled with CSS.</p> </section>
</body>
</html>

/* styles.css */
body {
    background-color: #f0f0f0;
    font-family: 'Helvetica', sans-serif;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
}

p {
    font-size: 16px;
    color: #333;
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
}

Canlyniad

Mae’r enghraifft hon yn creu gwefan syml lle mae’r testun yn defnyddio’r steiliau a bennwyd yn y ffeil CSS allanol. Mae’r defnydd o CSS allanol yn caniatáu i chi wneud newidiadau i’r steiliau yn unman yn y ffeil CSS heb orfod newid y cod HTML, gan wneud y broses o reoli dyluniad y wefan yn llawer haws.

Pam Ddefnyddio CSS?