Bài học căn bản về 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ữ 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> 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>
Ở giữa này là nơi bạn thêm vào sau này các thiết kế riêng của bạn
</style>
</head>
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}
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à <p> và </p> 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://daotaolaptrinh.edu.vn/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}
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>
a. Position: là dùng để định vị một ví trí xác định nào đó
<IMG STYLE=”position:absolute” src=”joe.jpg”>
3.Chúng ta tìm hiểu về Position và Division:
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
<IMG STYLE=”position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt” src=”joe.jpg”>
