Người Viết : ViKiMi Editor

Cách sử dụng HTML Style – CSS để tạo nên một bộ khung hiển thị cho Website của Bạn
Có lẽ bạn thắc mắc làm thế nào để có thể dễ dàng làm chủ cách xây dựng một khung Website bằng HTML. Điều này thật sự không khó, chỉ có một số kiến thức cơ bản là bạn đã có thể làm chủ tình hình. Cũng giống như việc bạn xây dựng một ngôi nhà vậy, Bạn sẽ cần những chất liệu để làm cho ngôi nhà đẹp hơn và có Bố cục nó từ các phần tử HTML.
Vậy điều này là những thứ gì mà bạn cần phải biết tới.
Rõ ràng đó là 2 thành phần mà bạn nên quan tâm ngay :
+ HTML Style – CSS ( / Cascading Style Sheets )
+ HTML JavaScript ( / Hoặc sử dụng thư viện jQuery )
Ban đầu, chúng ta sẽ làm quen với HTML Style – CSS
Dưới đây là những sơ lược về cách sử dụng để bạn có thể làm quen ngay với HTML – Style CSS.
HTML – STYLE ( Cascading Style Sheets )
CSS là một ngôn ngữ giúp bạn kiểm soát bố cục nhiều trang Web một lúc. Do đó Bạn có thể quản lý mọi thứ một cách khoa học và Tiết kiệm thời gian công sức.
MỘT VÍ DỤ VỀ SỬ DỤNG CSS :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
color: blue;
font-size: 13px;
}
</style>
</head>
<body>
<h1 style = "color : red;" >TIÊU ĐỀ 1. </h1>
<p style = "font-weight : bolder;" > Đoạn văn số 1. </p>
</body>
</html>
Bạn có thể thấy CSS LÀ phần được bôi XANH LÁ CÂY.
Nhờ có CSS mà bạn có thể dễ dàng xây dựng một bộ khung, tạo kiểu cho Website. Cũng giống như một ngôi nhà, thì Website cũng cần phải có khung và có kiểu. Bạn có thể thấy rõ công dụng của CSS.
CÁCH SỬ DỤNG HTML STYLE – CSS :
A ] CSS NỘI TUYẾN / INLINE CSS
+ CSS nội tuyến được sử dụng để áp dụng HTML STYLE – CSS cho một thành phần HTML. Và nó chỉ ảnh hưởng đến thành phần đó, không ảnh hưởng đến các thành khác hoặc toàn bộ Website.
+ CSS nội tuyến được sử dụng bằng thuộc tính style của phần tử HTML.
Example ::
+ Chỉ áp dụng kiểu CSS cho thẻ <H1>
Tạo kiểu cho thẻ H1 :
Độ rộng bằng 40% độ rộng của phần tử Cha.
Chiều cao bằng 20% chiều cao của phần tử Cha.
Màu chữ là Blue.
<div style = “width: 100%;”>
<h1 style=”color: blue; width: 40%; height :20%; “> A Blue Heading </h1>
</div>
+ Chỉ áp dụng kiểu CSS cho thẻ <P>
<p style=”color: red; “> A red paragraph. </p>
B ] CSS NỘI BỘ / INTERNAL CSS
CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML. Và nó sẽ áp dụng kiểu cho toàn bộ trang HTML có chứa nó.
CSS nội bộ được xác định trong thẻ <head> của trang HTML
Và bên trong phần tử <style>, toàn bộ những định nghĩa kiểu HTML STYLE – CSS sẽ đặt tại đây.
Rất dễ dàng để sử dụng.
Example ::
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
ĐÂY LÀ PHẦN BODY .
<h1> ĐÂY LÀ TIÊU ĐỀ. </h1>
<p> ĐÂY LÀ ĐOẠN VĂN 1. </p>
<p> ĐÂY LÀ ĐOẠN VĂN 2. </p>
</body>
</html>
Bạn thấy CSS NỘI BỘ rất dễ dùng. Toàn bộ những định nghĩa CSS bên trong thẻ <STYLE> sẽ áp dụng cho toàn bộ trang HTML chứa nó. Tất cả những thành phần so khớp sẽ được định nghĩa kiểu phù hợp.
C ] CSS BÊN NGOÀI / EXTERNAL CSS
CSS bên ngoài giúp định nghĩa kiểu cho bất kỳ trang HTML nào chứa nó.
Công việc là bạn chỉ cần thêm liên kết tới CSS bên ngoài tại trang HTML. Và bạn có thể sử dụng CSS bên ngoài cho HTML ĐÓ.
Hãy thêm liên kết tại phần <head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href= "styles.css" >
</head>
<body>
<h1>ĐÂY LÀ TIÊU ĐỀ H1</h1>
<p>Đây là đoạn văn bản 1.</p>
<p>Đây là đoạn văn bản 2.</p>
</body>
</html>
Như vậy, bạn đã có thể liên kết đến một EXTERNAL CSS là file styles.css
Và file này như sau :
[ styles.css ]
body {
background-color: powderblue;
width : 80%;
}
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
border: 2px solid powderblue;
margin: 50px;
padding: 30px;
}
Trên đây bạn đã thấy cách cơ bản để sử dụng HTML STYLE – CSS. Những cách thông dụng này giúp bạn dễ dàng xây dựng bố cục một Website và tạo kiểu cho nó. Tất nhiên bạn sẽ phải áp dụng nó trong toàn bộ quá trình xây dựng Website. Thông thường khi bạn mới làm quen thì có thể thử với width và float cho các phần tử của Trang Web.
Những kiến thức về CSS bạn có thể tìm hiểu tại mục CSS.
Bạn cũng thấy trong file styles.css đã sử dụng các thành phần CSS nữa là :
+ Font, Padding, Margin, Border ….
Tất cả liên quan đến CSS cũng rất quan trọng / Nếu bạn muốn dùng một thứ khác thì cũng có thể chọn BOOTSTRAP.