HTML5 XP session 06 định dạng với style sheet t3

Giải thích về các kiểu cho văn bản và font.ColortextaligntextdecorationtextindenttexttransformwordspacinglineheightMô tả về một vùng nằm trong dòng (inline spans)Giải thích về thụt lề đoạn văn (paragraph indentation) text–indentpaddingmarginGiải thích thuộc tính borderGiải thích về căn lề ngang cho đoạnGiải thích về khoảng cách giữa các dòng trong đoạn

Trang 1

Bài 06:

Định dạng với Style Sheet

NexTGen Web

Trang 2

© Aptech Ltd Định dạng với Style Sheet / Bài 06 2

 Giải thích về các kiểu cho văn bản và font.

 Mô tả về một vùng nằm trong dòng (inline spans)

 Giải thích về thụt lề đoạn văn (paragraph indentation)

 text–indent

 padding

 margin

 Giải thích thuộc tính border

 Giải thích về căn lề ngang cho đoạn

 Giải thích về khoảng cách giữa các dòng trong đoạn

Trang 3

Font cho văn bản 1-2

 Các thuộc tính văn bản xác định và điều khiển sự hiện diện cho các văn bản trong một trang web.

 Người sử dụng có thể thay đổi màu sắc cho văn bản, tăng hoặc giảm khoảng cách giữa các ký tự, căn lề cho văn bản, bằng việc sử dụng các thuộc tính text.

color Nó được sử dụng để xác định màu sắc của văn bản

text-align Nó được sử dụng trong việc xác định căn lề ngang của văn bản trong một phần tử

text-decoration Nó được sử dụng để xác định decoration của các văn bản trong một phần tử

text-indent Nó được sử dụng để xác định thụt đầu dòng của dòng đầu tiên của văn bản trong một phần

tử trong chiều dài hoặc %

text-transform Nó được sử dụng để xác định sự chuyển đổi hình thức của văn bản trong một phần tử

word-spacing Nó được sử dụng để tăng hoặc giảm khoảng cách giữa các từ

Trang 4

 Các thuộc tính font cho phép bạn quy định phông chữ cho văn bản và thay đổi các thuộc tính phông chữ khác nhau của văn bản như font chữ, kích thước, và phong cách của văn bản.

font-family Nó được sử dụng để xác định phông chữ và có thể chỉ định một tập font hoặc một tên font cụ thể như "Serif" hoặc

"Times New Roman".

font-size Nó được sử dụng để xác định kích thước của các font chữ và có thể có một giá trị tuyệt đối hay tương đối.

font-style Nó được sử dụng để xác định kiểu của phông chữ.

font-variant Nó được sử dụng để xác định liệu các văn bản sẽ được hiển thị nhỏ.

 Một số giá trị của thuộc tính text-align

Trang 5

src: url('myfont.ttf') format('truetype');

}

Trang 6

length Chỉ ra đơn vị bằng độ dài, mặc định là 0

% Chỉ ra đơn vị bằng phần trăm

 Giá trị của thuộc tính text-indent

 Các giá trị của thuộc tính text-transform

Trang 7

Kiểu kiểu văn bản 2-6

 Ví dụ.

Trang 8

 Mã CSS

 CSS cho phần tử DIV

 Kết quả

Trang 9

 Các giá trị của thuộc tính text-decoration

 Các giá trị của huộc tính word-spacing

Trang 10

 Ví dụ

Trang 11

 CSS cho phần tử body và H3

 Kết quả

Trang 12

 Trong CSS, thuộc tính line-height được sử dụng để giãn dòng trong một đoạn.

 Thuộc tính cũng là một thành phần của thuộc tính ‘font’ viết tắt.

 Nó có thể áp dụng các phần tử mức khối, ô của bảng, phụ đề của bảng (table caption), vv

normal Dòng có chiều cao bình thường Là giá trị mặc định

number Là một số sẽ nhân với kích thước font hiện hành để xác định chiều cao của dòng

length Chiều cao cố định của dòng được tính bằng px, pt, cm, vv…

% Chiều cao của dòng tính theo tỷ lệ so với kích thước của font hiện hành

inherit Chỉ ra giá trị của thuộc tính line-height được thừa kế từ phần tử cha

Trang 13

light blue

 Tạo style cho thẻ trong loại style external.

.eyesonly {font-color: lightblue}

Trang 14

 Bảng sau liệt kê các thuộc tính khác nhau và giá trị sử dụng trong thẻ .

ltr

Sử dụng xác định hướng văn bản.

id id Xác định tên id sử dụng cho phần tử.

lang language_code Xác định mã ngôn ngữ sử dụng cho phần tử.

style style_definition Xác định kiểu sử dụng cho phần tử

xml:lang language_code Xác định mã ngôn ngữ sử dụng cho phần tử trong các tài liệu

XHTML.

Trang 15

Thụt lề cho đoạn văn bản 1-6

 Thụt dầu dòng là quá trình thiết lập ra các văn bản từ vị trí bình thường của nó, hoặc sang trái hoặc bên phải.

 Trong đoạn, có ba loại thụt đầu dòng :

Trang 16

The font styles properties allow you to specify the font for the text They allow

you to change the different font attributes of the text such as font, size, and style

of the text The browser must support the font specified by the font properties

Otherwise, it will display the default font, which is dependent on the browser.

</body>

</html>

Trang 17

Trang 18

The font styles properties allow you to specify the font for the text They allow you

to change the different font attributes of the text such as font, size, and style of

the text The browser must support the font specified by the font properties

Otherwise, it will display the default font, which is dependent on the browser.

</body>

</html>

Trang 19

 Lề (Margin)

 Thuộc tính margin được sử dụng để thêm một khoảng trắng bao vòng quanh phần tử

 Hình ảnh cho thấy kết quả hiển thị của đoạn văn sử dụng thuộc tính padding

Trang 20

Trang 21

Kiểu viền (Border Style) 1-7

 Border là các đường viền chữ nhật bao quanh một phần tử

 Border xuất hiện quanh một văn bản và hình ảnh nhằm để nhấn mạnh nội dung bên trong hộp văn bản

 Các thuộc tính border của CSS chỉ ra kiểu nét, màu sắc và kích cỡ(độ đậm) của nét cho đường viền

 Bảng dưới đây liệt kê các thuộc tính border-style:

border-left-style Chỉ ra kiểu nét của biên bên trái

border-right-style Chỉ ra kiểu nét của biên bên phải

border-top-style Chỉ ra kiểu nét của biên bên trên

border-bottom-style Chỉ ra kiểu nét của biên bên dưới

Trang 22

 Bảng liệt kê các giá trị cho thuộc tính border-style.

dashed Chỉ ra kiểu nét đường biên là nét đứt

dotted Chỉ ra kiểu nét đường biên là nét chấm

double Chỉ ra kiểu nét đường biên là nét đôi

groove Chỉ ra kiểu nét đường biên là nét 3D grooved

inset Chỉ ra kiểu nét đường biên là nét 3D inset

outset Chỉ ra kiểu nét đường biên là nét 3D outset

ridge Chỉ ra kiểu nét đường biên là nét ridged

solid Chỉ ra kiểu nét đường biên là nét liền

Trang 23

Trang 24

Trang 25

 Thuộc tính viết tắt (Shorthand property)

Trang 26

 Đoạn mã CSS minh họa sử dụng thuộc tính viết tắt border-style

 Giải thích đoạn mã

border-style: groove inset outset dashed;

• Áp dụng kiểu nét 3D cho đường viền, trong đó:

• Cạnh trên có kiểu nét là grooved

• Cạnh phải có kiểu nét là inset

• Cạnh dưới có kiểu nét là outset

• Cạnh trái có kiểu nét là dashed

Trang 27

 Hình minh họa kết quả sử dụng thuộc tính tắt border-style

Trang 28



right, top, or bottom border

border-bottom-color It is used to specify the color for the bottom border.

border-left-color It is used to specify the color for the left border.

border-right-color It is used to specify the color for the right border.

Trang 29

Màu viền - Color 2-6

shades of color to be applied to the borders.

border by using either the RGB or hexadecimal value,

or the color name itself.

Trang 30

Trang 31

Trang 32

Trang 33

Trang 34

đường viền cho toàn bộ bốn đường biên

từng cạnh trên, dưới, trái, phải

border-bottom-width Được sử dụng để chỉ ra độ đậm của đường biên dưới

border-left-width Được sử dụng để chỉ ra độ đậm của đường biên trái

border-right-width Được sử dụng để chỉ ra độ đậm của đường biên phải

border-top-width Được sử dụng để chỉ ra độ đậm của đường biên trên

Trang 35

Độ dày viền - Border Width 2-7

medium Chỉ ra độ đậm của đường biên là trung bình

length Được sử dụng chỉ ra một giá trị cụ thể cho độ dày của đường biên

thick Chỉ độ dày của đường biên là đậm (thick)

thin Được sử dụng chỉ ra độ dày của biên là mỏng

Trang 36

Trang 37

Trang 38

Trang 39

Trang 40

Trang 41

Viết ngắn gọn thuộc tính viền 1-6

viền(style), và màu cho toàn bộ các đường biên

khác nhau

border-bottom Được sử dụng để chỉ ra độ đậm(width), kiểu đường viền(style), và màu cho đường biên dưới

border-left Được sử dụng để chỉ ra độ đậm(width), kiểu đường viền(style), và màu cho đường biên trái

border-right Được sử dụng để chỉ ra độ đậm(width), kiểu đường viền(style), và mà ucho đường biên phải

border-top Được sử dụng để chỉ ra độ đậm(width), kiểu đường viền(style), và màu cho đường biên trên

Trang 42

Trang 43

Trang 44

Trang 45

Trang 46

Trang 47

Bo tròn góc

 Thuộc tính border-radius cho phép các nhà phát triển web dễ dàng sử dụng để bo tròn các góc cho các phần tử

 Nhờ có border-radius, nên các nhà phát triển web không cần phải sử dụng đến các ảnh và nhiều phần tử <div> để bo tròn.

Trang 48

 Thuộc tính viết tắt để bo tròn là border-radius

Trang 49

width: 12em;

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

}

#Example_E { height: 65px;

width: 70px;

-moz-border-radius: 35px;

border-radius: 35px;

}

Trang 50

© Aptech Ltd

max-height Thiết lập chiều cao tối đa

Trang 51

© Aptech Ltd

Building Dynamic Web Sites / 51 of 25

Thuộc tính visibility

trong phần tử bị ẩn đi hay hiển thị ra Giá trị cho

thuộc tính:

 Hidden: ẩn

 Visible: hiện

Trang 52

none Nội dung phần tử không được hiển thị

block Nội dung phần tử được hiển thị với một ngắt dòng phía trước và

sau nó inline Nội dung phần tử được hiển thị không có ngắt dòng phía trước và

sau nó

Trang 53

© Aptech Ltd

Thuộc tính float

 Float (theo như nghĩa tiếng Việt là thả trôi) 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ó

 Thuộc tính float có 3 giá trị:

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

Trang 54

 Thuộc tính float được sử trong việc tạo layout cho toàn

bộ trang web.

 Thuộc tính float được dùng để tạo layout cho các khối nhỏ trang trang web.

Trang 55

© Aptech Ltd

Thuộc tính clear

 Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là 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.

 Thuộc tính clear 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

Trang 56

 Khi không dùng thuộc tinh clear

 Có dùng thuộc tinh clear

#footer {

clear: both;

}

Trang 57

Trang 58

Trang 59

Tổng kết

 Các style văn bản xác định và kiểm soát sự hiện diện văn bản trong một trang web

 Thụt lề là quá trình bù đắp khoảng cách văn bản từ vị trí bình thường của nó, hoặc sang trái hoặc bên phải

 Thuộc tính border của CSS chỉ ra kiểu nét, màu sắc, và độ đậm của đường biên

 Thuộc tính border-color chấp nhận các giá trị màu sắc khác nhau để xác định các sắc thái khác nhau của màu sắc được áp dụng cho các đường biên

 Các giá trị của các thuộc tính border khác nhau chỉ ra các loại hiệu ứng được áp dụng cho các đường biên

 Trong CSS, thuộc tính text-align được sử dụng căn lề văn bản trong một phần tử theo phương ngang

 Trong CSS, thuộc tính line-height được sử dụng để giãn dòng trong một đoạn

Trang 60

Trang 61

Thuộc tính content trong CSS

 Thuộc tính content sử dụng kèm với bộ chọn giả phần tử :before, :after để chèn nội dung được phát sinh (generated content).

 Cú pháp:

Tên_bộ_chọn{ content: Giá_trị; }

Nội dung content: "thêm text"; Chuỗi nội dung trong dấu ngoặckép sẽ được thêm vào thành phần được chỉ ra.

attr(x) content: attr(alt); Nội dung của thuộc tính html sẽ được thêm vào nội dung thành phần.

close-quote content: close-quote; Thêm dấu ngoặc đóng vào thành phần.

open-quote content: open-quote; Thêm dấu ngoặc mở vào thành phần.

no-close-quote content: no-close-quote; bỏ dấu ngoặc đóng của thành phần.

no-open-quote content: no-open-quote; bỏ dấu ngoặc mở của thành phần.

inherit content: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

counter content:counter(myIndex) Thiết lập nội dung như bộ đếm

Trang 62

 Ví dụ 1: Tạo tooltip cho các phần tử liên kết dựa trên thuộc title

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));

}

Trang 63

Thuộc tính content trong CSS

 Ví dụ 2: Các phần tử p được đánh thứ tự như danh sách thứ tự

1 First make a variable (myIndex) and make it increase every time a p element occurs.

2 Then insert the counter in front of all p elements

3 Note: For the counter property to work in IE8, a DOCTYPE must be declared.

Định dạng
Số trang	66
Dung lượng	5,09 MB