Bài 7: Học HTML, Định dạng các phần tử HTML bằng CSS (phần 1)

Hôm nay chúng ta sẽ chuyển sang học nội dung mới.

Bài 7: Định dạng các phần tử HTML bằng CSS

(phần 1)

HTML, học HTML, CSS

Nội dung này sẽ giúp các bạn hiểu rõ hơn về ý nghĩa của việc dùng kiểu( style), tra cứu thành thạo các thuộc tính trong bảng danh sách kiể và đặc biệt là các bạn sẽ vận dụng các thuộc tính (kiểu) để định dạng cho các phần tử trong trang web, nâng cao tính thẩm mỹ cho website của bạn.

Nội dung chi tiết:

1. Đôi nét về kiểu

Kiểu (style) thực chất là một cách định nghĩa thuộc tính cho các phần tử trong trang web theo một cách thức mới.

Việc định nghĩa các thuộc tính này cho các phần tử sẽ cho ta một "dáng vẻ mới", một "diện mạo mới" về trang web. Ngoài ra, việc định nghĩa thuộc tính theo cú pháp mới này sẽ làm tiền đề cho việc xây dựng các trang web động mà ta sẽ đề cập trong các chương tiếp theo.

Ví dụ: Trước đây, để định nghĩa một đoạn văn bản nằm trong thẻ <P> có font chữ là .vntime, chúng ta sẽ viết như sau:

<P ><FONT face=.VnTime>Dòng văn bản này có font chữ là .vntime</Font></p>

Nhưng với cách định dạng mới theo cú pháp mà ta gọi là cú pháp CSS, thì có thể thực hiện yêu cầu trên như sau:

<P style= "font-family:.vntime">Dòng văn bản này có font chữ là .vntime </P>

2. Cách khai báo kiểu( style)

Trong JavaScript, bạn có thể thiết lập các thuộc tính cho một thẻ nào đó theo rất nhiều cách.

Dưới đây là 4 cách thiết lập thuộc tính cho thẻ các bạn có thể tham khảo

* Thiết lập (Định nghĩa) thuộc tính ngay trong khi định nghĩa thẻ (tag), kiểu này còn gọi là
định nghĩa kiểu ở mức dòng (style line)

* Thiết lập thuộc tính cho toàn bộ một loại thẻ nào đó. Cách này còn gọi là định nghĩa bộ chọn

* Định nghĩa một lớp, sau đó có thể đem ra sử dụng cho bất kỳ phần tử nào

* Định nghĩa bộ chọn ID, cho phép áp dụng tất cả các thuộc tính của bộ chọn vào tất cả các thẻ có thuộc tính ID phù hợp với mã ID trong định nghĩa

3. Style áp dụng ở mức dòng( Inline style)

Style mức dòng (inline style) cho phép bạn có thể thay đổi hình thức (style) của một phần tử nào đó bằng cách thêm các thuộc tính định dạng trực tiếp vào ngay bên trong định nghĩa của thẻ.

Một số ví dụ minh hoạ

+ Để tạo một dòng văn bản với thẻ <P>; có màu chữ là xanh, bạn có thể viết như sau:

<P style = "color:blue"> Màu này là màu của hoà bình <P>.
Kết quả cho ta : Màu này là màu của hoà bình

+ Để tạo một một button (Nút nhấn) có màu nền là đỏ(red), bạn viết:
<input type="button" style="background-color:red" value="Hello world">
Kết quả :

+ Tạo một nút nhấn (Button), trong đó, khi người dùng đưa chuột đến nút đó thì con trỏ chuột có hình bàn tay
Thuộc tính qui định chuột có kiểu hình bàn tay là "cursor:hand", do vậy cần thêm thuộc tính này trong định nghĩa thẻ
<Input type = button style = "cursor:hand" value="Chuột hình bàn tay ">
Ta được kết quả (Bạn di chuột vào nút này):

+ Tạo một textbox có viền màu đỏ
Thuộc tính tạo viền màu đỏ là : "background-border:red", do vậy bạn cần đặt vào trong định nghĩa thẻ text như sau:
<input type="text" style="border-color:red" value="vien mau đo">
Kết quả cho ta một textbox có viền màu đỏ:

=>Trong các ví dụ ở trên, chúng ta có thể thiết lập một số thuộc tính của bất kỳ phần tử nào bằng cách đưa vào dòng style = "Tên thuộc tính:Giá trị của thuộc tính" Trong đó, Cặp tên thuộc tính : Giá trị của thuộc tính các bạn có thể tra trong bảng các thuộc tính. đợc đặt trên thư mục của máy chủ. Có thể đưa vào một hoặc nhiều thuộc tính trong biểu thức style="...." , khi đưa nhiều thuộc tính thì các thuộc tính cách nhau bởi dấu chấm phảy ";"

+ Tạo một nút nhấn có màu nền là tím (magenta) và màu chữ là trắng (white)
Thuộc tính qui định màu nền tím là :"background-color:magenta", Còn thuộc tính qui định màu chữ trắng là "color:white"
Như vậy cần định nghĩa thẻ là : <input type ="button" style="background-color:magenta; color:white" value="Nền tím- chữ trắng">

+ Thiết lập ảnh nền của trang Web là anh1.jpg, và ảnh này hiển thị ở vị trí cố định (Tức là nếu bạn có cuộn thanh cuộn của cửa sổ thì ảnh này sẽ không bị cuộn theo mà vẫn đứng yên).
Biết rằng thuộc tính đưa ảnh nền vào trang web như sau:
background-image:url( ' <Đường dẫn và tên file ảnh> ')
Thuộc tính để ảnh ở vị trí cố định là :
background-attachment:fixed
Lưu ý: đặc tính ảnh cố định chỉ có trong IE, không có trong Nescape
Như vậy, yêu cầu trên có thể thực hiện như sau:
<body style="background-image:url('anh1.jpg'); background-attachment:fixed; color:white; font-family:arial">
Tạo các liên kết đến các trang http://www.php.niit.vn , http://www.html.edu.vn, nhưng các liên kết này không có đường gạch chân và có các thuộc tính như sau:

Màu chữ : Đỏ (red)
Màu nền : lavender
Màu khi chuột click vào liên kết : tím (magenta)
Màu khi trang đó đã được thăm : nâu (brown)
Hướng dẫn:
Thuộc tính qui định màu chữ của liên kết là: linkColor, thuộc đối tượng document
Thuộc tính qui định màu nền của văn bản trong một thẻ : background-color (CSS)
Thuộc tính qui định của liên kết khi bị click chuột : alinkColor, thuộc document
Thuộc tính qui định màu của liên kết đã được thăm: vlinkColor, thuộc document
Minh hoạ (Soạn trong Dreamweaver):

Định nghĩa style ở mức dòng

HTML - Khoa hoc HTML5 + CSS 3

Thứ Hai, 13 tháng 5, 2013