Dè th'ann an CSS?

'S e Cascading Style Sheets an t-ainm fada airson CSS. Tha CSS air a chleachdadh airson coltas ceart a chur air duilleagan-lìn .

Carson CSS?

Tha HTML a' cur an cèill dè bu chòir a bhith air an duilleig (faclan, dealbhan, m.s.a.a.). Tha CSS ag ràdh dè an coltas a bu chòir a bhith air na rudan air an duilleig.

Le CSS, tha e glè fhurasta an coltas atharrachadh gun a bhith ag atharrachadh an HTML.

Mar eisimpleir, ma tha "HTML tables" air an cleachdadh airson suidheachadh de rudan air an duilleig ("positioning"), bidh e doirbh na rudan sin a ghluasad gu àiteachan eile air an duilleig. Co-dhiù, ma tha CSS air a chleachdadh airson suidheachadh de na rudan, bidh e furasta na rudan a ghluasad gu àiteachan eile air an duilleig.

Eisimpleir eile, 's e gu bheil e sìmplidh le CSS a bhith ag atharrachadh an dath agus meud airson an teacsa air làrach-lìn air fad, gun a bhith ag atharrachadh an HTML.

Cò ris a tha CSS coltach?

Eisimpleir:

<!-- eisimpleir de "class" -->
.subs-navbar {
border: 1px #091c5a solid;
margin-bottom: 10px;
padding-top: 0;
font-size: 14px;
background-color: #ffffff;}

<!-- eisimpleir de "id" -->
#sidepanel {
position: absolute;
top: 20px;
left: 625px;
width: 220px;
margin-left: 0;
margin-right: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;}

Dè an seòrsa siota stoidhle?

Ann an "linked stylesheet", tha an CSS ann am faidhle eile, chan ann leis an HTML. Airson stoidhle a bhios air a chleachdadh ann am barrachd air aon duilleag, tha seo nas fheàrr. Mar eisimpleir:

<head>
<link rel="stylesheet" type="text/css" href="http://www.westciv.com/style/style.css" />
</head>

Tha an duilleag seo a' cleachdadh siota stoidhle "linked".

Ann an "embedded stylesheet", tha an CSS anns an fhaidhle HTML fhèin. Ma tha stoidhle gu bhith dìreach air a chleachdadh ann an aon fhaidhle, tha sin iomchaidh.

'S urrainn dhut an CSS a chur anns an earrann HTML "head", neo ann an earrann mar <div>, <span> neo <p>. Mar eisimpleir:

<head>
<style type="text/css">
.illustration_title {
position: absolute;
top: 250px;
left: 50px;
}
</style>
</head>

<body>
<span class="illustration_title"> 1. Taigh Dubh an Sgìre Nis</span>
</body>

neo

<div style="position:absolute; left:50; top:700; width:300; font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
This website conforms to the following standards:
<!-- barrachd stuth an-seo -->
</div>

neo

Dè an <span style="font-style: italic; text-decoration: underline">seòrsa</span> style sheet?

Clas & ID

'S urrainn do Chlas a bhith air a chleachdadh ann am mòran àiteachan air an duilleig, ach chan urrainn ID a bhith ann am barrachd air aon àite.

Feumar "{" agus "}" a chleachdadh an àite "(" agus ")".

Clas

Tha clas mar seo:

.ainm { rud1: luach; rud2: luach; ... }

m.e.:

.red_text { color: #ff0000; }

agus seo mar a chleachdas tu e san HTML:

seo teacsa <span class="red_text"> dearg </span>

tha e a' coimhead mar seo:

seo teacsa dearg

ID

Tha ID mar seo:

#ainm { rud1: luach; rud2: luach; ... }

m.e.:

#cng_header { font-size: 28px; text-align: center; color:#800080; }

agus seo mar a chleachdas tu e san HTML:

<p id="cng_header">Comunn na Gàidhlig</p>

tha e a' coimhead mar seo:

Comunn na Gàidhlig

HTML tags

Tha e comasach stoidhle a chur air rudan a tha am broinn HTML tags mar <body>, <p>, <h1>, <table>, m.s.a.a. ann an dà dhòigh:

Dòigh 1 - atharraich dìreach far a bheil thu ag ràdh

Leis an dòigh seo, tha an stoidhle ag atharrachadh dìreach far a bheil thu a' cleachdadh a' chlas neo ID.

.purple_text { font-size: 18px; color: #800080 }

<p class="purple_text ">teacsa le stoidhle ùr an seo</p>

<p>teacsa le stoidhle àbhaisteach an seo<p>

mar seo:

teacsa le stoidhle ùr an seo

teacsa le stoidhle àbhaisteach an seo

Dòigh 2 - atharraich an-còmhnaidh

Leis an dòigh seo, tha thu ag atharrachadh an stoidhle a h-uile turas a tha an tag air a chleachdadh. Chan fheum thu clas ainmeachadh gach turas.

p { font-size: 18px; color: #008080 }

<p>teacsa le stoidhle ùr an seo</p>

<p>agus an-seo<p>

mar seo:

teacsa le stoidhle ùr an seo

agus an seo

HTML <span> , <div> & <p>

Tha <span>...</span> a' comharrachadh pìos beag de theacsa far a bheil thu ag iarraidh stoidhle. Airson stoidhle a chur air earrann air fad, neo rudan eile mar dhealbhan, cleachd <p>....</p>, neo <div>...</div>.

m.e., chunnaic sinn seo roimhe:

seo teacsa <span class="red"> dearg </span>

agus dh' fhaodadh <div> neo <p> a bhith mar seo:

<div class="centred_image"> (HTML airson dealbh an seo...) </div>"

<p class="monospaced_text"> (earrann de theacsa an seo...) </p>