Bố cục layout web bằng CSS
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.37 MB, 44 trang )
1
BỐ CỤC LAYOUT WEB BẰNG
CSS
8/7/2012
ThS.Nguyễn Thị Quỳnh Như-Khoa
CNTH
Nội dung bài học
Các dạng layout web cơ bản
Kỹ thuật “no table”
Cấu trúc phân cấp nội dung web
Định hướng trong sơ đồ phân cấp
Mô hình hộp
Định vị các thành phần trên web
Floating và Clearing
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 2
Các dạng layout web cơ bản
Thông thường các trang web thường bố cục
thành nhiều cột, giúp người dùng quan sát
đầy đủ nội dung mà không hoặc ít cuộn trang
màn hình.
Nếu xem xét kỹ ta sẽ nhận thấy rằng các
trang web thường được bố cục gồm 2 hoặc 3
cột.
Các cột này có thể chỉ là các cột cố định đơn
giản hoặc có thể tự động mở rộng độ rộng
một cách linh hoạt theo sự thay đổi độ rộng
của cửa sổ
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 3
Bố cục layout 2 cột
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 4
Bố cục layout 3 cột
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 5
Kỹ thuật “no table”
Việc đầu tiên cần làm để tạo bố cục là
xây dựng “bộ khung” của bố cục, được
gọi là tạo layout web.
Kỹ thuật thiết kế layout hiện nay được
gọi là kỹ thuật “no table”, nghĩa là
không dùng bảng để bố cục như đã học
mà sử dụng div để tạo ra các cột trên
trang web.
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 6
7
Thẻ DIV
Thẻ div là một layer(lớp), có thể chứa mọi thành
phần html khác. Nó đơn thuần giống như một
tag body nhưng linh động hơn vì thẻ div xác định
vị trí mà nó xuất hiện trên màn hình bất chấp nó
ở đâu trên tài liệu.
Thuộc tính cơ bản của thẻ div: id, width,
height, style
Với:
Id: định danh của thẻ div
Width, height: độ rộng, độ cao của thẻ div
Style: thuộc tính định kiểu của thẻ div
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
8
Ví dụ về thẻ DIV
<div style="position: absolute; width: 100%; height:
100px; z-index: 1; left: 77px; top: 60px"
id="layer1">
dòng thứ nhất
</div>
<div style="position: absolute; width: 100%; height:
100px; z-index: 2; left: 126px; top: 38px"
id="layer2">
<font color="#FF0000">dòng thứ hai</font><p>
<font color="#FF0000">dòng thứ 3</font>
</div>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
9
Ý nghĩa các thuộc tính bên trong
thuộc tính style của thẻ DIV
Ví dụ: <div style="position: absolute; width: 100%;
height: 100px; z-index: 1; left: 77px; top: 60px"
id="layer1">
Position: cung cấp điểm tham chiếu cho thẻ div
Các giá trị có thể là:
absolute (điểm tham chiếu vị trí cho thẻ div là góc trái phía
trên của cửa sổ trình duyệt);
relative: điểm tham chiếu vị trí tính từ vị trí gốc của văn
bản.
top,left: xác định vị trí thẻ div từ trên xuống và từ trái
sang.
_z-index: nếu chồng hai thẻ div lên nhau bằng cách
cho các phần tử chỉ vị trí nó giống hệt nhau, thẻ div
nào có giá trị z-index lớn hơn thì sẽ nổi lên trên. Nếu z-
index mà là số âm, thì thẻ div sẻ chìm xuống dưới các
phần tử html khác.
10
Thẻ SPAN
Thẻ SPAN dùng để định dạng cho một phần
text trong hàng. Thẻ SPAN tạo ra một móc
nối giữa phần text được định dạng với phần
text còn lại mà không tạo ra dòng mới.
Ví dụ
<p> Đây là sự <SPAN style=“font-style=italic;
color=red”>khác biệt </SPAN>so với nội
dung còn lại </p>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
11
Định kiểu CSS cho thẻ DIV
Cú pháp:
Bằng cách thêm một CLASS hoặc ID vào tag DIV và
định kiểu cần có
Trong phần Style hoặc một bảng kiểu bên ngoài ta
nhập:
DIV.ClassName{property1: value1;
property2:value2;…}
với ClassName là tên lớp sẽ sử dụng. hoặc:
DIV#Idname{property1: value1;
property2:value2;…}
với IDName là tên định danh của tag DIV
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
12
Tại đầu phần văn bản muốn định dạng, ta
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>,
<H1>,<Table>,<body>)
Áp dụng định kiểu cho thẻ DIV
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
13
Ví dụ :
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
DIV.control{background:magenta;font-size:28pt}
DIV#intro{color: magenta;text-indent:0pt;font-
weight:bold}
</STYLE>
</HEAD>
<BODY>
<DIV class=“control”>A hardware device that allows the user
to make electronic copies of graphics or text.</DIV>
<DIV ID=“intro”>Short for picture element. A pixel refers to
the small dots that make up an image on the screen. </DIV>
</BODY>
</HTML>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
14
Định kiểu CSS cho thẻ SPAN
Ta có thể 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 hoặc một bảng kiểu bên
ngoài ta nhập:
SPAN.Classname {property1: value1;
property2:value2;…}
Hoặc:
SPAN#Idname {property1: value1;
property2:value2;…}
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
15
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>
Áp dụng định kiểu cho thẻ SPAN
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
16
Ví dụ :
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
SPAN.control{background:magenta;font-size:200%}
SPAN#intro{font-variant:small-caps;color: orange;
font-weight:bold}
</STYLE>
</HEAD>
<BODY>
<SPAN class=“control”>A </SPAN><SPAN
style="color:red">hardware device that allows the user to
make electronic copies of graphics or text.</span>
<SPAN ID=“intro”>Short for picture element. A pixel
refers to the small dots that make up an image on the
screen. </SPAN>
</BODY>
</HTML>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
Cấu trúc phân cấp nội dung web
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 17
Định hướng trong sơ đồ phân cấp
Dựa vào sơ đồ phân cấp tài liệu web, bạn cần
phải xem xét các phần tử trong tài liệu, các yếu
tố xung quanh nó, nội dung cũng như các thuộc
tính hiện có để áp dụng định kiểu CSS tương
ứng.
Quan hệ giữa các thành phần web: ngữ cảnh
(context), cha-con (child), anh-em (adjacent).
Ứng với các quan hệ này ta có các selector được
chọn lọc hơn khi áp dụng định kiểu.
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 18
Context selector
Context selector cho phép xác định kiểu mà
một selector sẽ nhận được nếu nó là mức thấp
hơn selector cha.
Cú pháp:
Parent_selector context_selector { }
Ví dụ:
p em { color:red;}
<p> Tất cả các selector mức thấp hơn đều có cùng
màu. Selector mức 1 có <em>màu đỏ</em>.
<span>Selector mức 2 cũng có <em>màu
đỏ</em></span> </p>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 19
Child selector
Child selector cho phép xác định kiểu mà một
selector sẽ nhận được nếu nó là con trực tiếp
của selector cha.
Cú pháp:
Parent_selector>Child_selector { }
Ví dụ:
p>em { color:red;}
<p> Selector con có <em>màu đỏ</em>. Selector
khác <em>màu mặc định</em> </p>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 20
Adjacent selector
Adjacent selector cho phép áp dụng định kiểu
cho một phần tử khi nó nằm gần (nhưng không
lồng vào nhau) với một phần tử trong mã lệnh
HTML (quan hệ anh em kế cận).
Cú pháp:
brother_selector+younger_brother_selector { }
Ví dụ:
em+span { color:red;}
<p> Selector anh có <em>màu mặc định</em>.
Selector em có <span>màu đỏ</span> </p>
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 21
Pseudo element
Các phần tử giả cho phép thiết lập nội dung trên
trang web với các định kiểu đặc biệt, bao gồm
:first-line định kiểu cho dòng đầu tiên của
đoạn văn bản
:first-letter định kiểu cho ký tự đầu tiên của
đoạn văn bản
:before thiết lập nội dung xuất hiện ngay
trước nội dung của selector tương ứng
:after thiết lập nội dung xuất hiện ngay sau
nội dung của selector tương ứng
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 22
Pseudo class
Các lớp giả cho phép thiết lập nội dung trên trang web
với các hiệu ứng đặc biệt trên các phần tử, bao gồm
Các lớp giả áp dụng cho liên kết:
:hover thiết lập hiệu ứng cho selector khi di chuột qua selector
:active thiết lập hiệu ứng cho selector khi đang được chọn
:link ,:visited thiết lập hiệu ứng ban đầu cho liên kết và khi liên
kết đã được thăm
Tất cả các selector đều có thể áp dụng lớp giả :hover.
Riêng đối với các trường trên biểu mẫu, ta có thể sử
dụng lớp giả:
:focus thiết lập hiệu ứng cho selector khi đang nhấn giữ nút
trái chuột trên selector (selector đang được chọn)
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 23
24
Định dạng hyperlink
Text-Decoration:none không gạch dưới
Border:n khung viền
A:link {styles cho vị trí chưa được xem}
A:visited {styles cho vị trí đã được xem}
A:visited {color:#rrggbb;}
A:hover {styles khi trỏ lướt qua link}
A:hover {color: #FF00FF;}
A:active {styles cho những link đang click}
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH
Box Model (Mô hình hộp)
8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 25
Bottom
