Tác giả: dEpTrAi714
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 <HEAD> và kết thúc bằng
</HEAD> và tiếp theo sau đó là khai báo <STYLE TYPE="text/css"> và kết thúc bằng
</STYLE>
và sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn code như sau
<head>
<style type="text.css">
và ở gi
ữa này là nơi bạn thêm vào sau này
</style>
</head>
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}
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 đó
<IMG STYLE="position:absolute"
b. left: là dùng để hình ảnh nằm về vị trí bên trái bao nhiêu
<IMG STYLE="position:absolute; LEFT: 20px;" src="joe.jpg">
c. right: là dùng để hình ảnh nằm về vị trí bên phải bao nhiêu
<IMG STYLE="position:absolute; RIGHT: 20px;" src="joe.jpg">
d. Top: là dùng để định vị trí trên top của screen
<IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt" src="joe.jpg">
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
<IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt"
f. height: là dùng để xác định chiều cao của tấm hình
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 }
<a href="index.html" class="tree">Index</a>
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 <a> và kết thúc </a> 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
<a href="index2.html" class="dog">Index2</a>
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ó.
<STYLE TYPE="text/css"> a:link { color: green; text-decoration: none } a:active {
color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none
} a:hover { color: green; text-decoration: underline; background: #F9EDED }
</STYLE>
<STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active {
color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none
} a.hover { color: orange; text-decoration: underline; font-family : Verdana, Arial,
Helvetica, sans-serif; } </STYLE>
<STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active {
color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none
} a.hover { color: orange; text-decoration: underline; font-size:40pt } </STYLE>
<STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active {
color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none
} a.hover { color: orange; text-decoration: underline; font-weight: bold} </STYLE>
<STYLE TYPE="text/css"> a.italic:link { color: green; text-decoration: none }
a.italic:active { color: yellow; text-decoration: none } a:italic:visited { color: green;
text-decoration: none } a.italic:hover { color: orange; text-decoration: underline;
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
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
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
<td>, <th>, <p>, <li>
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
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;
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
Copyright: Tài liệu đại học ©