Kiến thức cơ bản về CSS

Heo Còi

Giới thiệu về CSS

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

<head>
<title><title>
<style type="text/css">
nội dung các css
</style>
</head>
<body>


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


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

<head>
<title><title>
<link rel="stylesheet" type="text/css"href="style.css" />
</head>
<body>


hoặc
<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
- 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)

Cú pháp CSS

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

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

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 đó
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ông 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ụ:

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:

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
/* This is a comment */


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ụ:

<style>
.php { color: red; }
</style>
<span class="php">SPAN</span>
<p class="php">P</p>
<div class="php">DIV</div>


kết quả:
SPAN
P
DIV

IDs

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ụ:
<style>
#php { color: red; }
</style>
<div id="php">ABC</div>


kết quả:
ABC

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

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ụ:
<style>
#container{
  width: 70%;
  margin: auto;
  padding: 20px;
  border: 1px solid #666;
  background: #ffffff;
}
</style>
<div id="container">
Nội dung website  
</div>


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

SPAN

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

Ví dụ:
<style>
.italic{  
  font-style: italic;  
}
</style>

  
<span class="italic">Nội dung trên 1 dòng</span>

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:

margin: 10px 5px 0px 3px;

dòng này tương đương:  
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ị:
margin: 10px;  
thì được xem như cho cả 4 thuộc tính cho nên dòng n� y tương đương
margin: 10px 10px 10px 10px;
** có thể sử dụng margin: 0; thay cho margin: 0px;

Có thể set giá trị âm cho margin:
margin: -10px 5px 5px 5px;

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


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:

padding: 10px 5px 0px 3px;

dòng n� y tương đương:  
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ị:
padding: 10px;  
thì được xem như cho cả 4 thuộc tính cho nên dòng n� y tương đương
padding: 10px 10px 10px 10px;
** có thể sử dụng padding: 0; thay cho padding: 0px;

CSS Text

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


- color: định dạng màu cho text
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ự
letter-spacing: value;
trong đó value có thể l� :
+ normal(normal)
+ length(1px,1pt...)
ví dụ: <span style="letter-spacing:5px;">ABC</span>
kết quả: A B C

- Text Align: canh lề khối văn bản
text-align: value;
trong đó values có thể l� :
+ left
+ right
+ center
+ justify

- Text Decoration
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
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
text-transform: value;
trong đó value gồm các giá trị:
+ none  
+ capitalize  
+ lowercase  
+ lowercase  
ví dụ:
<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:
white-space: value;
trong đó value gồm các giá trị:
+ normal  
+ pre  
+ nowrap  

- Word Spacing
word-spacing: value;
trong đó valu gồm các giá trị
+ normal  
+ length (1,2...)
ví dụ:
<span style="word-spacing: 5px;">These words are spaced </span>
kết quả: These  words  are  spaced

CSS Font Properties

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

- font-family: định dạng font
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
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...
font-style: value;
trong đó value bao gồm:  
+ normal  
+ itailc  
+ oblique  

- Font Weight: định dạng độ lớn của text
font-weight: value;
trong đó value gồm các giá trị:
+ lighter  
+ normal  
+ 100  
+ 200  
+ 300  
+ 400  
+ 500  
+ 600  
+ 700  
+ 800  
+ 900  
+ bold  
+ bolder

talama3000

ôi hay quá cảm ơn anh win nhé cái

Mr.Mad-Soul

Post by talama3000;4845
ôi hay quá cảm ơn anh win nhé cái

Bài nào cũng ôi hay quá hay ôi thích quá ! đề nghị mod phải gương mẫu chịu khó post chủ đề nhé ! spam vừa phải !