Guitar Solo - Multimedia - Malware Reverse Engineering - Craking - Make Money Online: [Net] CSS

CSS - Khái niệm và khai báo

CSS (cascading style sheet) cho phép bạn định dạng(font chữ, kích thước, màu sắc ....) của các đối tượng sử dụng css đó.ưu điểm của CSS là tách riêng phần định dạng ra riêng khỏi phần nội dung do đó rất tiện khi bạn muốn thay đổi giao diện của một website.

Sử dụng CSS, có 2 cách:
- khai báo CSS trong file HTML

HTML

nội dung của web và sử dụng các định dạng của CSS

- sử dụng CSS được định nghĩa từ một file riêng:

HTML

hoặc

HTML

<head>
<title><title>
<style type="text/css"> @import url(Path To stylesheet.css) </style>
</head>
<body>

** Tiện lợi của việc định nghĩa một file css sau đó gọi vào trong trang HTML thay vì định nghĩa các CSS trực tiếp trong HTML

QUOTE

- code CSS nằm riêng trong một file nên dễ quản lý không bị rối
- nếu có nhiều file cùng sử dụng một file css thì chỉ cần thay đổi file css thì phần định dạng của tất cả các file sử dụng nó cũng được cập nhật(tiện lợi khi update giao diện cho website)
- đỡ tốn bandwidth hơn (do file được load một lần và được dùng lại cho các lần sau)

Chương 2 - cú pháp CSS

Cú pháp của một css:

CODE

tên_css { thuộc_tính: giá_trị_của_thuộc_tính; }

Ví dụ:

HTML

body {
background: #eeeeee;
font-family: Verdana, Arial, serif;
}

Tính kế thừa:
như ví dụ trên thì tòan bộ các tag HTML có tên body + những tag HTML nằm trong body đều được định dạng theo body, nghĩa là background: #eeeeee và font-family: Verdana, Arial, serif; mà body là thẻ lớn nhất chưa nội dung của website cho nên tất cả các tag khác đều sử dụng các định dạng của body

Trong trường hợp muốn sử dụng một định dạng khác trong một đối tượng nhỏ hơn body giả sử: p thì chỉ việc định nghĩa thêm đối tượng đó

HTML

p {font-family: Tahoma, serif;}

lúc này tất cả nội dung trong thẻ HTML đều có font là Tahoma chứ khônng phải Verdana của body

Tính kết hợp:
có thể định nghĩa nhiều css cùng một thuộc tính
Ví dụ:

HTML

h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

=> định nghĩa cung một thuộc tính cho tất cả các tag h1,h2,h3,h4,h5,h6 thay vì phải định nghĩa:

HTML

h1{
color: #009900;
font-family: Georgia, sans-serif;
}
......................
h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

Ghi chú thích(comment)
các đoạn chú thích trong CSS được đặt trong dấu

HTML

/* This is a comment */

Chương 3: CSS Classes

Class cho phép định dạng style của các đối tượng(table,td,div,span...) Bạn có thể sử dụng lặp đi lặp lại nhiều lần trong cùng một file HTML
Ví dụ:

HTML

kết quả:

QUOTE

SPAN P
DIV

Chương 4: IDs

[font="Arial"]Cũng giống như class nhưng ID chỉ được sử dụng một lần.Nếu sử dụng nhiều lần một id thì vẫn được tuy nhiên nó không đúng chuẩn của w3c và sẽ gặp rắc rối khi bạn dùng ID trong javascript

Ví dụ:

HTML

kết quả:

QUOTE

ABC

** sử dụng dấu # cho IDs và dấu . cho class

Chương 5: DIV

DIV dùng để chứa một vùng dữ liệu, trong div có thể chứa các tag khác table,span,div,.....

Ví dụ:

HTML

** có thể sử dụng class và id cho div

Chương 6: SPAN

SPAN rất giống với div & span để biết thêm sự khác nhau

Ví dụ:

HTML

Chương 7: CSS Margins

Ngòai ra có thể định giá trị cho cả top,left,bottom,right trên cùng một thuộc tính:

CODE
margin: 10px 5px 0px 3px;

dòng này tương đương:

[size=2]

CODE

margin-top: 10px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 3px;

(margin: 10px 5px 0px 3px; theo thứ tự: top,right,bottom,left - thuận chiều kim đồng hồ bắt đầu từ top)

Nếu chỉ set 1 giá trị:

CODE

margin: 10px;

thì được xem như cho cả 4 thuộc tính cho nên dòng này tương đương
CODE
margin: 10px 10px 10px 10px;

** có thể sử dụng margin: 0; thay cho margin: 0px;

Có thể set giá trị âm cho margin:

CODE

margin: -10px 5px 5px 5px;

Chương 8: padding

Padding dùng để xác định khoảng cách giữa nó và đối tượng bao quanh nằm trong nó, ta có thể sử dụng 4 thuộc tính của padding

CODE

padding-left: length/percent;
padding-right: length/percent;
padding-top: length/percent;
padding-bottom: length/percent;
để định khoảng cách cho left,right,top,bottom

Có thể sử dụng một trong 2
- length (px,pt)
- percent (%)

để xác định giá trị cho các thuộc tính trên.

Ngoài ra có thể định giá trị cho cả top,left,bottom,right trên cùng một thuộc tính:

CODE
padding: 10px 5px 0px 3px;

dòng này tương đương:

CODE

padding-top: 10px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 3px;

(padding: 10px 5px 0px 3px; theo thứ tự: top,right,bottom,left - thuận chiều kim đồng hồ bắt đầu từ top)

Nếu chỉ set 1 giá trị:

CODE

padding: 10px;

thì được xem như cho cả 4 thuộc tính cho nên dòng này tương đương
CODE
padding: 10px 10px 10px 10px;

** có thể sử dụng padding: 0; thay cho padding: 0px;

Chương 9: CSS Text

Một số định dạng cho Text:

- color: định dạng màu cho text
CODE
color: values;

trong đó values có thể là:
+ dạng tên: red,white...
+ dạng hex: #000000,#ff00cc,...
+ dạng rbg: rgb(255, 0, 0), rgb(0, 0, 0)...

- Letter Spacing: khoảng cách giữa các ký tự
CODE
letter-spacing: value;

trong đó value có thể là:
+ normal(normal)
+ length(1px,1pt...)
ví dụ:

CODE

ABC

kết quả: A B C

- Text Align: canh lề khối văn bản

CODE

text-align: value;

trong đó values có thể là:
+ left
+ right
+ center
+ justify

- Text Decoration
CODE
text-decoration: value;

trong đó value có thể là 1 trong các giá trị sau
+ none
+ underline (gạch chân)
+ overline (gạch trên đầu)
+ line through (gạch xuyên chữ)
+ blink

- Text-indent: định dạng thụt đầu dòng cho dòng đầu tiên trong một đoạn văn
CODE
text-indent: value;

trong đó value có các giá trị :
+ length : 1px,1pt..
+ percentage: 5%,10%..

- Text Transform: định dạng chữ hoa chữ thường
CODE
text-transform: value;

trong đó value gồm các giá trị:
+ none
+ capitalize
+ lowercase
+ lowercase
ví dụ:

HTML

<span style="text-transform: capitalisze;">ThIS Text IS ALL LOWERCASE. THOUGH IT IS ALL UPPERCASE IN MY FILE.</span>
<span style="text-transform: lowercase ;">ThIS Text IS ALL LOWERCASE. THOUGH IT IS ALL UPPERCASE IN MY FILE.</span>
<span style="text-transform: lowercase ;">ThIS Text IS ALL LOWERCASE. THOUGH IT IS ALL UPPERCASE IN MY FILE.</span>

kết quả:
this first letter in each word is capitalized, though it is not in my file.

this text is all uppercase, though it is all lowercase in my file.

THIS TEXT IS ALL LOWERCASE. THOUGH IT IS ALL UPPERCASE IN MY FILE.

- White Space:
CODE
white-space: value;

trong đó value gồm các giá trị:
+ normal
+ pre
+ nowrap

- Word Spacing
CODE
word-spacing: value;

trong đó valu gồm các giá trị
+ normal
+ length (1,2...)
ví dụ:

HTML

<span style="word-spacing: 5px;">These words are spaced </span>

kết quả:

QUOTE

These words are spaced

Chương 10: CSS Font Properties

Font định dạng style của text như font,size,color,.....

- font-family: định dạng font

CODE

font-family: value;

font-family: Verdana, sans-serif; : set font Verdana là font mặc định, nếu không có font Verdana trên máy thì sử dụng font sans-serif

- Font Size: định kích thước cho text
CODE
font-size: value;

trong đó value có thể là:
+ xx-large
+ x-large
+ larger
+ large
+ medium
+ small
+ smaller
+ x-small
+ xx-small
+ length ( như: px,pt,in,cm,mm,...)
+ % (percent)

- Font Style: địn dạng in đậm,in nghiêng...
CODE
font-style: value;

trong đó value bao gồm:
+ normal
+ itailc
+ oblique

- Font Weight: định dạng độ lớn của text
CODE
font-weight: value;

trong đó value gồm các giá trị:
+ lighter
+ normal
+ 100
+ 200
+ 300
+ 400
+ 500
+ 600
+ 700
+ 800
+ 900
+ bold
+ bolder

Qua bài này có lẽ các bạn phần nào hình dung được CSS là gì và cách triển khai nó trên web của mình rồi phải không nào ! Thân, chúc các bạn vui !
RefLink:http://www.angiangonline.net/diendan/index.php?showtopic=1631

Guitar Solo - Multimedia - Malware Reverse Engineering - Craking - Make Money Online

Trao đổi với tôi

1/11/10

[Net] CSS - khái niệm và kiến thức cơ bản