CSS - 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>
|
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}
|
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
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
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)
|
|
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)
e. text-decoration: là dùng để trang trí kiểu font như là italic, blink…
|
|
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à <p> và </p> và khai báo đơn vị là in, cm, pixel
g. word-spacing: dùng để khoảng cách giữa các từ.
h: letter-spacing: dùng để khoảng cách giữa các chữ
i. color: dùng để hiển thị màu cho kiểu chữ
Để 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.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
e. line-height: là khoảng cách giữa các dòng chữ
f. background-color: là dùng để hiển thị màu nền của trang web
|
|
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
|
|
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.
|
|
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.
|
|
BODY{background-attachment: fixed}
|
3.Position và Division:
a. Position: là dùng để định vị một ví trí xác định nào đó
|
|
<IMG STYLE="position:absolute" src="/joe.jpg">
|
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" src="/joe.jpg">
|
f. height: là dùng để xác định chiều cao của tấm hình
|
|
<IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP: 200pt" src="/joe.jpg">
|
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
|
|
<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt" src="/joe.jpg">
|
và sau đây là đoạn code khi bạn nhìn thấy trong web:
|
|
<!--
BODY {background: #FFFFFF}
A:link {color: #80FF00}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
--> </STYLE>
|
|
|
<STYLE TYPE="text/css">
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
</STYLE>
|
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 }<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; font-style: italic}
</STYLE>
|
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);
|
Tìm hiểu về scroll bar trong CSS
|
|
<STYLE
TYPE="text/css"> BODY { scrollbar-base-color: orange;
scrollbar-arrow-color: green; scrollbar-DarkShadow-Color: blue; }
</STYLE>
|
- 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
Làm viền cho nút
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
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)
|
Trong đó tên ảnh là “dot.gif” đặt trong thư mục “images/misc/”
(sưu tầm)
