WETWORK

Corlan Adnoddau Arlein Cymraeg


Defnyddio CSS - Beth yw CSS?

Canllawiau CSS

Ewch i CSSZenGarden i weld pwer CSS

CSS (Cascading Style Sheets) yw'r dechneg o steilio a rhoi gosodiadau i dudalen gan ddefnyddio ffeiliau allanol i ddal rheolau fformatio a gosod. Blynyddoedd yn ô, roedd dylunwyr yn gorfod defnyddio'r tag HTML, STYLE tu fewn y dudalen ei hun, neu waeth bydd gosod piodoleddau steil tu fewn i dagiau arferol. Mae'r tagiau STYLE dal yn cael eu defnyddio o dro i dro yn adran HEAD y dudalen, ond dim ond am steilio sy'n unigryw i'r dudalen honno, e.e.

<style>p.pwysig{color:red;font-weight:bold;}</style>

Byddai hyn yn cael ei rhoi ar gyfer y canlynol:

<p class="pwysig">Mae'r testun hwn yn bwysig!</p>

Dyma'r canlyniad:

Mae'r testun hwn yn bwysig!

Yr anfantais o wneud hyn yw os oes gennych nifer fawr o dudalennau ac os ydych am newid y steil arbennig hwnnw, bydd angen newid y rheolau steil yn mhob un dudalen yn unigol! Felly, er mwyn osgoi hyn, rydym yn rhoi yr holl reholau o fewn ffeil allanol ac yna mae pob tudalen yn "cysylltu" â hi. Felly bydd newid i'r ffeil hwn yn cael ei weld ym mhob tudalen HTML sydd yn ei defnyddio.

Problem gyda defnyddio'r tag STYLE ar gyfer steilio a gosod

Mantais CSS dros STYLE

Gosod ffeil CSS

Caiff ffeiliau CSS eu rhoi mewn adran HEAD y dudalen fel yr isod:

.

<head>

<link href="/css/prif.css" type="text/css" rel="stylesheet" media="all" />

...

</head>

Mae sawl priodoledd cyffredin i bob tag, yr HREF neu'r hyperlink reference - dyma'r url, gall fod yn:

  • llwybr cymharol (wedi'i gymharu â lleoliad y dudalen ei hun), e.e. "../css/prif.css"
  • llwybr absoliwt (o'r gwreiddffolder), e.e. "/thema/css/prif.css"
  • llwybr allanol (dolen i ffeil ar wefan arall), e.e. "http://www.gwefan.com/css/prif.css"

Mae'r priodoledd TYPE pob amser yn mynd i fod yn "text/css".

Mae'r priodoledd REL pob amser yn mynd i fod yn "stylesheet".

Mae'r priodoledd MEDIA yn dibynnu ar bwrpas y ffeil. Dyma'r prif opsiynau:

  • "all": bydd hwn yn argraffu'r dudalen y ffordd mae'n edrych ar y sgrin
  • "screen": bydd hwn yn sicrhau bod y rheolau am ymddangosiad i sgrïn
  • "print": bydd hwn yn sicrhau bod y rheolau am argraffu'n unig
  • "aural": bydd hwn yn rheoli sut mae darllenwyr sgrïn yn darllen y testun (llais menyw/dyn; tôn y llais; cyflymder y darllen ac ati.

Gall tudalen gynnwys nifer o ffeiliau CSS yn yr adran HEAD, e.e.

<link href="/css/prif.css" type="text/css" rel="stylesheet" media="screen" />

<link href="/css/print.css" type="text/css" rel="stylesheet" media="print" />

<link href="/css/clyw.css" type="text/css" rel="stylesheet" media="aural" />