1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
|
---
language: css
contributors:
- ["Mohammad Valipour", "https://github.com/mvalipour"]
- ["Marco Scannadinari", "https://github.com/marcoms"]
- ["Geoffrey Liu", "https://github.com/g-liu"]
- ["Connor Shea", "https://github.com/connorshea"]
- ["Deepanshu Utkarsh", "https://github.com/duci9y"]
translators:
- ["Rasendran Kirushan", "https://github.com/kirushanr"]
filename: learncss.css
lang:in-ta
---
இணையத்தின் ஆரம்ப காலத்தில் முழுமையாக உரைகளை மட்டுமே கொண்டிருந்தன.
ஆனால் உலாவிகளில் கொண்டு வரப்பட்ட மாற்றங்களில் முழுமையான காட்சிபடுத்தல்களுடன்
கூடிய இணையதளங்கள் உருவாகின.
CSS ஆனது HTML மற்றும் அதன் அழகுபடுத்கூடிய காரணிகளையும் வேறுபடுத்த உதவியது.
ஒரு html இல் உள்ள உறுப்புகளை(elements) வெவ்வேறு வகையான காட்சி பண்புகளை வழங்க உதவுகிறது.
இந்த வழிகாட்டி CSS2 உக்கு எழுதப்பட்டுள்ளது, இருப்பினும் தற்போது CSS 3 வேகமாக பிரபல்யமாகி வருகிறது.
**குறிப்பு:**
CSS ஆனது முற்று முழுதாக visual(காட்சி) மாற்றங்களை தருவதால் அதை நீங்கள் முயற்சிக்க
இதை உபயோகபடுத்தலாம் [dabblet](http://dabblet.com/).
இந்த வழிகாட்டியின் பிரதான நோக்கம் CSS இன் syntax மற்றும் மேலும் சில வழிமுறைகளை
உங்களுக்கு கற்று தருவதாகும்
```css
/* css இல் குறிப்புகளை இப்படி இடலாம் */
/* ####################
## SELECTORS
#################### */
/* ஒரு HTML பக்கத்தில் இருக்கும் உறுப்பை நாம் selector மூலம் தெரிவு செய்யலாம்
selector { property: value; /* more properties...*/ }
/*
கிழே ஒரு உதாரணம் காட்டப்பட்டுள்ளது:
<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
*/
/* நீங்கள் அந்த உறுப்பை அதன் CSS class மூலம் தெரியலாம் */
.class1 { }
/* அல்லது இவ்வாறு இரண்டு class மூலம் தெரியலாம்! */
.class1.class2 { }
/* அல்லது அதன் பெயரை பாவித்து தெரியலாம் */
div { }
/* அல்லது அதன் id ஐ பயன்படுத்தி தெரியலாம்*/
#anID { }
/* அல்லது ஒரு உறுப்பின் பண்பு ஒன்றின் மூலம்! */
[attr] { font-size:smaller; }
/* அல்லது அந்த பண்பு ஒரு குறிப்பிட்ட பெறுமானத்தை கொண்டு இருப்பின் */
[attr='value'] { font-size:smaller; }
/* ஒரு பெறுமதியுடன் ஆரம்பமாகும் போது (CSS 3) */
[attr^='val'] { font-size:smaller; }
/* அல்லது ஒரு பெறுமதியுடன் முடிவடையும் போது (CSS 3) */
[attr$='ue'] { font-size:smaller; }
/* அல்லது காற்புள்ளியால் பிரிக்கப்பட்ட பெறுமானங்களை கொண்டு இருப்பின் */
[otherAttr~='foo'] { }
[otherAttr~='bar'] { }
/* அல்லது `-` பிரிக்கப்பட்ட பெறுமானங்களை கொண்டு இருப்பின், உ.ம்:-, "-" (U+002D) */
[otherAttr|='en'] { font-size:smaller; }
/* நாம் இரண்டு selectors ஐ ஒன்றாக உபயோகித்தும் ஒரு உறுப்பை அணுக முடியும் ,
அவற்றுக்கு இடயே இடைவெளி காணப்படகூடாது
*/
div.some-class[attr$='ue'] { }
/*அல்லது ஒரு உறுப்பினுள் இருக்கும் இன்னொரு உறுப்பை (child element) அணுக */
div.some-parent > .class-name { }
/* ஒரு ஒரு பிரதான உறுப்பில் உள்ள உப உறுப்புகளை அணுக*/
div.some-parent .class-name { }
/* மேலே குறிபிட்ட அணுகுமுறையில் இடைவெளி காணப்படாது விடின்
அந்த selector வேலை செய்யாது
*/
div.some-parent.class-name { }
/* அல்லது ஒரு உறுப்புக்கு அடுத்துள்ள */
.i-am-just-before + .this-element { }
/* or அல்லது அதற்கு முந்தய உறுப்பின் மூலம் */
.i-am-any-element-before ~ .this-element { }
/*
சில selectors ஐ pseudo class மூலம் அணுக முடியும் , எப்போது எனில் அவை
குறித்த ஒரு நிலையில் இருக்கும் போது ஆகும்
*/
/* உதாரணமாக நாம் ஒரு உறுப்பின் மீதாக cursor ஐ நகர்த்தும் போது */
selector:hover { }
/* அல்லது ஒரு
பார்வையிட்ட இணைப்பு */
selector:visited { }
/* அல்லது ஒரு பார்வையிடபடாத இணைப்பு */
selected:link { }
/* அல்லது ஒரு element ஐ focus செய்யும் போது */
selected:focus { }
/*
எல்லா elementகளையும் ஒரே நேரத்தில் அணுக `*`
*/
* { } /* all elements */
.parent * { } /* all descendants */
.parent > * { } /* all children */
/* ####################
## பண்புகள்
#################### */
selector {
/* நீளத்தின் அலகுகள் absolute அல்லது relative ஆக இருக்கலாம். */
/* Relative units */
width: 50%; /* percentage of parent element width */
font-size: 2em; /* multiples of element's original font-size */
font-size: 2rem; /* or the root element's font-size */
font-size: 2vw; /* multiples of 1% of the viewport's width (CSS 3) */
font-size: 2vh; /* or its height */
font-size: 2vmin; /* whichever of a vh or a vw is smaller */
font-size: 2vmax; /* or greater */
/* Absolute units */
width: 200px; /* pixels */
font-size: 20pt; /* points */
width: 5cm; /* centimeters */
min-width: 50mm; /* millimeters */
max-width: 5in; /* inches */
/* Colors */
color: #F6E; /* short hex format */
color: #FF66EE; /* long hex format */
color: tomato; /* a named color */
color: rgb(255, 255, 255); /* as rgb values */
color: rgb(10%, 20%, 50%); /* as rgb percentages */
color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 < a < 1 */
color: transparent; /* equivalent to setting the alpha to 0 */
color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */
color: hsla(0, 100%, 50%, 0.3); /* as hsla percentages with alpha */
/* Images as backgrounds of elements */
background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
/* Fonts */
font-family: Arial;
/* if the font family name has a space, it must be quoted */
font-family: "Courier New";
/* if the first one is not found, the browser uses the next, and so on */
font-family: "Courier New", Trebuchet, Arial, sans-serif;
}
```
## Usage
ஒரு css file ஐ save செய்ய `.css`.
```xml
<!-- உங்கள் css file ஐ <head>. உள் குறிப்பிட வேண்டும்
சரியான முறையை பார்க்க http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' />
<!-- நீங்கள் css ஐ html உள்ளும் எழுத முடியும் -->
<style>
a { color: purple; }
</style>
<!-- அல்லது css ஐ நேரடியாக அந்த element இல் எழுத முடியும் -->
<div style="border: 1px solid red;">
</div>
```
## Precedence அல்லது Cascade
ஒரு element ஆனது ஒன்றுக்கு மேற்பட்ட selectors மூலம் அணுகபடலாம் ,இவ்வாறான சந்தர்பங்களில்
ஒரு குறிபிட்ட விதிமுறையை பின்பற்றுகிறது இது cascading என அழைக்கபடுகிறது, அதனால் தன
இது Cascading Style Sheets என அழைக்கபடுகிறது.
கிழே தரப்பட்டுள்ள css இன் படி:
```css
/* A */
p.class1[attr='value']
/* B */
p.class1 { }
/* C */
p.class2 { }
/* D */
p { }
/* E */
p { property: value !important; }
```
அத்துடன் கிழே தரப்பட்டுள்ள கட்டமைப்பின்படியும்:
```xml
<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
```
css முன்னுரிமை பின்வருமாறு
* `E` இதுவே அதிக முக்கியத்துவம் வாய்ந்தது காரணம் இது `!important` பயன்படுத்துகிறது. இதை பயன்படுத்துவதை தவிர்க்கவும்
* `F` இது இரண்டாவது காரணம் இது inline style.
* `A` இது மூன்றவதாக வருகிறது, காரணம் இது மூன்று காரணிகளை குறிக்கிறது : element(உறுப்பு) பெயர் `p`, அதன் class `class1`, an அதன் பண்பு(attribute) `attr='value'`.
* `C` இது அடுத்த நிலையில் உள்ளது கடைசி.
* `B` இது அடுத்தது.
* `D` இதுவே கடைசி .
## css அம்சங்களின் பொருந்தகூடிய தன்மை
பெரும்பாலான css 2 வின் அம்சங்கள் எல்லா உலாவிகளிலும் , கருவிகளிலும் உள்ளன. ஆனால் முன்கூட்டியே அந்த அம்சங்களை பரிசோதிப்பது நல்லது.
## வளங்கள்
* To run a quick compatibility check, [CanIUse](http://caniuse.com).
* CSS Playground [Dabblet](http://dabblet.com/).
* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/)
## மேலும் வாசிக்க
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing
* [CSS-Tricks](https://css-tricks.com)
|
