LTM1 Phan2 CSS - Chuong 4 Tong quan CSS

• Ở ví dụ này, bộ chọn là phần tử HTML , như vậy, tất cả những phần tử xuất hiện trong trang web sẽ có định dạng của tiêu đề H1, kèm theo định dạng CSS màu xanh lá và được canh giữa.. S

Trang 1

Phần 2: CSS

Chương 4 : Tổng quan CSS

Tổng quan về CSS

CSS trong định dạng văn bản

Trang 2

I TỔNG QUAN VỀ CSS

• CSS là từ viết tắt của cụm từ Cascading Style Sheets

• CSS định nghĩa cách hiển thị của các tài liệu viết bằng ngôn ngữ đánh dấu như HTML

• Chẳng hạn, ta có thể dùng CSS để định dạng màu, font chữ

và cách trình bày của các thành phần trong trang Web

• CSS được thiết kế với mục đích tách biệt phần nội dung

(viết bằng ngôn ngữ HTML) với phần trình bày (viết bằng

ngôn ngữ CSS) của tài liệu

Sự tách biệt này giúp tăng khả năng truy xuất nội dung tài

liệu, tăng tính uyển chuyển và làm đơn giản, cũng như

giảm bớt sự lặp lại các thẻ định dạng trong tài liệu

• Đặc tả của CSS hiện đang được quản lý bởi tổ chức World

Wide Web Consortium (W3C)

CSS là gì ?

2

Trang 3

• Thuộc tính (property): thể hiện tính chất định dạng Đi

kèm với thuộc tính là giá trị định dạng, giữa thuộc tính và

giá trị là dấu hai chấm phân cách

Trang 4

• Chú thích (comment) được dùng để giải thích nội dung mã

định dạng CSS, nhằm mục đích dễ chỉnh sửa sau này Nội

dung bao bọc bởi dấu chú thích sẽ được trình duyệt sẽ bỏ

qua Chú thích CSS bắt đầu với dấu "/*" và kết thúc bằng

Trang 5

• Thông tin CSS có thể được khai báo trong trang

HTML theo các dạng sau:

• Inline CSS : bên trong một thẻ HTML

• Internal CSS: Trong phần đầu tài liệu HTML

(head), nằm trong khối <style>

• External CSS: Trong tập tin riêng, có thể dùng

chung cho nhiều trang HTML.

Khai báo sử dụng CSS trong HTML

Trang 6

 Kết quả: cả hai khối văn bản Khoa THQL và Bộ môn

CNPM đều có định dạng của thẻ <h1>, nhưng chỉ có

khối văn bản Khoa THQL có thêm định dạng CSS màu đỏ

và canh lề phải

6

Trang 7

• External CSS

o External CSS là khai báo CSS trong một tập tin riêng

o Các trang trong website sẽ liên kết đến tập tin CSS này

o Thao tác chỉnh sửa kiểu định dạng cho các phần tử HTML

hay những phần tử có cùng kiểu định dạng CSS rất đơn

giản, nhanh chóng

o Để áp dụng cách khai báo External CSS, trước tiên ta tạo

tập tin CSS Tập tin này chỉ chứa các định dạng CSS, không chứa thẻ HTML

o Sau đó, trong mỗi trang web cần áp dụng những định dạng

CSS đã được định nghĩa trong tập tin trên, ta dùng thẻ

<link rel="stylesheet" type="text/css"

Trang 8

color: blue;

}

8

Trang 9

• Trong phần trình bày cú pháp CSS, chúng tôi đã

giới thiệu sơ bộ về thuật ngữ bộ chọn CSS

(selector) Nhiệm vụ của bộ chọn CSS là xác định

Trang 10

• Ở ví dụ này, bộ chọn là phần tử HTML <h1>, như vậy, tất

cả những phần tử <h1> xuất hiện trong trang web sẽ có

định dạng của tiêu đề H1, kèm theo định dạng CSS màu

xanh lá và được canh giữa

• Trong trường hợp có nhiều quy tắc kiểu giống nhau như

Trang 11

CSS cung cấp khái niệm lớp kiểu nhằm giúp cho việc định

dạng được linh động, phong phú hơn

• Với lớp kiểu,

o Ta có thể xây dựng nhiều lớp kiểu định dạng cho một loại

phần tử HTML Sau đó với từng vị trí xuất hiện của phần tử

HTML này, ta xác định lớp kiểu áp dụng thông qua thuộc

tính class

o Ta có thể tạo một lớp định dạng riêng, và chủ động áp

dụng lớp định dạng này cho các loại phần tử HTML thông

qua thuộc tính class của thẻ

Bộ chọn CSS là lớp

Trang 12

• Nhiều lớp kiểu CSS áp dụng cho một loại phần tử HTML

o Cú pháp khai báo lớp kiểu CSS dành riêng cho một loại phần tử HTML

<html><head> <style type="text/css">

p.right { text-align: right}

p.center { text-align: center}

</style> </head> <body>

<p class="right“> Đây là đoạn văn bản được canh lề phải </p>

<p class="center“> Đây là đoạn văn bản được canh giữa </p>

</body></html>

Bộ chọn CSS là lớp

12

Trang 14

• Trường hợp bộ chọn là ID kiểu CSS cũng hoạt động giống

như trường hợp bộ chọn là lớp kiểu Tuy nhiên, trong cú

pháp khai báo, phía trước tên ID kiểu phải là dấu # Đồng

thời trong phần thân body, ta dùng thuộc tính

id="tên_ID_kiểu" để áp dụng kiểu định dạng cho phần

Trang 15

• Trong CSS, nhằm giảm bớt công sức của người thiết kế,

các phần tử con kế thừa các định dạng đã có của phần tử

cha Như vậy, thay vì xây dựng kiểu định dạng cho tất cả

phần tử, ta chỉ cần tạo các kiểu định dạng mặc định và

những ngoại lệ

• Giả sử ta khai báo định dạng style cho thẻ <p> có màu

xanh như sau: p { color: blue; }

• Như vậy, với khai báo, đoạn mã HTML sau, sẽ có khối văn

bản nằm giữa cặp thẻ <i> sẽ thừa kế định dạng style màu

xanh từ phần tử thẻ <p> bao bọc bên ngoài

Bộ chọn CSS là ngữ cảnh

<p> Đây là đoạn văn bản có một phần <i>in nghiêng</i></p>

Trang 16

• Sau đó, nếu ta bổ sung thêm định dạng style cho phần tử

thẻ <i>, lúc này thẻ <p> và <i> có màu sắc khác nhau

như sau:

p { color: blue; }

i { color: red; }

• Theo khai báo này, nội dung áp dụng thẻ <p> sẽ có màu

xanh, còn nội dung áp dụng thẻ <i> mặc nhiên sẽ có màu

đỏ (cho dù phần nội dung này có được bởi bao bọc bởi cặp

thẻ <p> bên ngoài hay không)

<p> Đây là đoạn văn bản có một phần <i>in nghiêng</i></p>

16

Trang 17

• Nếu ta muốn định dạng màu xanh cho khối văn bản 'in nghiêng'

bên trên (phần văn bản vừa áp dụng thẻ <i>, mà đồng thời được

bao bọc thêm bởi thẻ <p>), thì làm thế nào?

• Bộ chọn ngữ cảnh được sử dụng khi cần áp dụng kiểu định dạng

CSS cho một loại phần tử trong một ngữ cảnh xác định (phần tử

áp dụng định dạng phải được lồng bên ngoài bằng một số phần tử

thẻ khác) Các bộ chọn được trình bày trong các phần trước (phần

tử HTML, lớp kiểu CSS, ID kiểu CSS) còn được gọi là các bộ chọn

đơn.

• Ở ví dụ trên, ta cần định dạng màu xanh cho khối văn bản nằm

giữa thẻ <i> và đồng thời được bao bọc thêm bên ngoài bởi thẻ

<p> Theo yêu cầu này, khai báo định dạng style bổ sung cho yêu

cầu này như sau: p i { color: blue ; }

• Lưu ý thứ tự xuất hiện của p và i trong bộ chọn ngữ cảnh này.

• Như vậy, bộ chọn ngữ cảnh bao gồm từ hai hay nhiều bộ

chọn đơn, phân cách nhau bởi khoảng trắng Thứ tự xuất

Trang 18

• Lớp giả CSS (Pseudo-classes) là lớp định dạng kiểu cho một

trạng thái cụ thể của thẻ Cú pháp khai báo lớp giả CSS như

sau:

selector:pseudo-class {thuộc-tính: giá-trị; …}

selector.class:pseudo-class {thuộc-tính: giá-trị; …}

• Lưu ý, không giống như tên lớp có thể đặt tùy ý, tên lớp giả là

các từ khóa đã được quy định trước Hầu hết các lớp giả nhằm

chỉ định trạng thái của siêu liên kết:

Bộ chọn CSS là lớp giả

a:link Định dạng kiểu cho những liên kết chưa được chọn.

a:visited Định dạng kiểu cho những liên kết đã được chọn.

a:hover Định dạng kiểu cho những liên kết đang được con

trỏ chuột "di chuyển" bên trên (trạng thái over).

mouse-a:active Định dạng kiểu cho những liên kết ở trạng thái hoạt

động (đang được nhấn chọn).

18

Trang 19

• Để các trạng thái này hoạt động hiệu quả,

o Lớp giả a:hover phải được khai báo sau lớp giả a:link và

Trang 20

II CSS trong định dạng văn bản

• Thuộc tính CSS quyết định tính chất in đậm của văn bản là

font-weight Thuộc tính font-weight có các giá trị sau:

.tieude{ font-weight: bold; font-size: 20; }

</style> <body> <p class=tieude> Phan doan van ban ban

</p> <p> De phan doan van ban ta su dung the P hoac BR</

p> <p class=tieude> Table</p>

<p> Table la cong cu giup ban tao bang bieu va phan vung

trong thiet ke trang web </p></body>

Đặc tính văn bản – in đậm

20

Trang 21

• Văn bản in nghiêng được xác định bởi thuộc tính

font-style Thuộc tính font-style có các giá trị sau:

o normal (trị mặc định ban đầu)

o italics

o oblique (tương tự như italics, nhưng nghiêng hơn Trên

trang web, giá trị này thể hiện giống như italics, rất khó

<div style="font-style: italic"> Day la doan van ban

ma moi tu deu duoc in nghieng Neu chung ta muon

co mot tu nao do <span style="font-style: normal">

Đặc tính văn bản – in nghiêng

Trang 22

• Định dạng font chữ được xác định bởi thuộc tính

font-family Thuộc tính này cho phép giá trị là một danh sách

các tên font, phân cách nhau bởi dấu phẩy (,), nhằm đề

phòng trường hợp máy tính của người dùng không cài đầy

đủ font chữ Khi đó, trình duyệt sẽ chọn hiển thị font xuất

hiện đầu tiên trong danh sách này, mà được cài đặt sẵn

Trang 23

• Kích thước font chữ do thuộc tính font-size quyết định

Thuộc tính font-size có các giá trị sau:

o smaller (kích thước tương đối)

o larger (kích thước tương đối)

o Trị số (Ví dụ font-size:12pt)

o Trị phần trăm %, tương đối so với kích thước font chữ của

phần tử cha.

Đặc tính văn bản – kích thước

Trang 24

• Thuộc tính font-variant cho phép chuyển đổi mọi kí tự

sang dạng chữ viết hoa, với những chữ đã viết hoa trước đó

có kích thước lớn hơn các chữ viết thường

• Thuộc tính font-variant có thể nhận các giá trị sau:

Trang 25

Màu của văn bản được xác định thông qua thuộc tính

color Giá trị của color có thể là :

• Tên tiếng Anh của màu ( Ví dụ: red, green, blue, yellow, …)

Trang 26

• Thuộc tính font cho phép xác định cùng lúc tất cả thuộc

tính font chữ đã được mô tả phía trước Giá trị thuộc tính

font như sau:

[<font-style> || <font-variant> || <font-weight>]

<font-size>[/<line-height>] <font-family>

Lưu ý, thuộc tính font bắt buộc ta phải luôn xác định kích

thước font chữ và họ font chữ, còn các giá trị khác là tùy

chọn

• Ví dụ :

p {font: 12pt/14pt Times, serif}

p {font: italic bold x-large/150% palatino, serif}

Đặc tính văn bản – thuộc tính font

26

Trang 27

• Thuộc tính line-height xác định khoảng cách giữa các

dòng trong đoạn văn Thuộc tính line-height có thể nhận

các trị sau:

o Số (chấp nhận số thập phân)

o Độ dài

o Phần trăm

• Trong đó, trị độ dài là những giá trị tuyệt đối (ví dụ như

1cm, 0.5in, 14mm) hoặc một trị tương đối (ví dụ như

1.2em) Các trị số và phần trăm, cũng giống như trị độ dài

với đơn vị em, đều cho kết quả là một trị tương đối Giả sử

kích thước font chữ là 10pt và chiều cao dòng là 1.2 hay

120% hay 1.2em thì cũng đều nhận được chiều cao thực sự

là 12pt

Đặc tính đoạn văn bản – chiều cao dòng

Trang 28

Day la doan van ban su dung thuoc tinh line-heigh la

2 de co duoc chieu cao gap doi so voi nhung doan

van ban khac trong tai lieu web nay </div>

<p> Con day la doan van voi chieu cao binh thuong,

khong ap dung gia tri nao cho thuoc tinh

line-height </p>

</body></html>

Đặc tính đoạn văn bản – chiều cao dòng

28

Trang 29

• Thuộc tính letter-spacing cho phép chỉnh sửa khoảng

trống giữa các kí tự Nhờ thuộc tính này, ta có thể mở rộng

hay nén văn bản, thậm chí có thể làm cho văn bản chồng

lên nhau Thuộc tính letter-spacing có thể nhận các trị sau:

o normal

o Trị độ dài (VD: 5px , +4px, 0.1em)

• Ví dụ :

P { letter-spacing: 0.04in}

<h1 style="letter-spacing: -3px;">Day la tieu de cap

1 voi khoang cach ki tu nho hon</h1>

<h1 style="letter-spacing: +5px;">Con day la tieu de cap 1 voi khoang cach ki tu rong hon</h1>

Đặc tính đoạn văn bản – khoảng cách kí tự

Trang 30

• Nếu không muốn điều chỉnh khoảng trống giữa các kí tự,

nhưng vẫn kiểm soát độ rộng chung của đoạn văn bản, ta

có thể thay đổi khoảng cách giữa các từ bằng thuộc tính

word-spacing Thuộc tính word-spacing có thể nhận các

Trang 31

• Trong CSS, để canh chỉnh văn bản theo phương ngang

(canh lề trái, lề phải hay canh giữa), ta sử dụng thuộc tính

text-align Thuộc tính này có các giá trị sau:

Trang 32

• Đây là đặc điểm không có trong HTML, ngoại trừ trong thẻ <sup>

và <sub> (dùng để tạo chỉ số trên và chỉ số dưới) Thuộc tính

vertical-align giúp canh chỉnh văn bản theo chiều đứng với các trị sau:

o text-top: canh đỉnh (top) của phần tử với đỉnh của phần tử cha

o text-bottom: canh phần đáy (bottom) của phần tử với phần đáy của phần tử cha

o top: canh đỉnh của phần tử với đỉnh của phần tử cao nhất trong dòng

o middle: canh vị trí giữa của phần tử với vị trí giữa của phần tử

o Giá trị phần trăm Ví dụ: 50% (cao hơn 50% so với dòng chuẩn).

Đặc tính đoạn văn bản – canh chỉnh theo chiều

đứng

32

Trang 33

<p> Xerox <span class="tm">tm</span> la nhan hieu

thuong mai cua tap doan Xerox.</p>

</body>

</html>

Đặc tính đoạn văn bản – canh chỉnh theo chiều

đứng

Trang 34

• Để trang trí văn bản như gạch dưới, gạch ngang văn bản, … ta

sử dụng thuộc tính decoration Thuộc tính

Tim kiem voi Yahoo!</a>

Đặc tính đoạn văn bản – trang trí văn bản

34

Trang 35

• Thuộc tính text-transform hỗ trợ khả năng thay đổi kiểu viết

hoa – thường của văn bản Các giá trị của thuộc tính này gồm:

o capitalize: hiển thị kí tự đầu tiên của mỗi từ ở dạng chữ hoa, các kí tự còn lại ở dạng chữ thường

o uppercase: hiển thị toàn bộ kí tự là chữ hoa

o lowercase: hiển thị toàn bộ kí tự là chữ thường

o none: hiển thị các kí tự như nguyên gốc

Tiêu đề	Tổng Quan Về CSS
Trường học	Trường Đại Học XYZ
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Tài Liệu
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	35
Dung lượng	170,66 KB