Bố cục layout web bằng CSS

Ý nghĩa các thuộc tính bên trong thuộc tính style của thẻ DIV Ví dụ:  Position: cung cấp điểm tham chiếu cho thẻ div  _z-index: nếu chồng hai thẻ div lên nhau bằng cách cho các phầ

BỐ CỤC LAYOUT WEB BẰNG

CSS

ThS.Nguyễn Thị Quỳnh Như-Khoa

Nội dung bài học

Các dạng layout web cơ bản

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

trang web thường được bố cục gồm 2 hoặc 3 cột

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ổ

Bố cục layout 2 cột

Bố cục layout 3 cột

Kỹ thuật “no table”

xây dựng “bộ khung” của bố cục, được gọi là tạo layout web

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

Thẻ DIV

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

 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

<font color="#FF0000">dòng thứ hai</font><p>

<font color="#FF0000">dòng thứ 3</font>

</div>

Ý 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

 _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

Thẻ SPAN

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

<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>

Định kiểu CSS cho thẻ DIV

 Tại đầu phần văn bản muốn định dạng, ta

<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>

Đị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

Tại đầu đoạn văn bản muốn định dạng, nhập cú

<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>

Cấu trúc phân cấp nội dung web

Định hướng trong sơ đồ phân cấp

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

(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

Context selector

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>

Child selector

selector sẽ nhận được nếu nó là con trực tiếp của selector cha

Adjacent selector

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)

brother_selector+younger_brother_selector { }

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

trang web với các định kiểu đặc biệt, bao gồm

đoạn văn bản

đoạn văn bản

trước nội dung của selector tương ứng

nội dung của selector tương ứng

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)

Định dạng hyperlink

Box Model (Mô hình hộp)

Bottom

Định dạng margin

 Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh

một phần tử HTML Nó có thể dùng giá trị âm để lồng nội dung vào với nhau

 Tương ứng với 4 phía của một phần tử chúng ta có 4 thuộc tính tương ứng

 Đối với các trình duyệt FireFox và IE thì giá trị mặc định

của thuộc tính margin là 8px Nhưng Opera thì không hỗ

trợ như vậy Để cho thống nhất chúng ta có thể đặt

margin mặc định cho toàn bộ các phần tử

 Các giá trị mà thuộc tính margin có thể nhận được đó là:

auto, length, %

Định dạng margin

margin-top/ margin-right/ margin-bottom/ margin-left

 Ví dụ:

div.margin { margin: 10px 4px 5px 9px; }

/* top | right | bottom | left*/

center { margin-left:auto; margin-right:auto;}

8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 27

Định dạng border

 Ví dụ:

“border-width:1px; border-style:solid border-color:#CC0000; "

Định dạng từng cạnh của khung

 Để viết cho gọn chúng ta cũng có thể viết thuộc tính

padding dưới dạng shorthand

Width & Height

định chiều rộng và chiều cao của thẻ p

8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 30

Width & Height

 max-width: quy định chiều rộng tối đa

Định vị trí thẻ

gồm các điểm ảnh, có trục tọa độ là góc trên trái màn hình, vị trí các thành phần hiển thị trên màn hình tọa độ dạng (x,y)

trí nào trên hệ tọa độ này

 Tĩnh (static)

 Tuyệt đối (absolute)

 Tương đối (relative)

 Cố định (fixed)

8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 33

Absolute position

 Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu

 Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute

 Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ

 Ví dụ: Đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt

đối

#logo1 { position:absolute; top:50px; left:70px }

#logo2 { position:absolute; top:0; right:0 }

#logo3 { position:absolute; bottom:0; left:0 }

#logo4 { position:absolute; bottom:70px; right:50px

#logo1 { position:relative; top:50px; left:70px }

#logo2 { position:relative; top:0; right:0 }

#logo3 { position:relative; bottom:0; left:0 }

#logo4 { position:relative; bottom:70px; right:50px

Thuộc tính float

 Float: là một thuộc tính CSS dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó

(như tạo các trang web 2 column layout hay 3

thực hiện việc định vị trí ảnh và text

 Left: Cố định phần tử về bên trái

 Right: Cố định phần tử về bên phải

 None: Bình thường

<img id="logo" src="Images/Chrysanthemum.jpg"/>

<p>Khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được

tràn lên để lắp vào chỗ trống </p>

</body>

Thuộc tính clear

 Thuộc tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float

để quyết định hướng xử sự của phần tử này

 Ở ví dụ trên, khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên để lắp vào chỗ trống Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không

 Thuộc tính clear có tất cả 4 thuộc tính: left (tràn bên trái), right (tràn bên phải), both (không tràn) và none

<img id="logo" src="Images/Chrysanthemum.jpg"/>

<p>Khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên

để lắp vào chỗ trống </p>

<p class="clear" >Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì chúng

ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không</p>

</body>

BÀI THỰC HÀNH 2

 Tạo trang web bằng ngôn ngữ

HTML với nội dung như hình

dưới

 Dùng CSS để định dạng theo yêu

cầu sau:

 Các mục chọn không có gạch chân

 Khi người sử dụng đưa chuột vào

mục nào, mục đó sẽ được đổi màu

chữ và chữ được phóng to hơn

 Kích thước hình ảnh ban đầu là

30% so với độ rộng cửa sổ Khi

người sử dụng đưa chuột vào ảnh

thì ảnh được phóng to lên 50%

BÀI THỰC HÀNH 3

 Tạo trang web có nội dung như hình

dưới

 Tạo 1 file CSS lưu phần định kiểu, sau

đó link vào trang web trên

màu nền của mục tương ứng sẽ đổi

thành màu nâu, chữ màu trắng

 Khi người sử dụng đưa chuột qua

các mục được đánh số, thì màu nền

của mục tương ứng sẽ đổi thành

màu xanh, chữ màu vàng

BÀI THỰC HÀNH 4

 Áp dụng các kiến thức đã học về CSS, áp dụng làm bài tập số 5.3 trong phần HTML

Bài tập 5: Dùng thẻ div để tạo ra trang template có bố cục 2 cột như sau

Banner

Menu ngang

Menu dọc Nội dung

Footer