HTML: Sử dụng CSS (Cascading Style Sheet) thiết kế Website ~ Học Lập Trình Tại Đà Nẵng

1. GIỚI THIỆU

- Bảng kiểu (style sheet) nhằm thỏa mãn nhu cầu thẩm mỹ, tiện dụng nhưng giữ tính thống nhất cho trang HTML. CSS (Cascading Style Sheet) cho phép định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang được đánh dấu bằng thẻ đặc biệt

- Tiện ích của CSS là:

Tiết kiệm thời gian
Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó
Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt

- Bất lợi của CSS:

Không một trình duyệt nào chấp nhận nó hoàn toàn
Phải mất thời gian để học cách sử dụng

2. CÁCH TẠO:

Một bảng mẫu được tạo bằng một tên thẻ và một hay nhiều các định nghĩa để xác định cách thức hiển thị của các đối tượng được đánh dấu bằng thẻ đó

2.1. Phân loại và cách tạo:

Có 3 loại :

Inline style
Internal style
External style

a. Inline style:
Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng cách sử dụng thuộc tính style bên trong thẻ muốn định dạng
Cú pháp:
<TagName Style=”property1:value1;property2: value2;…”>
Nội dung văn bản muốn định dạng
</TagName>
Ví dụ : <HTML>
<HEAD>
<TITLE>Setting Properties</TITLE>
</HEAD>
<BODY>
<P style = “color:aqua ; font- Style:italic, text- Align:center”>
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = color:red>difference </SPAN> inthis line
</BODY>
</HTML>
b. Internal style: Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản, bằng cách tạo bảng mẫu chung trên đầu trang và dùng cho cả trang HTML
Cú pháp:
<Head>
<Style>
TagName{property1: value 1; property2: value 2…}
(lặp lại cho mỗi tag có thuộc tính cần định dạng)
</Style>
</Head>
Ví dụ :
<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1,H2 { color: limegreen; font-family: Arial }
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as displayed in the browser</H3>
</BODY>
</HTML>
c. External style: Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML. Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một Website.
- Cách tạo:

Tạo một tập tin văn bản mới
Nhập tên các tag muốn định dạng thuộc tính theo mẫu:

TagName{property1: value1; property2:value2;…}

Lưu tập tin với định dạng Text Only và có phần mở rộng .css

- Cách dùng External style:
Cú pháp:
<Head>
<Link Rel=StyleSheet Type=”text/css” Href=”tên tập tin.css”>
</Head>
Ví dụ:
Tạo tập tin Sheet1.css

Trang1.htm
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<BODY>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
</BODY>
</HTML>
Trang2.htm
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<BODY>
<H2> This document ues the sheet1 style sheet</H2>
<P>Selecting this option could delete all your files
<H2>The H2 element again</H2>
</BODY>
</HTML>
3. ĐỊNH BẢNG MẪU CHO LỚP (CLASS):
Có thể chia các yếu tố trong HTML thành các lớp để áp dụng kiểu mẫu hiệu quả hơn
Cú pháp:
- Trong phần <Style > nhập cú pháp:
<STYLE>
.ClassName{thuộc tính1:giá trị1;thuộc tính2:giá trị2;…}
</STYLE>
- Trong phần <Body>, đánh dấu phần nằm trong lớp bằng cú pháp:
<Body>
<TagName Class=”ClassName”>Nội dung </TagName>
</Body>
Ví dụ:
<HTML>
<HEAD>
<STYLE>
.water{color:blue}
.danger{color:red}
</STYLE>
</HEAD>
<BODY>
<p class=water>test water
<P class=danger>test danger
</BODY></HTML>
3.1. Định các tag riêng biệt:
Dùng áp dụng cho một phàn tử riêng biệt trên trang Web
Cú pháp:
- Trong Tag Style nhập :
TagName#IDName{th/tính1: giá trị1; thuộc tính2: giá trị 2;…}
- Trong tag Body nhập :
<TagName ID=IDName> Nội dung</TagName>
Ví dụ 1:
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
#control { color: red ;FONT-WEIGHT:BOLD}
</STYLE>
</HEAD>
<BODY>
<SPAN id='control'>Fire is this color</SPAN>This paragraph has no style applied
</BODY></HTML>
Ví dụ 2:
<HTML>
<HEAD><TITLE> combining ID and class Selector</TITLE>
<STYLE>
.forest { color: green;font-weight:bold }
.danger { color: red;font-weight:bold }
#control{ color: blue;font-weight:bold }
</STYLE>
</HEAD>
<BODY>
<P class='forest'>green things
<P class='danger'>fire hazards
<EM class='forest'> more green things</EM><BR>
<EM class='danger'>more fire hazards</EM>
<UL>
<LI class='danger'>things that burn
<LI class='forest'>things that don’t burn
</UL>
<P id='control'> water </P>
</BODY>
</HTML>
3.2. Tạo các tag tuỳ ý:

Có 2 loại tag chung có thể kết nối Class hay các ID để tạo các tag tuỳ ý. Cần phân biệt đối tượng cấp khối và cấp hàng:

- Đối tượng cấp khối như một đoạn văn, thường bắt đầu một dòng mới và có thể chứa các đối tượng cấp khối khác gồm các tag: P, H1, Body, table

- Đối tượng cấp hàng thường không tạo dòng mới, thường chứa văn bản và các yếu tố trong hàng khác gồn các tag: B, Font

- Các tag DIV và SPAN: có thể kết nối với các phần tử cấp khối và ID để tạo ra các tag tuỳ ý. Trong đó DIV phù hợp với các đối tượng cấp khối, SPAN phù hợp với các đối tượng cấp hàng

3.2.1. Tạo tag cấp khối tuỳ ý:
Cú pháp: Bằng cách thêm một lớp hoặc ID vào tag DIV và định mẫu cần có
- Trong phần Style hoặc một bảng mẫu bên ngoài ta nhập:
DIV.ClassName{th/tính1:giá trị 1; thuộc tính 2: giá trị 2…}
với ClassName là tên lớp sẽ sử dụng. hoặc:
DIV#Idname{thuộc tính1:g trị 1; thuộc tính 2: giá trị 2…}
với IDName là tên cá biệt của tag DIV
- Áp dụng tag cấp khối tuỳ ý vào trang HTML: Tại đầu phần văn bản muốn định dạng, nhập cú pháp
<DIV Class=”ClassName” IDname=”Idname”>Nội dung </DIV>
(bên trong có thể chứa các tag <P> hoặc <H1>)
3.2.2. Tạo các tag trong hàng tuỳ ý:
Kết nối nhiều kiểu định dạng văn bản trong một tag
Cú pháp:
- Trong phần Style, nhập cú pháp:
SPAN.Classname {th/tính1:giá trị1; th/tính2: giá trị 2…}
Hoặc:
SPAN#IDname {th/tính1:giá trị 1; th/tính 2: giá trị 2…}
- Áp dụng tag trong hàng tuỳ ý vào trang HTML: Tại đầu đoạn văn bản muốn định dạng, nhập cú pháp:
<SPAN Class=”classname”> nội dung văn bản</SPAN>
Hoặc:
<SPAN ID=”IDName”> Nội dung văn bản</SPAN>
3.2.3. Các thuộc tính định dạng văn bản:
a) Chọn bộ font:
font-family: familyname1, familyname2…
b) Tạo chữ nghiêng:
Font-style: italic
c) Tạo chữ đậm:
Font-weight: bold
d) Định cỡ chữ:
Font-size: xx-smallhoặc x-small, small, medium, large, x-large, xx-large hoặc Font-size:12pt (giá trị cụ thể)
Có thể định dạng các thuộc tính chữ nghiêng, đậm và cở chữ cùng một lúc:
Font: italic bold size
e) Màu của chữ:
Color: colorName/#rrggbb
f) Màu nền của chữ:
Background:colorName/#rrggbb
g) Định khoảng các giữa các từ, các ký tự:
Word-spacing:n (n: khoảng cách giữa các từ, tính bằng pixel)
Letter-spacing:n (n: khoảng cách giữa các từ, tính bằng pixel)
h) Canh lề cho văn bản:
Text-Align: left, right, center, justify
i) Thay đổi dạng chữ:
Text-transform: capitalize, uppercase, lowercase
3.2.4. Định dạng danh sách:
List-style:circle chấm tròn rổng
List-style: disc chấm tròn đen
List-style: square chấm đen vuông
List-style: decimal đánh số ả rập
List-style: lower-alpha thứ tự alpha
List-style: upper-alpha thứ tự alpha chữ in hoa
List-style: upper-roman số la mã hoa
List-style: lower-roman số la mã thường
3.2.5. Định dạng màu nền:
Body{color:#rrggbb}
blockquote{background-color:#rrggbb}
background:bacground-color
background :background-image
background: background –position
background: background-repeat
background: background-attachment
3.2.6. Định dạng Hypertext link
A{Text-Decoration:none}: không gạch dưới
A:visited{color:#rrggbb}
A:link{styles cho vị trí chưa được xem}
A:active{style cho những link đang click}
A:hover{style khi trỏ lướt qua link}

Học Lập Trình Tại Đà Nẵng

Recent Posts

Entri Populer

Label

HTML: Sử dụng CSS (Cascading Style Sheet) thiết kế Website