D.A.C.S.I.T - Web » CSS

CSS là từ viết tắt của Cascading Style Sheets : công dụng dùngđể trang trí trang web của bạn, và thông thường được gắn với các ngôn ngữ như là HTML, PHP, dùng làm nổi bậc trang web và hình ảnh trang web của bạn.

Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng và kết thúc bằng và tiếp theo sau đó là khai báo

và sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn code như sau

Và sau đây là cấu trúc của CSS:

Tag {definition1; definition2;.....; definition n}

ví dụ sau đây về dòng lệnh của CSS:

H2 {font-size: 16pt; font-style: italic; font-family: arial}

Và sau đây chúng ta tìm hiểu về những cách hàm trong CSS:
1. Tìm hiểu về cách trang trí của font chữ:
a. font-family là dùng để khai báo kiểu loại font nào bạn sử dụng
ví dụ: H2 {font-family: arial}
b. font-style: là dùng để khai báo kiểu chữ bạn dùng trong style, bình thường hay nghiêng
ví dụ H3 {font-style: normal}
c. font-weight và font-variant: là dùng để trang trí kiểu font bạn đang dùng như là sáng (light), đậm (bold)
ví dụ A:link {font-weight: demi-light}
d. text-align: là vị trí nằm của font trong trang web, có 3 kiểu là nằm sang trái (left), phải (right) và ở giữa là (center)
ví dụ: H1 {text-align: center}
e. text-decoration: là dùng để trang trí kiểu font như là italic, blink…
ví dụ: A:visited {text-decoration: blink}
f. text-indent: dùng để size (kích cỡ) mà bạn đang dùng, thông thường dùng là

và

và khai báo đơn vị là in, cm, pixel
ví dụ : P {text-indent: 1in}
g. word-spacing: dùng để khoảng cách giữa các từ.
ví dụ: P {word-spacing: 10px}
h: letter-spacing: dùng để khoảng cách giữa các chữ
ví dụ: P {letter-spacing: 10px}
i. color: dùng để hiển thị màu cho kiểu chữ
ví dụ: H3 {color: #FFFFFF}
Để hiển thị đoạn màu bạn muốn, thì bạn nên vào photoshop và chọn màu bạn thích và sẽ hiện thị ra mã số và bạn chọn mã số đó.2.Chúng ta tìm hiểu về Margin/Background: khi bạn dùng thì nó sẽ ảnh hưởng đến toàn bộ trang web của bạn.
a. margin-left: đoạn canh lề bên trái
b. margin-right: đoạn canh lề bên phải
c. margin-top: đoạnh canh lền trên cùng
ví dụ chúng ta có thể dùng như sau

BODY {margin-left: 2in}
P {margin-right: 12cm}
BODY {margin-top: 45px}

d. margin: có thể khai báo chúng một lúc cho top, right và left như sau

 P {margin: 3in 4cm 12px}

e. line-height: là khoảng cách giữa các dòng chữ
ví dụ:

 TEXT {line-height: 10px}

f. background-color: là dùng để hiển thị màu nền của trang web
ví dụ:

 BODY {background-color: #ffffff}

g: background-image: bạn có thể dùng một tấm hình để làm background cho trang web bạn
ví dụ:

 BODY {background-image: http://www.page.com/dog.jpg}

h. background-repeat: là dùng để lập lại hình nền theo trục tọa độ x và y.
Ví dụ:

 BODY {background-repeat: repeat-y}

i. background-attachment: là dùng để gán hình, hình ảnh nền của trang web bạn, nó ko có thể di chuyển.
ví dụ:

BODY{background-attachment: fixed}

3.Chúng ta tìm hiểu về Position và Division:
a. Position: là dùng để định vị một ví trí xác định nào đó

b. left: là dùng để hình ảnh nằm về vị trí bên trái bao nhiêu

c. right: là dùng để hình ảnh nằm về vị trí bên phải bao nhiêu

d. Top: là dùng để định vị trí trên top của screen

e. Width: là dùng để xác định chiều ngang của tấm hình của bạn là bao nhiêu

f. height: là dùng để xác định chiều cao của tấm hình

g. overflow: là khi tấm hình của bạn quá kích cỡ cho phép thì nó có thể dùng những chức năng sau hidden, visible, scroll

và sau đây là đoạn code khi bạn nhìn thấy trong web:

Chúng ta sẽ đi tìm hiểu từng phần, phần thứ nhất chúng ta sẽ tìm hiểu vể TEXT: ví dụ dòng chữ sau

a:link là để hiển thị khi bạn nhìn thấy màu chữ là xanh
a:ative là để hiển thị màu đỏ khi bạn click vào dòng chữ đó
a:visited là để hiển thị màu xanh khi bạn nhìn thấy
a:hover là để hiện thì màu xanh lá cây khi bạn dùng con chuột đặt lên dòng chữ đó
Text-decoration: là dùng để trang trí dòng chữ ví dụ underline là gạch dưới
và sau đây là những code có tác dụng tương tự như trên nhưng thay đổi màu:

 a.tree:link { color: green; text-decoration: none }
a.tree:active { color: yellow; text-decoration: none }
a.tree:visited { color: red; text-decoration: none }
a.tree:hover { color: orange; text-decoration: underline }
a.dog:link { color: blue; text-decoration: none }
a.dog:active { color: red; text-decoration: none }
a.dog:visited { color: blue; text-decoration: none }
a.dog:hover { color: green; text-decoration: underline }

Index

Bạn có thể dùng đoạn text trên link đến một trang web nào khác như là nhothuong.html và cấu trúc luôn bắt đầu bằng và kết thúc href=”/ là dùng để link đến trang web mà bạn muốn tới.” Còn class=”tree” là dùng để khai báo tên của class đó.
Đây cũng là đoạn code cũng có tác dụng như trên

Index2

Và sau đây là những đoạn code, bạn có thể trang trí thêm làm để xung thêm chức năng của nó.

Bạn muốn đưa con trỏ của bạn vào CSS chỉ cần dùng dòng sau

CURSOR: url(tencontro.ani);

Tiếp theo sau chúng ta tìm hiểu về scroll bar trong CSS
ví dụ đoạn code sau:

scrollbar-base-color: orange; là hiển thị màu cam, cho nguyên thanh bar từ trên xuống dưới
scrollbar-arrow-color: green; là hiển thị màu xanh, cho 2 cái mũi tên lên và xuống
scrollbar-DarkShadow-Color: blue; là hiện thị bóng màu xanh của thanh scroll
scrollbar-base-color: là hình để hiển thị toàn bộ màu của thanh scroll
scrollbar-Face-Color: là để hiển thị màu trên bề mặt của thanh scroll
scrollbar-Highlight-Color: là để hiện thì màu hightlight của thanh scroll
Bài viết về các tùy biến trong giao diện ( rất tốt cho bạn nào muốn thay đổi màu sắc của skin forum )

Chèn ảnh nền vào phần nhập nội dung bài viết:
Vào Style & Templates/ Manager Style/ Main CSS
Tại phần Soạn thảo WYSIWYG ta thay phần màu nền background thành

#F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center

Trong đó tên “anhnen_text_box.gif” là tên ảnh mà bạn muốn chèn đặt tại thư mục images/misc/
Thế thui

Làm viền cho nút
Ta tới phần Nút (Button)
Thay vào giá trị màu nền là: #E4E7F5
Thêm vào ô thuộc tính CSS đặc biệt (phía bên phải của ô màu nền ấy):

 BORDER-RIGHT: #5182c2 1px dotted;
 BORDER-TOP: #5182c2 1px dotted;
 BORDER-LEFT: #5182c2 1px dotted;
 BORDER-BOTTOM: #5182c2 1px dotted;

Trong đó tên “anhnen_text_box.gif” là tên ảnh mà bạn muốn chèn đặt tại thư mục images/misc/
Thế thui

Làm viền cho nút
Ta tới phần Nút (Button)
Thay vào giá trị màu nền là: #E4E7F5
Thêm vào ô thuộc tính CSS đặc biệt (phía bên phải của ô màu nền ấy):

BORDER-RIGHT: #5182c2 1px dotted;
BORDER-TOP: #5182c2 1px dotted;
BORDER-LEFT: #5182c2 1px dotted;
BORDER-BOTTOM: #5182c2 1px dotted;

Sau đó bạn có thể thay các thuộc tính như:
màu sắc viền (#5182c2)
Độ dày viền : 1px dotted

Chèn ảnh nền vào thẻ Body của trang chủ. Cái này nếu biết cách sử dụng thì sẽ rất hữu ích
Tại phần Trang nền (Background page) ngay bên dưới phần Body đó ta nhập thuộc tính vào ô màu nền như sau:

#FFFFFF url(images/misc/dot.gif)

Sau đó bạn có thể thay các thuộc tính như:
màu sắc viền (#5182c2)
Độ dày viền : 1px dotted

 #FFFFFF url(images/misc/dot.gif)

Trong đó tên ảnh là “dot.gif” đặt trong thư mục “images/misc/”

Category Strips
‘Category Strips’ được dùng với hai mục đích. Nó được dùng để chỉ ra một ‘Chuyên mục’ diễn đàn, và nó cũng được sử dụng như một kiểu giao diện cho nội dung thanh tiêu đề của hầu hết các bảng.
Nếu ta muốn chèn ảnh vào phần thanh tiêu đề của “Chuyên mục” thì ta nhập vào ô màu nền như sau:

#FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left

Trong đó #FFFFFF (màu trắng) là màu nền còn ảnh nền thì các bạn cũng đã hiểu với phần trên.
Lưu ý rằng các bạn phải chú trọng cả đến màu ảnh nền và màu Font. Để cho 2 cái có độ tương phản cho dễ đọc

Màu đầu tiên (First color) và màu thứ hai (Second color)
Mô tả:
Hầu hết các bảng trong diễn đàn dùng màu đầu tiên hoặc thứ hai cho màu nền. Đặt thuộc tính để sử dụng ‘Màu đầu tiên’ tại đây.
Màu đầu tiên là màu nền của phần nội dung bài viết khi bạn xem chủ đề
Màu thứ hai là màu nền của phần có chứa tên sử dụng, Avatar, danh hiệu… của người viết bài
Các bạn nên sửa cho phù hợp với tông màu của màu nền diễn đàn một cách hài hoà.
Sau đây là thiết lập giao diện của tôi đã thực hiện. Tôi cho rằng giao diện này sửa thêm một vài chi tiết nữa thì chẳng kém giao diện của anh Admin bên này. Chú ý rằng giao diện đẹp thì phải đi đôi với bộ nút đẹp. Các bạn nên sắm cho mình một bộ nút ăn ý với giao diện. Còn bây giờ đây là phần giao diện của tôi:

Body
Giữ nguyên thiết lập gốc
———-
Trang nền (Background page)
Màu nền: #FFFFFF url(images/misc/dot.gif)
Màu Font: #000000
——————————
, ,

Giữ nguyên thiết lập gốc
————————-
Viền bảng
Giữ nguyên thiết lập gốc
——————————-
Category Strips
Màu nền: #FFFFFF url(images/misc/tm.gif) no-repeat center
Màu Font: #003366
Liên kết CSS bình thường
Màu nền: transparent
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: transparent
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: transparent
Màu Font: #006699
Text decoration: underline
—————————————–
Table Header
Màu nền: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left
Màu Font: #003366
Liên kết CSS bình thường
Màu nền: transparent
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: transparent
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: transparent
Màu Font: #006699
Text decoration: underline
————————————–
Table Footer
Màu nền: #FFFFFF
Màu Font: #003366
Liên kết CSS bình thường
Màu nền: transparent
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: transparent
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: transparent
Màu Font: #006699
Text decoration: underline
———————————-
Màu đầu tiên Màu thứ hai
Màu nền: #FFFFFF
Màu Font: #003366
Thuộc tính CSS đặc biệt:
border: 1px solid #E5E5E5;
———————————-
Soạn thảo WYSIWYG
Màu nền: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center
Màu Font: #003366
Thuộc tính CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
————————-
Ô nhập liệu
Thuộc tính CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
———————————-
Nút (Button)
Màu nền: #E4E7F5
Thuộc tính CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
————————————
Menu
Small Font
Time Color
Được giữ nguyên thiết lập gốc
————————————-
Navbar Text
Màu nền: #FFFFFF
Màu Font: #003366
————————————-
Highlighted Font
Màu nền: #FFFFFF
Màu Font: #FF0000
————————————
Panel Surround
Màu nền: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left
Màu font: #000000
———————————
Panel (Forms)
Màu nền: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left
Màu font: #000000
——————————–

Giữ nguyên
——————————–
Điều khiển menu Popup
Màu nền: #FFFFFF
Màu Font: #003366
Thuộc tính CSS đặc biệt:
padding: 3px 6px 3px 6px;
white-space: nowrap;
Liên kết CSS bình thường
Màu nền: #FFFFFF
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: #FFFFFF
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: #FFFFFF
Màu Font: #006699
Text decoration: underline
——————————-
Popup Menu Body
Giữ nguyên
——————————-
Tùy chọn dòng cho Menu Popup
Màu nền: #FFFFFF
Màu Font: #000000
Thuộc tính CSS đặc biệt
white-space: nowrap;
cursor: pointer;
Liên kết CSS bình thường
Màu nền: #FFFFFF
Màu Font: #22229C
Text decoration: None
Liên kết CSS đã vào:
Màu nền: #FFFFFF
Màu Font: #22229C
Text decoration: None
Liên kết CSS Hover
Màu nền: #FFFFFF
Màu Font: #FFFFFF
Text decoration: None
———————————
Menu chuyển nhanh
Item selected
Màu nền:#FFFFFF
Màu Font: #003366
———————————

10 lý do để học CSS ,DIV thay cho Table

admin — Fri, 06 Nov 2009 15:55:30 +0000

Xin giới thiệu đến bạn 10 lý do, những tiện ích cơ bản để học CSS, DIV thay cho Table khi xây dựng Website của bạn

1. Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng “hack” thẻ HTML để tạo hiệu quả cho website Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.

2. Tăng tốc độ website.
Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.
Theo cơ sở của DOM thì:
- Table: web browser phải load cả

…

thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load

là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client

3.Thời gian phát triển website nhanh hơn
Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.

4. Typography thể hiện ngầu hơn
CSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ – tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.

5. Dễ viết
Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.

6.Khả năng phát triển.
Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.

7. Thiết kế dành cho in ấn cũng đẹp như dành cho web. CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint

8. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.

9. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.

10. Cải thiện vị trí trong các website tìm kiếm. Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.